GRID

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6

<h1> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

<h2> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

<h3> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

<h4> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

<h5> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

<h6> Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempore amet aut reiciendis illum necessitatibus.

h4 - Heading

You might have noticed all the monospaced text in this guide. There are a number of inline HTML elements you may use anywhere within other elements, including abbr, cite, code, del, em, ins, strong, var, and link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur tempore eveniet consequatur illum ipsam impedit.

h4 - Heading between paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam perferendis a, praesentium, placeat commodi rerum tempore officiis et quo. Omnis itaque optio maxime saepe.

Horizontal Rule <hr> OR <hr class="hr">

Lists

Ordered List <ol>
  1. List Item
  2. List Item
  3. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
    1. List Item
    2. List Item
    3. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
Unordered List <ul>
  • List Item
  • List Item
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
    • List Item
    • List Item
    • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
Definition List List <dl>
Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Table

Default <table>
Heading Heading Heading Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Hover <table class="table-hover">
Heading Heading Heading Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Bordered <table class="table-expanded table-bordered">
Heading Heading Heading Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Striped <table class="table-striped">
Heading Heading Heading Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Mixed & Hover <table class="table-mixed table-hover">
Heading Heading Heading Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell

Image Alignments

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, similique?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, similique?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, similique?

Left <img class="align-left">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, culpa, officiis, recusandae minus qui autem labore eveniet ullam praesentium maxime vel eos nam! Voluptatem, iste, suscipit sit quidem veritatis vitae animi fugit numquam doloribus nemo non fugiat quibusdam laboriosam a quis deleniti minima cum repudiandae sint officiis maxime necessitatibus voluptas.

Right <img class="align-right">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, culpa, oRightficiis, recusandae minus qui autem labore eveniet ullam praesentium maxime vel eos nam! Voluptatem, iste, suscipit sit quidem veritatis vitae animi fugit numquam doloribus nemo non fugiat quibusdam laboriosam a quis deleniti minima cum repudiandae sint officiis maxime necessitatibus voluptas.

Center <img class="align-center">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, quos, deserunt obcaecati sapiente vero repellendus vel alias doloremque nam magnam quidem dolore consequuntur. Inventore, illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, quos, deserunt obcaecati sapiente vero repellendus vel alias doloremque nam magnam quidem dolore consequuntur. Inventore, illum.

Image with Frame <img class="img-thumbnail">

Buttons

Primary

Extra Small Small Medium Large Extra Large

Secondary

Extra Small Small Medium Large Extra Large

Social Icons (With Tooltips)

Bootstrap Grid (only)

Please refer to http://getbootstrap.com/css/#grid

Gravity Form

  • This field is for validation purposes and should be left unchanged.