Bootstrap kickoff template with responsive type


Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Paragraphs

You can use the lead class to make information stand out from other content - such as the first paragraph on the page. Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Alignment classes

You can set content to left-align using the text-left class. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


You can set content to centred using the text-center class. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


You can set content to right-align using the text-right class. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


You can set content to justified using the text-justify class. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Responsive images

To make images "responsive" (they will change size as needed with the viewport) they be given the class of img-responsive.

To make images into smaller thumbnail images, they can be given the classes of img-responsive and thumbnail.


Unordered list

Unordered lists are used to markup lists where list items do not require numbering.

  • Ut wisi enim ad minim veniam
  • Quis nostrud exerci tation
  • Lamcorper suscipit lobortis nis
  • Ut aliquip ex ea commodo consequat
  • Duis autem vel eum iriure dolor

Ordered list

Ordered lists are used to markup lists where list items require numbering.

  1. Hendrerit in vulputate velit esse
  2. Olestie consequat
  3. Vel illum dolore eu feugiat
  4. Nulla facilisis at vero eros
  5. Accumsan et iusto odio

Unstyled list

You can make the list unstyled using the list-unstyled class.

  • Ut wisi enim ad minim veniam
  • Quis nostrud exerci tation
  • Lamcorper suscipit lobortis nis
  • Ut aliquip ex ea commodo consequat
  • Duis autem vel eum iriure dolor

Inline list

You can make the list display inline using the list-inline class.

  • One
  • Two
  • Three
  • Four

Blockquotes

The blockquote element is used to markup long quotations. Ideally, content inside should be wrapped in paragraph elements.

The real names of our people were destroyed during slavery. The last name of my forefathers was taken from them when they were brought to America and made slaves, and then the name of the slave master was given, which we refuse, we reject that name today and refuse it. I never acknowledge it whatsoever.


Tables

Tables should be given the class of table along with additional classes - if needed - such as table-striped, table-bordered, table-hover, table-condensed.

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

Forms

Make sure you use a valid email address


Buttons

Buttons are styled with the .btn class and then one of the other classes such as btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link.


Pagination

Pagination can be applied to any unordered list using the pagination class.


Pager

The pager (which creates next and previous page links) can be applied to any unordered list using the pager class.