Skip to content

Instantly share code, notes, and snippets.

@gr2m
Last active August 29, 2015 14:04
Show Gist options
  • Save gr2m/fa99aeda834482643330 to your computer and use it in GitHub Desktop.
Save gr2m/fa99aeda834482643330 to your computer and use it in GitHub Desktop.
I've read the whole Bootstrap 3 documentation. I learned a few new things.
  • add respond.js to IE < 9 https://github.com/scottjehl/Respond
  • make sure we use latest IE renderer available <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • http://getbootstrap.com/getting-started/#support-ie10-width
  • <meta name="viewport" content="width=device-width, initial-scale=1">
  • .container > .row > .col > .row > .col
  • make semantic col names: http://getbootstrap.com/css/#grid-less
  • Learn
  • use <footer> in <blockquote> for citations. Also: .blockquote-reverse for right-aligned
  • Lists
    • remove list-styles by adding .list-unstyled
    • .list-inline for inline lists
    • Horizontal description lists with .dl-horizontal
  • use kbd for for keyboard shortcuts
  • Forms
    • .form .form-group :any(.label, .form-control)
    • for .form-horizontal, form-group behaves lik .row
    • wrap checkboxes / radios into <label>. And wrap these <labels>s into div.checkbox / div.radio
    • for inline, wrap in div.checkbox-inline / div.radio-inline
    • .form-control-static to add text where you'd otherwise put an input
    • .form-group can have .has-success / .has-warning / .has-error
    • hide labels with .sr-only
    • control sizes of .form-groups with .input-lg and input-sm as well as .col-lg-*. For .form-groups, there are form-group-lg and form-group-sm
    • .help-block for help text
    • Buttons: .btn-lg, .btn-sm, or .btn-xs
  • .img-responsive to make images max-width: 100%
  • .img-rounded, .img-circle, .img-thumbnail
  • .pull-left / .pull-right can be used everywhere to float content
  • .center-block
  • .show / .hidden / .invisible
  • .text-hide for image replacements
  • .visible-sm-*, .visible-md-*, .visible-lg-*, .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg, .visible-*-block, .visible-*-inline, .visible-*-inline-block, .hidden-print, visible-print-block, .visible-print-inline, .visible-print-inline-block
@MwirabuaTimothy
Copy link

I knew half of this already :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment