Titling

Add titling styles, just add .h1, .h2, .h3, .h3, .h4, .h5 to any element

We do this for SEO reasons, someteimes you need a minimal <h1> and a big bold text like a title, but it's a <span>

Example

This is a unstyled h1

Heading 1

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Heading 3

Heading 4

Heading 5


<h1>This is a unstyled h1</h1>
<span class="h1">Heading 1</span>
<p>...</p>
<span class="h2">Heading 2</span>
<p>...</p>
<span class="h3">Heading 3</span>
<p>...</p>
<span class="h4">Heading 4</span>
<p>...</p>
<span class="h5">Heading 5</span>
<p>...</p>

Lists

Ordered & Unordered

Just because you will often use ordered & unordered lists for navigation purposes, they are reseted, but, if you want a explicit list, just add a .list to their parent

Example - unstyled

Item 1
Item 2
Item 3
- Item 1.1
- Item 1.2
- Item 1.3
  - Item 1.1.1
  - Item 1.1.2
  - Item 1.1.3


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3
                <ul>
                    <li>Item 1.1.1</li>
                    <li>Item 1.1.2</li>
                    <li>Item 1.1.3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Example - unordered list

Item 1
Item 2
Item 3
- Item 1.1
- Item 1.2
- Item 1.3
  - Item 1.1.1
  - Item 1.1.2
  - Item 1.1.3


<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3
                <ul>
                    <li>Item 1.1.1</li>
                    <li>Item 1.1.2</li>
                    <li>Item 1.1.3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Example - ordered list

Item 1
Item 2
Item 3
1. Item 1.1
2. Item 1.2
3. Item 1.3
  1. Item 1.1.1
  2. Item 1.1.2
  3. Item 1.1.3


<ol class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ol>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3
                <ol>
                    <li>Item 1.1.1</li>
                    <li>Item 1.1.2</li>
                    <li>Item 1.1.3</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Definition lists

Definition lists are useful for displaying data, a label an their value, to style them just add .dl-list or .dl-vertical or if you want .dl-horizontal they will fit the same values with .form form-horizontal

Example - unstyled

definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


<dl>
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
</dl>

Example - list

definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


<dl class="dl-list">
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
</dl>

Example - list horizontal

definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
definition: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


<dl class="dl-horizontal">
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
    <dt>definition</dt>
    <dd>...</dd>
</dl>

Tables

Add basic styles to a table just add .table if you want zebra strips, add .table .table-stripped and/or bordered .table .table-bordered

This is just basic styling, most of the time, table styles depends on the theme, so it's up to you to style them in the proper way

Stripped may not work on IE8, because lacks the pseudoelement :nth-child(odd)

Example - Default

head	head	head
cell	cell	cell
cell	cell	cell


    <table class="table">
        <tr>
            <th>head</th>
            <th>head</th>
            <th>head</th>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>

Example - Stripped

head	head	head
cell	cell	cell
cell	cell	cell


    <table class="table table-stripped">
        <tr>
            <th>head</th>
            <th>head</th>
            <th>head</th>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>

Example - Bordered & Stripped

head	head	head
cell	cell	cell
cell	cell	cell
cell	cell	cell
cell	cell	cell


    <table class="table table-bordered table-stripped">
        <tr>
            <th>head</th>
            <th>head</th>
            <th>head</th>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>