Bootstrap Base Content

Bootstrap Base Content

Style Guide Documentation

about

Comments and documentation about your style guide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis enim labore facilis consequuntur! Veritatis neque est suscipit tenetur temporibus enim

Foundation

colors

Main Colors

#57DAE6
#57DAE6
#57DAE6
#57DAE6
#4dd3c9
#339db0

Complementary Colors

#384355
#384355
#384355
#384355

grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

typography

Font Stacks

"HelveticaNeue", "Helvetica", Arial, sans-serif;

Georgia, Times, "Times New Roman", serif;

Base Styles

address

Example

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <address>
  2.   <strong>Twitter, Inc.</strong><br>
  3.   795 Folsom Ave, Suite 600<br>
  4.   San Francisco, CA 94107<br>
  5.   <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  8. <address>
  9.   <strong>Full Name</strong><br>
  10.   <a href="mailto:#">[email protected]</a>
  11. </address>

badges

Example



Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <ul class="nav nav-pills">
  2.      <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
  3.      <li><a href="#">Profile</a></li>
  4.      <li><a href="#">Messages <span class="badge">3</span></a></li>
  5.    </ul>
  6.    <br>
  7.    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
  8.      <li class="active">
  9.        <a href="#">
  10.          <span class="badge pull-right">42</span>
  11.          Home
  12.        </a>
  13.      </li>
  14.      <li><a href="#">Profile</a></li>
  15.      <li>
  16.        <a href="#">
  17.          <span class="badge pull-right">3</span>
  18.          Messages
  19.        </a>
  20.      </li>
  21.    </ul>
  22.    <br>
  23.    <button class="btn btn-primary" type="button">
  24.      Messages <span class="badge">4</span>
  25.    </button>

blockquote

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blockquote with attribution

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <blockquote>
  2.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>
  4. <h3>Blockquote with attribution</h3>
  5. <blockquote>
  6.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  7.   <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
  8. </blockquote>
  9. <h3>Right aligned</h3>
  10. 		
  11. <blockquote class="blockquote-reverse">
  12.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  13.       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
  14.     </blockquote>

buttons

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2.               <p>
  3.                 <button type="button" class="btn btn-default">Default</button>
  4.                 <button type="button" class="btn btn-primary">Primary</button>
  5.                 <button type="button" class="btn btn-success">Success</button>
  6.                 <button type="button" class="btn btn-info">Info</button>
  7.                 <button type="button" class="btn btn-warning">Warning</button>
  8.                 <button type="button" class="btn btn-danger">Danger</button>
  9.                 <button type="button" class="btn btn-link">Link</button>
  10.               </p>
  12.               <p>
  13.                 <button type="button" class="btn btn-default disabled">Default</button>
  14.                 <button type="button" class="btn btn-primary disabled">Primary</button>
  15.                 <button type="button" class="btn btn-success disabled">Success</button>
  16.                 <button type="button" class="btn btn-info disabled">Info</button>
  17.                 <button type="button" class="btn btn-warning disabled">Warning</button>
  18.                 <button type="button" class="btn btn-danger disabled">Danger</button>
  19.                 <button type="button" class="btn btn-link disabled">Link</button>
  20.               </p>
  21. <p>
  22. 	<button type="button" class="btn btn-primary btn-lg">Large</button>
  23. 	<button type="button" class="btn btn-primary disabled">Disabled</button>
  24. 	<button type="button" class="btn btn-primary">Default</button>
  25. 	<button type="button" class="btn btn-primary btn-sm">Small</button>
  26. 	<button type="button" class="btn btn-primary btn-xs">Extra Small</button>
  27. </p>

code

Example

<p>A block of code is wrapped in pre tags</p>

For example, <section> should be wrapped as inline.

To switch directories, type cd followed by the name of the directory.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2. 		
  3. <pre>&lt;p&gt;A block of code is wrapped in pre tags&lt;/p&gt;</pre>
  4. <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
  5. <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>
  7.

definition lists

Example

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2. 		
  3. <dl>
  4.       <dt>Description lists</dt>
  5.       <dd>A description list is perfect for defining terms.</dd>
  6.       <dt>Euismod</dt>
  7.       <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  8.       <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  9.       <dt>Malesuada porta</dt>
  10.       <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  11.     </dl>
  13. 	
  15. <h3>Horizontal</h3>
  16. <dl class="dl-horizontal">
  17.       <dt>Description lists</dt>
  18.       <dd>A description list is perfect for defining terms.</dd>
  19.       <dt>Euismod</dt>
  20.       <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  21.       <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  22.       <dt>Malesuada porta</dt>
  23.       <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  24.       <dt>Felis euismod semper eget lacinia</dt>
  25.       <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
  26.     </dl>

form controls

Example

Inline checkboxes

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <input type="text" class="form-control" placeholder="Text input">
  2. <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
  3. <input class="form-control input-lg" type="text" placeholder=".input-lg">
  4. <input class="form-control" type="text" placeholder="Default input">
  5. <input class="form-control input-sm" type="text" placeholder=".input-sm">
  6. <div class="row">
  7.   <div class="col-xs-2">
  8.     <input type="text" class="form-control" placeholder=".col-xs-2">
  9.   </div>
  10.   <div class="col-xs-3">
  11.     <input type="text" class="form-control" placeholder=".col-xs-3">
  12.   </div>
  13.   <div class="col-xs-4">
  14.     <input type="text" class="form-control" placeholder=".col-xs-4">
  15.   </div>
  16. </div>
  17. <div class="form-group has-success has-feedback">
  18.   <label class="control-label" for="inputSuccess2">Input with success</label>
  19.   <input type="text" class="form-control" id="inputSuccess2">
  20.   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  21. </div>
  22. <div class="form-group has-warning has-feedback">
  23.   <label class="control-label" for="inputWarning2">Input with warning</label>
  24.   <input type="text" class="form-control" id="inputWarning2">
  25.   <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  26. </div>
  27. <div class="form-group has-error has-feedback">
  28.   <label class="control-label" for="inputError2">Input with error</label>
  29.   <input type="text" class="form-control" id="inputError2">
  30.   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  31. </div>
  32. <textarea class="form-control" rows="3"></textarea>
  33. <div class="checkbox">
  34.   <label>
  35.     <input type="checkbox" value="">
  36.     Option one is this and that&mdash;be sure to include why it's great
  37.   </label>
  38. </div>
  40. <div class="radio">
  41.   <label>
  42.     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  43.     Option one is this and that&mdash;be sure to include why it's great
  44.   </label>
  45. </div>
  46. <div class="radio">
  47.   <label>
  48.     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  49.     Option two can be something else and selecting it will deselect option one
  50.   </label>
  51. </div>
  52. <h3>Inline checkboxes</h3>
  53. <label class="checkbox-inline">
  54.   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  55. </label>
  56. <label class="checkbox-inline">
  57.   <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  58. </label>
  59. <label class="checkbox-inline">
  60.   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  61. </label>
  62. <select class="form-control">
  63.   <option>1</option>
  64.   <option>2</option>
  65.   <option>3</option>
  66.   <option>4</option>
  67.   <option>5</option>
  68. </select>
  70. <select multiple class="form-control">
  71.   <option>1</option>
  72.   <option>2</option>
  73.   <option>3</option>
  74.   <option>4</option>
  75.   <option>5</option>
  76. </select>

headings

Example

Page Header With Small Text

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h1 class="page-header">Page Header <small>With Small Text</small></h1>
  2. <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
  3. <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
  4. <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
  5. <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
  6. <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
  7. <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

images

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. 			<p>
  2.              	<img src="http://placehold.it/120x100" class="img-rounded">
  3.              	<img src="http://placehold.it/120x100" class="img-circle">
  4.              	<img src="http://placehold.it/120x100" class="img-thumbnail">
  5.              </p>
  6.              <p>
  7.              	<img src="http://placehold.it/1200x300" class="img-responsive"></img>

labels

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default Primary Success Info Warning Danger

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h1>Example heading <span class="label label-default">New</span></h1>
  2.     <h2>Example heading <span class="label label-default">New</span></h2>
  3.     <h3>Example heading <span class="label label-default">New</span></h3>
  4.     <h4>Example heading <span class="label label-default">New</span></h4>
  5.     <h5>Example heading <span class="label label-default">New</span></h5>
  6.     <h6>Example heading <span class="label label-default">New</span></h6>
  7.     <span class="label label-default">Default</span>
  8.     <span class="label label-primary">Primary</span>
  9.     <span class="label label-success">Success</span>
  10.     <span class="label label-info">Info</span>
  11.     <span class="label label-warning">Warning</span>
  12.     <span class="label label-danger">Danger</span>

lists

Example

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h3>Unordered</h3>
  2. 		
  3. <ul>
  4.       <li>Lorem ipsum dolor sit amet</li>
  5.       <li>Consectetur adipiscing elit</li>
  6.       <li>Integer molestie lorem at massa</li>
  7.       <li>Facilisis in pretium nisl aliquet</li>
  8.       <li>Nulla volutpat aliquam velit
  9.         <ul>
  10.           <li>Phasellus iaculis neque</li>
  11.           <li>Purus sodales ultricies</li>
  12.           <li>Vestibulum laoreet porttitor sem</li>
  13.           <li>Ac tristique libero volutpat at</li>
  14.         </ul>
  15.       </li>
  16.       <li>Faucibus porta lacus fringilla vel</li>
  17.       <li>Aenean sit amet erat nunc</li>
  18.       <li>Eget porttitor lorem</li>
  19.     </ul>
  20.     <h3>Ordered</h3>
  21.     <ol>
  22.           <li>Lorem ipsum dolor sit amet</li>
  23.           <li>Consectetur adipiscing elit</li>
  24.           <li>Integer molestie lorem at massa</li>
  25.           <li>Facilisis in pretium nisl aliquet</li>
  26.           <li>Nulla volutpat aliquam velit</li>
  27.           <li>Faucibus porta lacus fringilla vel</li>
  28.           <li>Aenean sit amet erat nunc</li>
  29.           <li>Eget porttitor lorem</li>
  30.         </ol>
  31.         <h3>Unstyled</h3>
  32.         
  33.         		
  34.         <ul class="list-unstyled">
  35.               <li>Lorem ipsum dolor sit amet</li>
  36.               <li>Consectetur adipiscing elit</li>
  37.               <li>Integer molestie lorem at massa</li>
  38.               <li>Facilisis in pretium nisl aliquet</li>
  39.               <li>Nulla volutpat aliquam velit
  40.                 <ul>
  41.                   <li>Phasellus iaculis neque</li>
  42.                   <li>Purus sodales ultricies</li>
  43.                   <li>Vestibulum laoreet porttitor sem</li>
  44.                   <li>Ac tristique libero volutpat at</li>
  45.                 </ul>
  46.               </li>
  47.               <li>Faucibus porta lacus fringilla vel</li>
  48.               <li>Aenean sit amet erat nunc</li>
  49.               <li>Eget porttitor lorem</li>
  50.             </ul>
  51.         
  52.         	
  53.         
  54.         
  55.        <h3>Inline</h3>
  56.        <ul class="list-inline">
  57.              <li>Lorem ipsum</li>
  58.              <li>Phasellus iaculis</li>
  59.              <li>Nulla volutpat</li>
  60.            </ul>
  62.

progress bars

Example

Basic

60% Complete
60%

Contextual Alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

45% Complete

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h3>Basic</h3>
  2. <div class="progress">
  3.   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  4.     <span class="sr-only">60% Complete</span>
  5.   </div>
  6. </div>
  7. <div class="progress">
  8.   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  9.     60%
  10.   </div>
  11. </div>
  13. <h3>Contextual Alternatives</h3>
  14. <div class="progress">
  15.   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  16.     <span class="sr-only">40% Complete (success)</span>
  17.   </div>
  18. </div>
  19. <div class="progress">
  20.   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  21.     <span class="sr-only">20% Complete</span>
  22.   </div>
  23. </div>
  24. <div class="progress">
  25.   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  26.     <span class="sr-only">60% Complete (warning)</span>
  27.   </div>
  28. </div>
  29. <div class="progress">
  30.   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  31.     <span class="sr-only">80% Complete</span>
  32.   </div>
  33. </div>
  34. <h3>Striped</h3>
  35. <div class="progress progress-striped">
  36.   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  37.     <span class="sr-only">40% Complete (success)</span>
  38.   </div>
  39. </div>
  40. <div class="progress progress-striped">
  41.   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  42.     <span class="sr-only">20% Complete</span>
  43.   </div>
  44. </div>
  45. <div class="progress progress-striped">
  46.   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  47.     <span class="sr-only">60% Complete (warning)</span>
  48.   </div>
  49. </div>
  50. <div class="progress progress-striped">
  51.   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  52.     <span class="sr-only">80% Complete (danger)</span>
  53.   </div>
  54. </div>
  55. <h3>Animated</h3>
  56. <div class="progress progress-striped active">
  57.   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
  58.     <span class="sr-only">45% Complete</span>
  59.   </div>
  60. </div>
  61. <h3>Stacked</h3>
  62. <div class="progress">
  63.   <div class="progress-bar progress-bar-success" style="width: 35%">
  64.     <span class="sr-only">35% Complete (success)</span>
  65.   </div>
  66.   <div class="progress-bar progress-bar-warning" style="width: 20%">
  67.     <span class="sr-only">20% Complete (warning)</span>
  68.   </div>
  69.   <div class="progress-bar progress-bar-danger" style="width: 10%">
  70.     <span class="sr-only">10% Complete (danger)</span>
  71.   </div>
  72. </div>

tables

Example

# First Name Tables
1 Michael Are formatted like this
2 Lucille Do you like them?
3 Success
4 Danger
5 Warning
6 Active

Striped & condensed table with alternating backgrounds

# First Name Tables
1 Michael This one is bordered and condensed
2 Lucille Do you still like it?

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2. <table class="table table-hover">
  3.               <thead>
  4.                 <tr>
  5.                   <th>#</th>
  6.                   <th>First Name</th>
  7.                   <th>Tables</th>
  8.                 </tr>
  9.               </thead>
  10.               <tbody>
  11.                 <tr>
  12.                   <td>1</td>
  13.                   <td>Michael</td>
  14.                   <td>Are formatted like this</td>
  15.                 </tr>
  16.                 <tr>
  17.                   <td>2</td>
  18.                   <td>Lucille</td>
  19.                   <td>Do you like them?</td>
  20.                 </tr>
  21.                 <tr class="success">
  22.                   <td>3</td>
  23.                   <td>Success</td>
  24.                   <td></td>
  25.                 </tr>
  26.                 <tr class="danger">
  27.                   <td>4</td>
  28.                   <td>Danger</td>
  29.                   <td></td>
  30.                 </tr>
  31.                 <tr class="warning">
  32.                   <td>5</td>
  33.                   <td>Warning</td>
  34.                   <td></td>
  35.                 </tr>
  36.                 <tr class="active">
  37.                   <td>6</td>
  38.                   <td>Active</td>
  39.                   <td></td>
  40.                 </tr>
  41.               </tbody>
  42.             </table>
  43.             <h3>Striped &amp; condensed table with alternating backgrounds</h3>
  44.             <table class="table table-striped table-bordered table-condensed">
  45.               <thead>
  46.                 <tr>
  47.                   <th>#</th>
  48.                   <th>First Name</th>
  49.                   <th>Tables</th>
  50.                 </tr>
  51.               </thead>
  52.               <tbody>
  53.                 <tr>
  54.                   <td>1</td>
  55.                   <td>Michael</td>
  56.                   <td>This one is bordered and condensed</td>
  57.                 </tr>
  58.                 <tr>
  59.                   <td>2</td>
  60.                   <td>Lucille</td>
  61.                   <td>Do you still like it?</td>
  62.                 </tr>
  63.               </tbody>
  64.             </table>

text elements

Example

Example body text

Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

Warning: Etiam porta sem malesuada magna mollis euismod.

Danger: Donec ullamcorper nulla non metus auctor fringilla.

Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info: Maecenas sed diam eget risus varius blandit sit amet non magna.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2.               <h2>Example body text</h2>
  3.               
  4.               		
  5.               <p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
  6.               
  7.               	
  8.               
  9.               
  10.               <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
  11.               <p><small>This line of text is meant to be treated as fine print.</small></p>
  12.               <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
  13.               <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
  14.               <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  15.               <p class="text-left">Left aligned text.</p>
  16.               <p class="text-center">Center aligned text.</p>
  17.               <p class="text-right">Right aligned text.</p>
  18.               <p class="text-justify">Justified text.</p>
  19.      
  20.                             <p class="text-muted">Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  21.                             <p class="text-primary">Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  22.                             <p class="text-warning">Warning: Etiam porta sem malesuada magna mollis euismod.</p>
  23.                             <p class="text-danger">Danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
  24.                             <p class="text-success">Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
  25.                             <p class="text-info">Info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

well

Example

Look, I'm in a well!
Small Well
Large Padding Well

Usage Notes

View Source Back to Top
Copy Source
  1. <div class="well">
  2.       Look, I'm in a well!
  3.     </div>
  4.     <div class="well well-small">Small Well
  5.              </div>
  7.              <div class="well well-large">Large Padding Well
  8.              </div>

Patterns - Design and mark-up patterns unique to your site.

alerts

Example

Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error Message! Numquam quos fuga quam suscipit sapiente perferendis magnam.
Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.
Info Message! Consequatur facere deleniti cumque ducimus maiores nemo.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <!-- Sample pattern, your site's patterns will be different -->
  2. <div class="alert alert-warning">
  3.   <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  4. </div>
  6. <div class="alert alert-error">
  7.   <strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam. 
  8. </div>
  10. <div class="alert alert-success">
  11.   <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
  12. </div>
  14. <div class="alert alert-info">
  15.   <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
  16. </div>

breadcrumbs

Example

  1. Home
  2. Library
  3. Data

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <ol class="breadcrumb">
  2.   <li><a href="#">Home</a></li>
  3.   <li><a href="#">Library</a></li>
  4.   <li class="active">Data</li>
  5. </ol>

buttons advanced

Example

Button Groups

With Dropdown

Vertical

Justified

Dropdowns

...
...
...

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2.     <h4>Button Groups</h4><!--sizes-->
  4.     <div class="btn-toolbar" role="toolbar">
  5.         <div class="btn-group btn-group-lg">
  6.             <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button>
  7.         </div>
  8.     </div>
  10.     <div class="col-md-12">
  11.         <div class="btn-toolbar" role="toolbar">
  12.             <div class="btn-group">
  13.                 <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button>
  14.             </div>
  15.         </div>
  16.     </div>
  18.     <div class="col-md-12">
  19.         <div class="btn-toolbar" role="toolbar">
  20.             <div class="btn-group btn-group-sm">
  21.                 <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button>
  22.             </div>
  23.         </div>
  24.     </div>
  26.     <div class="col-md-12">
  27.         <div class="btn-toolbar" role="toolbar">
  28.             <div class="btn-group btn-group-xs">
  29.                 <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button>
  30.             </div>
  31.         </div>
  32.     </div><!--with dropdown-->
  34.     <h4>With Dropdown</h4>
  36.     <div class="col-md-12">
  37.         <div class="btn-group">
  38.             <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button>
  40.             <div class="btn-group">
  41.                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown</button>
  43.                 <ul class="dropdown-menu">
  44.                     <li><a href="#">Dropdown link</a></li>
  46.                     <li><a href="#">Dropdown link</a></li>
  47.                 </ul>
  48.             </div>
  49.         </div>
  50.     </div><!--vertical-->
  52.     <h4>Vertical</h4>
  54.     <div class="col-md-12">
  55.         <div class="btn-group-vertical">
  56.             <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
  58.             <div class="btn-group">
  59.                 <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown</button>
  61.                 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
  62.                     <li><a href="#">Dropdown link</a></li>
  64.                     <li><a href="#">Dropdown link</a></li>
  65.                 </ul>
  66.             </div><button type="button" class="btn btn-default">Button</button>
  67.         </div>
  68.     </div>
  70.     <div class="col-md-12">
  71.         <!--justified-->
  73.         <h4>Justified</h4>
  75.         <div class="btn-group btn-group-justified">
  76.             <div class="btn-group">
  77.                 <button type="button" class="btn btn-default">Left</button>
  78.             </div>
  80.             <div class="btn-group">
  81.                 <button type="button" class="btn btn-default">Middle</button>
  82.             </div>
  84.             <div class="btn-group">
  85.                 <button type="button" class="btn btn-default">Right</button>
  86.             </div>
  87.         </div>
  89.         <h4>Dropdowns</h4>
  91.         <div class="col-md-12">
  92.             <!-- Split button -->
  94.             <div class="btn-group">
  95.                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
  97.                 <ul class="dropdown-menu" role="menu">
  98.                     <li><a href="#">Action</a></li>
  100.                     <li><a href="#">Another action</a></li>
  102.                     <li><a href="#">Something else here</a></li>
  104.                     <li><a href="#">Separated link</a></li>
  105.                 </ul>
  106.             </div><!-- /btn-group -->
  108.             <div class="btn-group">
  109.                 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
  111.                 <ul class="dropdown-menu" role="menu">
  112.                     <li><a href="#">Action</a></li>
  114.                     <li><a href="#">Another action</a></li>
  116.                     <li><a href="#">Something else here</a></li>
  118.                     <li><a href="#">Separated link</a></li>
  119.                 </ul>
  120.             </div><!-- /btn-group -->
  122.             <div class="btn-group">
  123.                 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
  125.                 <ul class="dropdown-menu" role="menu">
  126.                     <li><a href="#">Action</a></li>
  128.                     <li><a href="#">Another action</a></li>
  130.                     <li><a href="#">Something else here</a></li>
  132.                     <li><a href="#">Separated link</a></li>
  133.                 </ul>
  134.             </div><!-- /btn-group -->
  136.             <div class="btn-group">
  137.                 <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
  139.                 <ul class="dropdown-menu" role="menu">
  140.                     <li><a href="#">Action</a></li>
  142.                     <li><a href="#">Another action</a></li>
  144.                     <li><a href="#">Something else here</a></li>
  146.                     <li><a href="#">Separated link</a></li>
  147.                 </ul>
  148.             </div><!-- /btn-group -->
  150.             <div class="btn-group">
  151.                 <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
  153.                 <ul class="dropdown-menu" role="menu">
  154.                     <li><a href="#">Action</a></li>
  156.                     <li><a href="#">Another action</a></li>
  158.                     <li><a href="#">Something else here</a></li>
  160.                     <li><a href="#">Separated link</a></li>
  161.                 </ul>
  162.             </div><!-- /btn-group -->
  164.             <div class="btn-group">
  165.                 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
  167.                 <ul class="dropdown-menu" role="menu">
  168.                     <li><a href="#">Action</a></li>
  170.                     <li><a href="#">Another action</a></li>
  172.                     <li><a href="#">Something else here</a></li>
  174.                     <li><a href="#">Separated link</a></li>
  175.                 </ul>
  176.             </div><!-- /btn-group -->
  177.         </div>
  179.         <div class="col-md-12">
  180.             <!--split-->
  181.             <div class="btn-group">
  182.                 <button type="button" class="btn btn-default">Default</button>
  183.                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  184.                 <span class="caret"></span>
  185.                 <span class="sr-only">Toggle Dropdown</span>
  186.                 </button>
  188.                 <ul class="dropdown-menu" role="menu">
  189.                     <li><a href="#">Action</a></li>
  191.                     <li><a href="#">Another action</a></li>
  193.                     <li><a href="#">Something else here</a></li>
  195.                     <li><a href="#">Separated link</a></li>
  196.                 </ul>
  197.             </div><!-- /btn-group -->
  199.             <div class="btn-group">
  200.                 <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="sr-only">Toggle Dropdown</span><span class="caret"></span></button>
  202.                 <ul class="dropdown-menu" role="menu">
  203.                     <li><a href="#">Action</a></li>
  205.                     <li><a href="#">Another action</a></li>
  207.                     <li><a href="#">Something else here</a></li>
  209.                     <li><a href="#">Separated link</a></li>
  210.                 </ul>
  211.             </div><!-- /btn-group -->
  213.             <div class="btn-group">
  214.                 <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
  216.                 <ul class="dropdown-menu" role="menu">
  217.                     <li><a href="#">Action</a></li>
  219.                     <li><a href="#">Another action</a></li>
  221.                     <li><a href="#">Something else here</a></li>
  223.                     <li><a href="#">Separated link</a></li>
  224.                 </ul>
  225.             </div><!-- /btn-group -->
  227.             <div class="btn-group">
  228.                 <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
  230.                 <ul class="dropdown-menu" role="menu">
  231.                     <li><a href="#">Action</a></li>
  233.                     <li><a href="#">Another action</a></li>
  235.                     <li><a href="#">Something else here</a></li>
  237.                     <li><a href="#">Separated link</a></li>
  238.                 </ul>
  239.             </div><!-- /btn-group -->
  241.             <div class="btn-group">
  242.                 <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
  244.                 <ul class="dropdown-menu" role="menu">
  245.                     <li><a href="#">Action</a></li>
  247.                     <li><a href="#">Another action</a></li>
  249.                     <li><a href="#">Something else here</a></li>
  251.                     <li><a href="#">Separated link</a></li>
  252.                 </ul>
  253.             </div><!-- /btn-group -->
  255.             <div class="btn-group">
  256.                 <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
  258.                 <ul class="dropdown-menu" role="menu">
  259.                     <li><a href="#">Action</a></li>
  261.                     <li><a href="#">Another action</a></li>
  263.                     <li><a href="#">Something else here</a></li>
  265.                     <li><a href="#">Separated link</a></li>
  266.                 </ul>
  267.             </div><!-- /btn-group -->
  268.         </div>
  270.         <div class="col-md-12">
  271.             <!-- Large button group -->
  273.             <div class="btn-group">
  274.                 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Large button</button>
  276.                 <div style="margin-left: 2em" class="dropdown-menu">
  277.                     ...
  278.                 </div>
  279.             </div><!-- Small button group -->
  281.             <div class="btn-group">
  282.                 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Small button</button>
  284.                 <div style="margin-left: 2em" class="dropdown-menu">
  285.                     ...
  286.                 </div>
  287.             </div><!-- Extra small button group -->
  289.             <div class="btn-group">
  290.                 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Extra small button</button>
  292.                 <div style="margin-left: 2em" class="dropdown-menu">
  293.                     ...
  294.                 </div>
  295.             </div>
  296.         </div>
  297.     </div>

dropdowns

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <div class="dropdown">
  2.   <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     Dropdown
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  7.           <li role="presentation" class="dropdown-header">Dropdown header</li>
  8.           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  9.           <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled action</a></li>
  10.           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  11.           <li role="presentation" class="divider"></li>
  12.           <li role="presentation" class="dropdown-header">Dropdown header</li>
  13.           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  14.         </ul>
  15. </div>
  17. <div class="dropdown">
  18.               <!-- Link or button to toggle dropdown -->
  19.               <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;">
  20.                 <li class="dropdown-header">Dropdown header</li>
  21.                 <li class="disabled">
  22.                   <a tabindex="-1" href="#">Action</a>
  23.                 </li>
  24.                 <li>
  25.                   <a tabindex="-1" href="#">Another action</a>
  26.                 </li>
  27.                 <li>
  28.                   <a tabindex="-1" href="#">Something else here</a>
  29.                 </li>
  30.                 <li class="divider"></li>
  31.                 <li>
  32.                   <a tabindex="-1" href="#">Separated link</a>
  33.                 </li>
  34.               </ul>
  35.             </div>

forms

Example

Legend

Example block-level help text here.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <form>
  2.          <fieldset>
  3.            <legend>Legend</legend>
  4.            <div class="form-group">
  5.              <label for="exampleInputEmail">Email address</label>
  6.              <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
  7.            </div>
  8.            <div class="form-group">
  9.              <label for="exampleInputPassword">Password</label>
  10.              <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  11.            </div>
  12.            <div class="form-group">
  13.              <label for="exampleInputFile">File input</label>
  14.              <input type="file" class="form-control" id="exampleInputFile">
  15.              <p class="help-block">Example block-level help text here.</p>
  16.            </div>
  17.            <div class="checkbox">
  18.              <label>
  19.                <input type="checkbox">Check me out</label>
  20.            </div>
  21.            <button type="submit" class="btn btn-default">Submit</button>
  22.          </fieldset>
  23.        </form>
  24.        <hr>
  25.        <form class="form-inline">
  26.          <input type="text" class="form-control" placeholder="Email" style="width: 200px;">
  27.          <input type="password" class="form-control" placeholder="Password" style="width: 200px;">
  28.          <div class="checkbox">
  29.            <label>
  30.              <input type="checkbox">Remember me</label>
  31.          </div>
  32.          <button type="submit" class="btn btn-default">Sign in</button>
  33.        </form>
  34.        <hr>
  35.        <form class="form-horizontal">
  36.          <div class="form-group">
  37.            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
  38.            <div class="col-lg-10">
  39.              <input type="text" class="form-control" id="inputEmail" placeholder="Email">
  40.            </div>
  41.          </div>
  42.          <div class="form-group has-warning">
  43.            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
  44.            <div class="col-lg-10">
  45.              <input type="text" class="form-control" id="inputEmail" placeholder="Email">
  46.            </div>
  47.          </div>
  48.          <div class="form-group has-error">
  49.            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
  50.            <div class="col-lg-10">
  51.              <input type="text" class="form-control" id="inputEmail" placeholder="Email">
  52.            </div>
  53.          </div>
  54.          <div class="form-group has-success">
  55.            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
  56.            <div class="col-lg-10">
  57.              <input type="text" class="form-control" id="inputEmail" placeholder="Email">
  58.            </div>
  59.          </div>
  60.          <div class="form-group">
  61.            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
  62.            <div class="col-lg-10">
  63.              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  64.              <div class="checkbox">
  65.                <label>
  66.                  <input type="checkbox">Remember me</label>
  67.              </div>
  68.              <button type="submit" class="btn btn-default">Sign in</button>
  69.            </div>
  70.          </div>
  71.        </form>

hero

Example

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <div class="jumbotron">
  2.   <h1>Hello, world!</h1>
  3.   <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  4.   <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
  5. </div>

list groups

Example

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

With links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <ul class="list-group">
  2.       <li class="list-group-item">
  3.         <span class="badge">14</span>
  4.         Cras justo odio
  5.       </li>
  6.       <li class="list-group-item">
  7.         <span class="badge">2</span>
  8.         Dapibus ac facilisis in
  9.       </li>
  10.       <li class="list-group-item">
  11.         <span class="badge">1</span>
  12.         Morbi leo risus
  13.       </li>
  14.     </ul>
  15.     
  16.     <h3>With links</h3>
  17.     <div class="list-group">
  18.       <a href="#" class="list-group-item active">
  19.         Cras justo odio
  20.       </a>
  21.       <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  22.       <a href="#" class="list-group-item">Morbi leo risus</a>
  23.       <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  24.       <a href="#" class="list-group-item">Vestibulum at eros</a>
  25.     </div>
  26.     <h3>Contextual classes</h3>
  27.     <ul class="list-group">
  28.       <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  29.       <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  30.       <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  31.       <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
  32.     </ul>

media object

Example

Default

media-object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
media-object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
media-object

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media List

  • media-object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • media-object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h3>Default</h3>
  2. <div class="media">
  3.       <a class="pull-left" href="#">
  4.          <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  5.       </a>
  6.       <div class="media-body">
  7.         <h4 class="media-heading">Media heading</h4>
  8.         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  9.       </div>
  10.     </div>
  11.     <div class="media">
  12.       <a class="pull-left" href="#">
  13.          <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  14.       </a>
  15.       <div class="media-body">
  16.         <h4 class="media-heading">Media heading</h4>
  17.         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  18.         <div class="media">
  19.           <a class="pull-left" href="#">
  20.             <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  21.           </a>
  22.           <div class="media-body">
  23.             <h4 class="media-heading">Nested media heading</h4>
  24.             Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  25.           </div>
  26.         </div>
  27.       </div>
  28.     </div>
  29. <h3>Media List</h3>
  30. <ul class="media-list">
  31.       <li class="media">
  32.         <a class="pull-left" href="#">
  33.           <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  34.         </a>
  35.         <div class="media-body">
  36.           <h4 class="media-heading">Media heading</h4>
  37.           <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  38.           
  39.           <div class="media">
  40.             <a class="pull-left" href="#">
  41.               <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  42.             </a>
  43.             <div class="media-body">
  44.               <h4 class="media-heading">Nested media heading</h4>
  45.               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  46.          
  47.               <div class="media">
  48.                 <a class="pull-left" href="#">
  49.                   <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  50.                 </a>
  51.                 <div class="media-body">
  52.                   <h4 class="media-heading">Nested media heading</h4>
  53.                   Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  54.                 </div>
  55.               </div>
  56.             </div>
  57.           </div>
  58.      
  59.           <div class="media">
  60.             <a class="pull-left" href="#">
  61.               <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  62.             </a>
  63.             <div class="media-body">
  64.               <h4 class="media-heading">Nested media heading</h4>
  65.               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  66.             </div>
  67.           </div>
  68.         </div>
  69.       </li>
  70.       <li class="media">
  71.         <a class="pull-right" href="#">
  72.           <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
  73.         </a>
  74.         <div class="media-body">
  75.           <h4 class="media-heading">Media heading</h4>
  76.           Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  77.         </div>
  78.       </li>
  79.     </ul>

navbar

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <nav class="navbar navbar-default" role="navigation">
  2.   <div class="container-fluid">
  3.     <!-- Brand and toggle get grouped for better mobile display -->
  4.     <div class="navbar-header">
  5.       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  6.         <span class="sr-only">Toggle navigation</span>
  7.         <span class="icon-bar"></span>
  8.         <span class="icon-bar"></span>
  9.         <span class="icon-bar"></span>
  10.       </button>
  11.       <a class="navbar-brand" href="#">Brand</a>
  12.     </div>
  14.     <!-- Collect the nav links, forms, and other content for toggling -->
  15.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  16.       <ul class="nav navbar-nav">
  17.         <li class="active"><a href="#">Link</a></li>
  18.         <li><a href="#">Link</a></li>
  19.         <li class="dropdown">
  20.           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  21.           <ul class="dropdown-menu">
  22.             <li><a href="#">Action</a></li>
  23.             <li><a href="#">Another action</a></li>
  24.             <li><a href="#">Something else here</a></li>
  25.             <li class="divider"></li>
  26.             <li><a href="#">Separated link</a></li>
  27.             <li class="divider"></li>
  28.             <li><a href="#">One more separated link</a></li>
  29.           </ul>
  30.         </li>
  31.       </ul>
  32.       <form class="navbar-form navbar-left" role="search">
  33.         <div class="form-group">
  34.           <input type="text" class="form-control" placeholder="Search">
  35.         </div>
  36.         <button type="submit" class="btn btn-default">Submit</button>
  37.       </form>
  38.       <ul class="nav navbar-nav navbar-right">
  39.         <li><a href="#">Link</a></li>
  40.         <li class="dropdown">
  41.           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  42.           <ul class="dropdown-menu">
  43.             <li><a href="#">Action</a></li>
  44.             <li><a href="#">Another action</a></li>
  45.             <li><a href="#">Something else here</a></li>
  46.             <li class="divider"></li>
  47.             <li><a href="#">Separated link</a></li>
  48.           </ul>
  49.         </li>
  50.       </ul>
  51.     </div><!-- /.navbar-collapse -->
  52.   </div><!-- /.container-fluid -->
  53. </nav>

navs

Example

Tabs

Justified Tabs

Pills

Stacked Pills

Tabs with dropdowns

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <h3>Tabs</h3>
  2. <ul class="nav nav-tabs">
  3.   <li class="active"><a href="#">Home</a></li>
  4.   <li><a href="#">Profile</a></li>
  5.   <li><a href="#">Messages</a></li>
  6.   <li class="disabled"><a href="#">Disabled</a></li>
  7. </ul>
  8. <h4>Justified Tabs</h4>
  9. <ul class="nav nav-tabs nav-justified">
  10.   <li class="active"><a href="#">Home</a></li>
  11.   <li><a href="#">Profile</a></li>
  12.   <li><a href="#">Messages</a></li>
  13. </ul>
  15. <h3>Pills</h3>
  16. <ul class="nav nav-pills">
  17.   <li class="active"><a href="#">Home</a></li>
  18.   <li><a href="#">Profile</a></li>
  19.   <li><a href="#">Messages</a></li>
  20. </ul>
  22. <h4>Stacked Pills</h4>
  23. <ul class="nav nav-pills nav-stacked">
  24.   <li class="active"><a href="#">Home</a></li>
  25.   <li><a href="#">Profile</a></li>
  26.   <li><a href="#">Messages</a></li>
  27. </ul>
  28. <h3>Tabs with dropdowns</h3>
  30.     <ul class="nav nav-tabs">
  31.       <li class="active"><a href="#">Home</a></li>
  32.       <li><a href="#">Help</a></li>
  33.       <li class="dropdown">
  34.         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  35.           Dropdown <span class="caret"></span>
  36.         </a>
  37.         <ul class="dropdown-menu" role="menu">
  38.           <li><a href="#">Action</a></li>
  39.           <li><a href="#">Another action</a></li>
  40.           <li><a href="#">Something else here</a></li>
  41.           <li class="divider"></li>
  42.           <li><a href="#">Separated link</a></li>
  43.         </ul>
  44.       </li>
  45.     </ul>

page header

Example

Example page header Subtext for header

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <div class="page-header">
  2.   <h1>Example page header <small>Subtext for header</small></h1>
  3. </div>

pager

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <ul class="pager">
  2.   <li><a href="#">Previous</a></li>
  3.   <li><a href="#">Next</a></li>
  4. </ul>
  5. <ul class="pager">
  6.   <li class="previous"><a href="#">&larr; Older</a></li>
  7.   <li class="next"><a href="#">Newer &rarr;</a></li>
  8. </ul>

pagination

Example

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  2.     <ul class="pagination pagination-lg">
  3.       <li> <a href="#">Prev</a> </li>
  4.       <li class="active"> <a href="#">1</a> </li>
  5.       <li> <a href="#">2</a> </li>
  6.       <li> <a href="#">3</a> </li>
  7.       <li> <a href="#">4</a> </li>
  8.       <li> <a href="#">Next</a> </li>
  9.     </ul>
  10.     
  11.         <ul class="pagination">
  12.           <li> <a href="#">Prev</a> </li>
  13.           <li class="active"> <a href="#">1</a> </li>
  14.           <li> <a href="#">2</a> </li>
  15.           <li> <a href="#">3</a> </li>
  16.           <li> <a href="#">4</a> </li>
  17.           <li> <a href="#">Next</a> </li>
  18.         </ul>
  19.         
  20.             <ul class="pagination pagination-sm">
  21.               <li> <a href="#">Prev</a> </li>
  22.               <li class="active"> <a href="#">1</a> </li>
  23.               <li> <a href="#">2</a> </li>
  24.               <li> <a href="#">3</a> </li>
  25.               <li> <a href="#">4</a> </li>
  26.               <li> <a href="#">Next</a> </li>
  27.             </ul>

panels

Example

Panel title

Panel content
Panel footer

Contextual classes

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <div class="panel panel-default">
  2.   <div class="panel-heading">
  3.     <h3 class="panel-title">Panel title</h3>
  4.   </div>
  5.   <div class="panel-body">
  6.     Panel content
  7.   </div>
  8.   <div class="panel-footer">Panel footer</div>
  9. </div>
  10. <h3>Contextual classes</h3>
  11. <div class="panel panel-primary">
  12.      <div class="panel-heading">
  13.        <h3 class="panel-title">Panel title</h3>
  14.      </div>
  15.      <div class="panel-body">
  16.        Panel content
  17.      </div>
  18.    </div>
  19.    <div class="panel panel-success">
  20.      <div class="panel-heading">
  21.        <h3 class="panel-title">Panel title</h3>
  22.      </div>
  23.      <div class="panel-body">
  24.        Panel content
  25.      </div>
  26.    </div>
  27.    <div class="panel panel-info">
  28.      <div class="panel-heading">
  29.        <h3 class="panel-title">Panel title</h3>
  30.      </div>
  31.      <div class="panel-body">
  32.        Panel content
  33.      </div>
  34.    </div>
  35.    <div class="panel panel-warning">
  36.      <div class="panel-heading">
  37.        <h3 class="panel-title">Panel title</h3>
  38.      </div>
  39.      <div class="panel-body">
  40.        Panel content
  41.      </div>
  42.    </div>
  43.    <div class="panel panel-danger">
  44.      <div class="panel-heading">
  45.        <h3 class="panel-title">Panel title</h3>
  46.      </div>
  47.      <div class="panel-body">
  48.        Panel content
  49.      </div>
  50.    </div>

thumbnails

Example

100%x180
100%x180
100%x180
100%x180

Usage Notes

This is how the element is used:

View Source Back to Top
Copy Source
  1. <div class="row">
  2.      <div class="col-xs-6 col-md-3">
  3.        <a href="#" class="thumbnail">
  4.          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
  5.        </a>
  6.      </div>
  7.      <div class="col-xs-6 col-md-3">
  8.        <a href="#" class="thumbnail">
  9.          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
  10.        </a>
  11.      </div>
  12.      <div class="col-xs-6 col-md-3">
  13.        <a href="#" class="thumbnail">
  14.          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
  15.        </a>
  16.      </div>
  17.      <div class="col-xs-6 col-md-3">
  18.        <a href="#" class="thumbnail">
  19.          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
  20.        </a>
  21.      </div>
  22.    </div>