Bootstrap Cheat Sheet

Fluid Grid Example

This is an example of the fluid grid system built into bootstrap. It's pretty simple. It's a system of 12 columns reference by the css class "span" + number and each row is added with a <div class="row-fluid"> 
        <div class="row-fluid">
          <div class="span4 bg">4</div>
          <div class="span8 bg">8</div>
        </div>

1
1
1
1
1
1
1
1
1
1
1
1

4
4
4

4
8

6
6

12

Nesting columns and Offsetting

There's also nesting and offsets available.
Offset: Just add the .offset + number class to the element being offset. Nesting: ... uhh it's just nesting dude. Figure it out.

Responsive Design

Responsive Design is not built in. You have to do it yourself.
Click here to read more about how it's done. Responsive Design

Fluid Layout Example

The Fluid Layout give you a multi column layout with the width of each column set by the divs included. I'm going to use this example and the rest in one area to save time and space. 
          <div class="container-fluid">
            <div class="row-fluid">
              <!-- each columns listed here -->
              <div class="span2"></div>
              <div class="span5"></div>
              <div class="span5"></div>
            </div>
          </div>

Left column

Buttons
Just add the "btn-(button-level)" class to each button element.








Loading Button
A button that changes to a loading state
Single Toggle Button
A button that toggles or switches between states
Checkbox Buttons
A set of buttons that act like checkboxes
Radio Buttons
A set of buttons that act like radios
Button Size
Just add the "btn-(button-size)" class to each button element.





Block Level Button
Just add the "btn-block" class to each button element.

Button Group Example
<div class="btn-group"></div>
Button Toolbar
For when you need multiple button groups in a row?
Just add another div around all the button groups and slap on the "btn-toolbar" class to that div.
Vertical Button Group
Exactly how it sounds.
Use "btn-group-vertical"
Images and Icons
Eh. Just go here.
Worth the read.
Emphasis Classes
Add the (emphasis class) to any <p> element.

Muted.

Text-Warning.

Text-Error.

Text-Info.

Text-Success.

Code
Element tag to display code. <code></code>
Description
Some weird way to do descriptions. I dunno. okay. I ended up using it just to learn it. I don't think it will ever really be useful. Just style it yourself. 
<dl>
  <dt>Bold text here.<dt>
  <dd>Desc. text here.<dd>
<dl>

Middle column

Tables

<table> classes:
"table" for basic table
"table-striped" for striping
"table-borderd" for all borders and rounded corners
"table-hover" to change color on hover
"table-condensed" for less padding

<tr> classes:
"success" for a green row
"error" for a red row
"warning for a yellow row
"info" for a puke blue row
Caption Example
First Header Second Header Third Header Fourth Header
first scond third fourth
first scond third fourth
first scond third fourth
first scond third fourth
first scond third fourth
first scond third fourth
first scond third fourth
first scond third fourth

Forms and Inputs

This section is mostly redudant to the HTML spec so not worth putting here.
It's worth reading this section on bootstraps's page since they have pretty examples.
Click here for examples.


Dropdown

I guess this works by creating a Unordered list with all the menu options as list items. Then you add it to some element... somehow. I don't completely understand it. I think you need something with a "data-toggle" attribute and set it to "dropdown" and it'll find the next unordered list element and turn that into a dropdown.
You can align shit too. But I don't know when that's going to come in handy. Look it up yourself if you need it.
Oh yea, Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering. And it requires JS. 

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">More options</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Some submenu shit.</a>
        <li><a tabindex="-1" href="#">Some submenu shit.</a>
        <li><a tabindex="-1" href="#">Some submenu shit.</a>
      </ul>
    </li>
  </ul>
</div>

Example
Action


Split Button Drop Down

Same thing, pretty much. Just add another button in the button group, and change the link into a button. Move the text from the old link to the new button.
Change this: 
<a class="btn dropdown-toggle" data-toggle="dropdown">
  Action
  <span class="caret"></span>
</a>

To This:
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
</button>
Example


Tabbed Navigation

There's other types of navigation built into bootstrap. But this is the one I use the most. So go write your own cheat sheet if you don't like it.
Link to Bootstraps Nav & Navbar page: Navigation

I'm in Section 1.

Howdy, I'm in Section 2.


Modal Panel

Shit pops up. Can't explain that.

Example Launch demo modal

ScrollSpy

Too lazy to do this. Doubt I'll ever use it. Link to the Docs: Scrollspy

Tooltips

Hover over this to see a tooltip. This one is built using the jQuery Javascript plugin.
The JS script for this is just $('#' + something).tooltip();

The worthwihle options are:
animation : boolean
html : boolean
placement : string
title : delay
delay : number

Popover

Similar to tooltips but cooler.

Popover Example:


The JS script for this is just $('#' + something).tooltip();

The worthwihle options are:
animation : boolean
html : boolean
placement : string
trigger : string (click | hover | focus | manual)
title : delay
content : string
delay : number

Right column

Pagination

Or what just looks like it.

Pager?!?

Not sure why you would use this if you have the thing above this?
Unless you're doing this.

Labels

As if you didn't have enough things with color.
Add the class "label label-(labelType)" to any span.
Default Success Warning Important Info Inverse

Badges

Even more colors to burn your retinas on.
Default Success Warning Important Info Inverse

Hero Unit

Heading

Tagline

Learn more

Thumbnails

Alerts

Warning! Best check yo self, you're not looking too good.
Error! Best check yo self, you're not looking too good.
Success! You're looking good.
Info! You're not looking too good.
Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.
I don't care about these guys so look that up yourself.

Progress Bars

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Well

Just puts text into a pretty box.

Close Icon



Muted Color

Just use the class "muted"

Collapse

You've seen this before. It set three or so section and you can "collapse" them as needed to save space. I never use this. So... go figure it out yourself. Here's the link:
Collapse

Carousel

The pictures go round and round. You could probably find a better implementation elsewhere. This can handle more than just pictures though. So maybe not.


Typeahead

Basically it's an autocomplete. I won't do this here because it requires a source. I'm too lazy to make one. Maybe one day when I have more time I'll provide a full example. For now, here's a link to the docs straight from bootstrap:
Typeahead

Affix

This is complicated. I'll figure it out one day. Maybe. Affix