The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.
It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.
[row] [span4]...[/span4] [span4]...[/span4] [/row]
As shown here, a basic layout can be created with two “columns,” each spanning a number of the 12 foundational columns we defined as part of our grid system.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag
FREE
$20
$39.99
$30
Typography:
Headings, paragraphs, lists, and other inline type elements
This is
[H1]
This is
[H2]
This is
[H3]
This is
[H4]
This is
[H5]
This is
[H6]
This is
<H1>
This is
<H2>
This is
<H3>
This is
<H4>
This is
<H5>
This is
<H6>
<p><strong><em>
[well]...[/well][well2]...[/well2]
Unordered list
<ul>
Unstyled list
<ul class="unstyled">
Ordered list
<ol>
list with icons
<ul class="unstyled"> + icons
Pricing Tables:
Pure CSS3 Pricing Tables
Start package
Advanced package
Premium package
Business package
Normal Pricing Tables
[pricet title="Start package" price="FREE" btn="Register Now" url="http://myurl.com"] CONTENT [/pricet]
Active Pricing Tables
[active_pricet title="Start package" price="FREE" btn="Register Now" url="http://myurl.com"] CONTENT [/pricet]
Nivo
Responsive Slider
[nivo]
[nivoimg url="..." caption="Some caption text here"]
[nivoimg url="..."]
[nivoimg url="..." caption="Another caption"]
[/nivo]
Buttons
Button
Shortcode
Description
[btn url="#"]Text[/btn]Standard gray button with gradient
[btn url="#" style="btn-info"]Text[/btn]Used as an alternate to the default styles
[btn url="#" style="btn-inverse"]Text[/btn]Alternate dark gray button, not tied to a semantic action or use
[btn url="#" style="btn-inverse"][icon image="icon-ok" style="icon-white"][/btn]Button with incons
Multiple sizes
Button
Shortcode
[btn size="large" url="#"]Large[/btn]
[btn url="#"]Text[/btn]
[btn size="small" url="#"]Small[/btn]
[btn size="mini" url="#"]Mini[/btn]
Separators
| Separator | Shortcode |
|---|---|
|
|
[hr] |
|
|
[hr style="dash"] |
Icons
Graciously provided by Glyphicons
Instead of making every icon an extra request, we’ve compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an [icon] tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
[icon image="icon-search"]
There are also styles available for inverted (white) icons, made ready with one extra class:
[icon iamge="icon-search" style="icon-white"]
There are 120 classes to choose from for your icons. Just add an [icon] tag with the right classes and you’re set. You can find the full list in sprites.less or right here in this document.
Heads up!
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the [icon] tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an [icon] tag, you can put an icon.
Allerts
[alert style="alert-error"] ... [/alert]
[alert style="alert-success"] ... [/alert]
[alert style="alert-info"] ... [/alert]
Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
Inline labels
Labels
Markup
Default
[label]Default[/label]
Success
[label style="label-success"]Success[/label]
Warning
[label style="label-warning"]Warning[/label]
Important
[label style="label-important"]Important[/label]
Info
[label style="label-info"]Info[/label]
Inverse
[label style="label-inverse"]Inverse[/label]
Badges
Name
Example
Markup
Default
1
[badge]1[/badge]
Success
2
[badge style="badge-success"]2[/badge]
Warning
4
[badge style="badge-warning"]4[/badge]
Error
6
[badge style="badge-error"]6[/badge]
Info
8
[badge style="badge-info"]8[/badge]
Inverse
10
[badge style="badge-inverse"]10[/badge]
Dropcaps
Dropcaps
Markup
L
alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
[dropcap1]L[/dropcap1]orem ipsum… ]
L
alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
[dropcap2]L[/dropcap2]orem ipsum… ]
L
alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
[dropcap3]L[/dropcap3]orem ipsum… ]
L
alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
[dropcap4]L[/dropcap4]orem ipsum… ]
L
alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
[dropcap5]L[/dropcap5]orem ipsum… ]
Blockquotes
Blockquote
Markup
[blockquote1]Some text[/blockquote1]
[blockquote1]Some text[/blockquote1]
[blockquote2]Some text[/blockquote2]
[blockquote3]Some text[/blockquote3]
[blockquote4]Some text[/blockquote4]
[blockquote5]Some text[/blockquote5]
[blockquote6]Some text[/blockquote6]
[blockquote7]Some text[/blockquote7]
[blockquote8]Some text[/blockquote8]
Portfolio shortcodes
[6col_portfolio pcat=category-slug show_posts=4]
[4col_portfolio pcat=category-slug show_posts=4]
[3col_portfolio pcat=category-slug show_posts=3]
[2col_portfolio pcat=category-slug show_posts=2]
HTML TABS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Nullam mollis.
<ul class="nav nav-tabs mytabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Some text</div>
<div class="tab-pane" id="profile">Some text</div>
<div class="tab-pane" id="messages">Some text</div>
<div class="tab-pane" id="settings">Some text</div>
</div>
