<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Helper css classes</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Forms</a>
            </li>
            <li class="active">
                <strong>Helper css classes</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Contextual colors</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.text-muted</code></td>
                            <td><span class="text-muted">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-primary</code></td>
                            <td><span class="text-primary">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-success</code></td>
                            <td><span class="text-success">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-info</code></td>
                            <td><span class="text-info">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-warning</code></td>
                            <td><span class="text-warning">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-danger</code></td>
                            <td><span class="text-danger">Example text</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Border radius</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.b-r-xs</code></td>
                            <td><div class="bg-primary p-xs b-r-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.b-r-sm</code></td>
                            <td><div class="bg-primary p-xs b-r-sm"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.b-r-md</code></td>
                            <td><div class="bg-primary p-xs b-r-md"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.b-r-lg</code></td>
                            <td><div class="bg-primary p-xs b-r-lg"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.b-r-xl</code></td>
                            <td><div class="bg-primary p-xs b-r-xl"> Example text</div></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Hr Line</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Standard <code>&lt;hr&gt;</code></td>
                            <td><hr> </td>
                        </tr>
                        <tr>
                            <td><code>.hr-line-dashed</code></td>
                            <td><hr class="hr-line-dashed"> </td>
                        </tr>
                        <tr>
                            <td><code>.hr-line-solid</code></td>
                            <td><hr class="hr-line-solid"></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Paddings</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.p-xxs</code></td>
                            <td><div class="p-xxs bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-xs</code></td>
                            <td><div class="p-xs bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-sm</code></td>
                            <td><div class="p-sm bg-muted"> Example text</div></td>
                        </tr>

                        <tr>
                            <td><code>.p-md</code></td>
                            <td><div class="p-md bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-lg</code></td>
                            <td><div class="p-lg bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-xl</code></td>
                            <td><div class="p-xl bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.no-paddings</code><br/><small class="text-muted">remove all paddings</small> </td>
                            <td><div class="no-padding bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-w-(xs,sm,md,lg,xl)</code><br/><small>padding width</small></td>
                            <td><div class="p-w-md bg-muted"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.p-h-(xs,sm,md,lg,xl)</code><br/><small>height width</small></td>
                            <td><div class="p-h-md bg-muted"> Example text</div></td>
                        </tr>


                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Borders</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.border-left</code></td>
                            <td><div class="p-xs border-left"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-right</code></td>
                            <td><div class="p-xs border-right"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-top</code></td>
                            <td><div class="p-xs border-top"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-bottom</code></td>
                            <td><div class="p-xs border-bottom"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.no-borders</code><br/><small class="text-muted">remove all borders</small> </td>
                            <td><div class="p-xs no-borders"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-left-right</code></td>
                            <td><div class="p-xs border-left-right"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-top-bottom</code></td>
                            <td><div class="p-xs border-top-bottom"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.border-size-(sm,md,lg,xl)</code></td>
                            <td><div class="p-xs border-top-bottom border-left-right border-size-lg"> Example text</div></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Width, height</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Description
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.h-150</code></td>
                            <td>min-height: 150px; </td>
                        </tr>
                        <tr>
                            <td><code>.h-200</code></td>
                            <td>min-height: 200px;</td>
                        </tr>
                        <tr>
                            <td><code>.h-300</code></td>
                            <td>min-height: 300px;</td>
                        </tr>
                        <tr>
                            <td><code>.w-150</code></td>
                            <td>min-width: 150px; </td>
                        </tr>
                        <tr>
                            <td><code>.w-200</code></td>
                            <td>min-width: 200px;</td>
                        </tr>
                        <tr>
                            <td><code>.w-300</code></td>
                            <td>min-width: 300px;</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Contextual backgrounds</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.bg-muted</code></td>
                            <td><div class="bg-muted p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        <tr>
                            <td><code>.bg-primary</code></td>
                            <td><div class="bg-primary p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        <tr>
                            <td><code>.bg-success</code></td>
                            <td><div class="bg-success p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        <tr>
                            <td><code>.bg-info</code></td>
                            <td><div class="bg-info p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        <tr>
                            <td><code>.bg-warning</code></td>
                            <td><div class="bg-warning p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        <tr>
                            <td><code>.bg-danger</code></td>
                            <td><div class="bg-danger p-xs b-r-sm"> Example text</div> </td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Images</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.img-circle</code></td>
                            <td><img src="img/a4.jpg" class="img-circle img-md"/> </td>
                        </tr>
                        <tr>
                            <td><code>.img-rounded</code></td>
                            <td><img src="img/a4.jpg" class="img-rounded img-md"/></td>
                        </tr>
                        <tr>
                            <td><code>.img-thumbnail</code></td>
                            <td><img src="img/a4.jpg" class="img-thumbnail img-md"/></td>
                        </tr>
                        <tr>
                            <td><code>.img-sm</code></td>
                            <td><img src="img/a4.jpg" class="img-sm"/></td>
                        </tr>
                        <tr>
                            <td><code>.img-md</code></td>
                            <td><img src="img/a4.jpg" class="img-md"/></td>
                        </tr>
                        <tr>
                            <td><code>.img-lg</code></td>
                            <td><img src="img/a4.jpg" class="img-lg"/></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Basic font width</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Description
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.font-normal</code></td>
                            <td><span class="font-normal">Example text</span> </td>
                        </tr>
                        <tr>
                            <td><code>.font-bold</code></td>
                            <td><span class="font-bold">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.font-italic</code></td>
                            <td><span class="font-italic">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-uppercase</code></td>
                            <td><span class="text-uppercase">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-lowercase</code></td>
                            <td><span class="text-lowercase">Example text</span></td>
                        </tr>
                        <tr>
                            <td><code>.text-capitalize</code></td>
                            <td><span class="text-capitalize">Example text</span></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Margins</h5>
                </div>
                <div class="ibox-content">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                Class name
                            </th>
                            <th>
                                Example
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><code>.m-xxs</code></td>
                            <td><div class="m-xxs bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-xs</code></td>
                            <td><div class="m-xs bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-sm</code></td>
                            <td><div class="m-sm bg-muted p-xs"> Example text</div></td>
                        </tr>

                        <tr>
                            <td><code>.m-md</code></td>
                            <td><div class="m-md bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-lg</code></td>
                            <td><div class="m-lg bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-xl</code></td>
                            <td><div class="m-xl bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-n</code></td>
                            <td><div class="m-n bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-l / m-l-(xs,sm,md,lg,xl)</code><br/><small>margin left</small></td>
                            <td><div class="m-l bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-l-n / m-l-n-(xs,sm,md,lg,xl)</code><br/><small>margin left negative</small></td>
                            <td><div class="m-l-n bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-l-none</code><br/><small>clear margin left</small></td>
                            <td><div class="m-l-none bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-t / m-t-(xs,sm,md,lg,xl)</code><br/><small>margin top</small></td>
                            <td><div class="m-t bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-t-n / m-t-n-(xs,sm,md,lg,xl)</code><br/><small>margin top negative</small></td>
                            <td><div class="m-t-n bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-t-none</code><br/><small>clear margin top</small></td>
                            <td><div class="m-t-none bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-r / m-r-(xs,sm,md,lg,xl)</code><br/><small>margin right</small></td>
                            <td><div class="m-r bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-r-n / m-r-n-(xs,sm,md,lg,xl)</code><br/><small>margin right negative</small></td>
                            <td><div class="m-r-n bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-r-none</code><br/><small>clear margin right</small></td>
                            <td><div class="m-r-none bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-b / m-b-(xs,sm,md,lg,xl)</code><br/><small>margin bottom</small></td>
                            <td><div class="m-b bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-b-n / m-b-n-(xs,sm,md,lg,xl)</code><br/><small>margin bottom negative</small></td>
                            <td><div class="m-b-n bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.m-b-none</code><br/><small>clear margin bottom</small></td>
                            <td><div class="m-b-none bg-muted p-xs"> Example text</div></td>
                        </tr>
                        <tr>
                            <td><code>.no-margins</code><br/><small>remove all margins</small></td>
                            <td><div class="no-margins bg-muted p-xs"> Example text</div></td>
                        </tr>



                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    </div>

    <div class="footer">
        <div class="pull-right">
            10GB of <strong>250GB</strong> Free.
        </div>
        <div>
            <strong>Copyright</strong> Example Company &copy; 2014-2015
        </div>
    </div>

</div>