Bootstrap 3 Helper classes

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

        <p class="text-muted">This text styled with class "text-muted"</p> 
        <p class="text-primary">This text styled with class "text-primary"</p> 
        <p class="text-success">This text styled with class "text-success"</p> 
        <p class="text-info">This text styled with class "text-info"</p> 
        <p class="text-warning">This text styled with class "text-warning"</p> 
        <p class="text-danger">This text styled with class "text-danger"</p>
    

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

        <p class="text-muted">This text styled with class "text-muted"</p> 
        <p class="text-primary">This text styled with class "text-primary"</p> 
        <p class="text-success">This text styled with class "text-success"</p> 
        <p class="text-info">This text styled with class "text-info"</p> 
        <p class="text-warning">This text styled with class "text-warning"</p> 
        <p class="text-danger">This text styled with class "text-danger"</p>
    

Close icon

Use the generic close icon for dismissing content like modals and alerts.

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

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

        <span class="caret"></span>
    

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

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

   
    // Classes
    .pull-left {
        float: left !important;
    }
    .pull-right {
        float: right !important;
    }

    // Usage as mixins
    .element {
        .pull-left();
    }
    .another-element {
        .pull-right();
    }
    

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

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

    
    // Mixin itself
    .clearfix() {
        &:before,
        &:after {
            content: " ";
            display: table;
        }
        &:after {
            clear: both;
        }
    }

    // Usage as a mixin
    .element {
        .clearfix();
    }
    

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats . They are only available for block level toggling. They can also be used as mixins.

    
    <div class="show">...</div>
    <div class="hidden">...</div>
    

    
    // Classes
    .show {
        display: block !important;
    }
    .hidden {
        display: none !important;
    }
    .invisible {
        visibility: hidden;
    }

    // Usage as mixins
    .element {
        .show();
    }
    .another-element {
        .hidden();
    }
    

Screen reader and keyboard navigation content

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    
    // Usage as a mixin
    .skip-navigation {
        .sr-only();
        .sr-only-focusable();
    }
    

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

    
    <h1 class="text-hide">Custom heading</h1>
    

    
    // Usage as a mixin
    .heading {
        .text-hide();
    }