mbox style guide

For more style juice, visit mbox on github.

Alerts

<div class="alert alert-success" role="alert">The sky is falling, the sky is falling!</div>
<div class="alert alert-info" role="alert">Holy Smokes, Batman!</div>
<div class="alert alert-warning" role="alert">All your base are belong to us.</div>
<div class="alert alert-danger" role="alert">The Russians are coming!</div>

Breadcrumbs

  1. Home
  2. Library
  3. Data
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Carousel

Requires the carousel plugin from bootstrap.js. See more carousel options on bootstrap.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1140x440" alt="title">
      <div class="carousel-caption">
        <h3>Optional caption</h3>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1140x440" alt="title">
      <div class="carousel-caption">
        <h3>Optional caption</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Dropdowns

Requires the dropdown plugin from bootstrap.js.

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu"><li><a href="/about-us">About</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Drop up

<div class="dropup">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Full width

<div class="dropdown">
  <button type="button" class="btn btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Full Width Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu btn-block" role="menu"><li><a href="/about-us">About</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Glyphicons

Usage

Requires the Glyphicons Halflings font from Bootstrap in your root directory > fonts > glyphicons-halflings-regular.eot/svg/ttf/woff.

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

Frequently used

glyphicon glyphicon-chevron-right
glyphicon glyphicon-chevron-down
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-up
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-earphone
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-user
glyphicon glyphicon-plus
glyphicon glyphicon-minus
glyphicon glyphicon-heart
glyphicon glyphicon-heart-empty
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
See the full list

Jumbotron

Basic Jumbotron

Hello, world!

Some content

Learn more

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>Some content</p>
  <p><a class="btn btn-red" href="#" role="button">Learn more</a></p>
</div>

Full width jumbotron

To make the jumbotron full width, place it outside all .containers and instead add a .container within.


<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Invert text

Hello, world!

Some content

Learn more

<div class="jumbotron jumbotron-dark">
  <h1>Hello, world!</h1>
  <p>Some content</p>
  <p><a class="btn btn-red" href="#" role="button">Learn more</a></p>
</div>

Jumbotron height

To standardize the height across multiple jumbotrons, or to use a css background image, it may be helpful to use one of the classes below to set a minimum height.

Classes Attribute
default height determined by content
.jumbotron-height-300px min-height: 300px
.jumbotron-height-330px min-height: 330px
.jumbotron-height-400px min-height: 400px
.jumbotron-height-500px min-height: 500px

Media object

Displays a media object (images, video, audio) to the left or right of a content block.

Media left

title

Media heading

Some content

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://placehold.it/100x100" alt="title">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some content</p>
  </div>
</div>

Media right

title

Media heading

Some content

<div class="media">
  <div class="media-right">
    <a href="#">
      <img class="media-object" src="http://placehold.it/100x100" alt="title">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some content</p>
  </div>
</div>

Modal

Requires the modal plugin from bootstrap.js.

<!-- Button trigger modal -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Some modal content</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-grey-outline" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-grey-outline">Save changes</button>
      </div>
    </div>
  </div>
</div>

Working with the modal

The modal plugin adds the following classes to the DOM which may be helpful for understanding and controlling the modal.

Classes Description
.modal-open body class for killing the scroll
.modal container to scroll within
.modal-dialog positioning shell for the actual modal
.modal-content actual modal with background and corners and stuff

Nav

Basic nav

<ul class="nav">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Nav pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Nav tabs

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Tab content

Requires the tabs plugin from bootstrap.js.

home
profile
messages
settings
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings</div>
  </div>

</div>

Pagination

Pagination blah blah blah

<ul class="pagination">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>

Pager

A simpler way to paginate.

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Thumbnails

Basic thumbnail

title
title
title
title 
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
    </a>
  </div>
</div>

Thumbnail with caption

title

Some title

Some text

Button

title

Some title

Some text

Button

title

Some title

Some text

Button

title

Some title

Some text

Button

<div class="row">
  <div class="col-xs-6 col-md-3">
    <div class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
      <div class="caption">
        <h3>Some title</h3>
        <p>Some text</p>
        <p><a href="#" class="btn btn-grey-outline btn-sm">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
      <div class="caption">
        <h3>Some title</h3>
        <p>Some text</p>
        <p><a href="#" class="btn btn-grey-outline btn-sm">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
      <div class="caption">
        <h3>Some title</h3>
        <p>Some text</p>
        <p><a href="#" class="btn btn-grey-outline btn-sm">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="thumbnail">
      <img alt="title" src="http://placehold.it/480x320">
      <div class="caption">
        <h3>Some title</h3>
        <p>Some text</p>
        <p><a href="#" class="btn btn-grey-outline btn-sm">Button</a></p>
      </div>
    </div>
  </div>
</div>

Wells

Gives content an inset effect.

Default

Lassie, Timmy fell down the well! 
<div class="well">
  Lassie, Timmy fell down the well!
</div>

Large

Lassie, Timmy fell down the well! 
<div class="well well-lg">
  Lassie, Timmy fell down the well!
</div>

Small

Lassie, Timmy fell down the well! 
<div class="well well-sm">
  Lassie, Timmy fell down the well!
</div>