Grid System

.col-md-12

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

.col-md-6

.col-md-7

.col-md-5

.col-md-8

.col-md-4

.col-md-9

.col-md-3

.col-md-10

.col-md-2

.col-md-11

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-6

.col-md-3 / .offset-md-3

.col-md-2 / .offset-md-6

.col-md-2 / .offset-md-2

.col-4

Fluid Container

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

.col-md-6

.col-md-7

.col-md-5

.col-md-8

.col-md-4

.col-md-9

.col-md-3

.col-md-10

.col-md-2

.col-md-11

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-6

.col-md-3 / .offset-md-3

.col-md-2 / .offset-md-6

.col-md-2 / .offset-md-2

.col-md-4

Variable Width

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Margin

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Column Ordering

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

First, but unordered

Second, but unordered

Third, but first

Responsive Tests

Visible on xs Visible

Visible on sm or narrower Visible

Visible on md or narrower Visible

Visible on lg or narrower Visible

Visible on sm or wider Visible

Visible on md or wider Visible

Visible on lg or wider Visible

Visible on xl Visible

xs only Visible

sm only Visible

md only Visible

lg only Visible

xl only Visible

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Marked Text

You can use the mark tag to highlight text.

Deleted / Strikethrough Text

~~This line of text is meant to be treated as deleted text.~~
~~This line of text is meant to be treated as no longer accurate.~~

Inserted / Underlined Text

This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined

Heading

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Pre / Code

public function() {
code here..
}

Blockquote

"This stylesheet is going to help so freaking much."
-Blockquote

Horizontal Description

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.

List

List Item 1
List Item 2de
1. List Item 2.1
2. List Item 2.2
3. List Item 2.3
List Item 3

List Item 1
List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.3
List Item 3

Addresses

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Text Color

.text-primary
.text-secondary
.text-success
.text-emphasis
.text-warning
.text-danger
.text-muted

Text Transformation

Lowercased text.

Uppercased text.

Capitalized text.

Alignment

Left aligned text.

Center aligned text.

Right aligned text.

Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam officia possimus iure est nostrum amet, harum ullam ea explicabo ipsam adipisci, commodi perferendis ab non cupiditate, accusamus molestias exercitationem dolor!

No wrap text.

Label

Example heading New

Default Primary Success Info Warning Danger

Buttons

Outline Buttons

Size

Disabled state

Button Group

Table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Dark

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Striped

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Bordered

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Card

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere