DeanPoulin

<!-- These buttons will take up the full width of the containing block element -->
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

DeanPoulin

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

DeanPoulin

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

DeanPoulin

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

DeanPoulin

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

DeanPoulin

<!-- This demonstrates how a, button, and input tags are all rendered consistently -->

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

DeanPoulin

<button type="button" class="close" aria-hidden="true">&times;</button>
<span class="caret"></span>

DeanPoulin

<div class="pull-left">...</div>
<div class="pull-right">...</div>

<!-- Classes -->

<style type='text/css'>
    .pull-left {
        float: left !important;
    }
    .pull-right {

DeanPoulin

<div class="center-block">...</div>

<style type="text/css">
    /* Classes */

    .center-block {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

DeanPoulin

<!-- Usage as a class -->
<div class="clearfix">...</div>

<style type="text/css">
    /* Mixin itself */
    .clearfix() {
    
        &:before,
        &:after {
            content: " ";