Headings

All HTML headings, <h1> through <h6>, are available. Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1 heading Secondary text

h2 heading Secondary text

h3 heading Secondary text

h4 heading Secondary text
h5 heading Secondary text
h6 heading Secondary text
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body copy & lead body copy

Make a paragraph stand out by adding .lead:

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.

<p class="lead">...</p>
<p>...</p>

Blockquotes

For quoting blocks of content from another source within your document.

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

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

List Styles

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul>
  <li>...</li>
</ul>

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Phasellus iaculis neque
<ol>
  <li>...</li>
</ol>

Add a list-style for Theme Lambda's custom lists:

  • list-style-1
  • list-style-1
  • list-style-1
  • list-style-2
  • list-style-2
  • list-style-2
  • list-style-3
  • list-style-3
  • list-style-3
<ul class="list-style-1"> | <ul class="list-style-2"> | <ul class="list-style-3">
  <li>...</li>
</ul>

Add colored to the class of the custom lists to style them in the theme's main color:

  • list-style-1
  • list-style-1
  • list-style-1
  • list-style-2
  • list-style-2
  • list-style-2
  • list-style-3
  • list-style-3
  • list-style-3
<ul class="list-style-1 colored"> | <ul class="list-style-2 colored"> | <ul class="list-style-3 colored">
  <li>...</li>
</ul>

Emphasis, Highlight and Alert

Wrap any text in .label, .alert and one of the four contextual classes (e.g., .text-success) for context based messages.

muted - Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

success - Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

info - Maecenas sed diam eget risus varius blandit sit amet non magna.

warning - Etiam porta sem malesuada magna mollis euismod.

danger - Donec ullamcorper nulla non metus auctor fringilla.

Default Success Info Warning Danger 

<p class="text-muted">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Images

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">
Last modified: Monday, 17 October 2016, 3:02 PM