Typography
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.
<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.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 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 |
|
Well done!
You successfully read this important alert message.
Heads up!
This alert needs your attention, but it's not super important.
Warning!
Better check yourself, you're not looking too good.
Oh snap!
Change a few things up and try submitting again.
|
<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">