GitBucket
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<!-- .row -->
<div class="row">
<!-- .col -->
<div class="col-md-6">
<h3 class="box-title">Float Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap" width="150">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.pull-left</code> </td>
<td>Element to the left (float:left).</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.pull-right</code> </td>
<td>Element to the right(float:right).</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.clearfix</code> </td>
<td>To Clear floats.(clreafix)</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap" width="150">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.show</code> </td>
<td>Element to Show (display: block)</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.hidden</code> </td>
<td>Element to hide (display: none)</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-6">
<h3 class="box-title">Text Color Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.text-muted</code> </td>
<td class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.text-primary</code> </td>
<td class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.text-success</code> </td>
<td class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.text-info</code> </td>
<td class="text-info">Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.text-warning</code> </td>
<td class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.text-danger</code> </td>
<td class="text-danger">Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<div class="col-md-12 m-t-40 m-b-40">
<hr/> </div>
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Padding Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.p-0</code> </td>
<td>Padding will be 0px from all side.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-10</code> </td>
<td>Padding will be 10px from all side.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-20</code> </td>
<td>Padding will be 20px from all side</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Padding Left Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.p-l-0</code> </td>
<td>Only Padding Left will be 0px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-l-10 </code> </td>
<td>Only Padding Left will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-l-20</code> </td>
<td>Only Padding Left will be 20px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Padding right Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.p-r-0</code> </td>
<td>Only Padding right will be 0px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-r-10 </code> </td>
<td>Only Padding right will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-r-20</code> </td>
<td>Only Padding right will be 20px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Padding top Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.p-t-0</code> </td>
<td>Only Padding top will be 0px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-t-10 </code> </td>
<td>Only Padding top will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.p-t-20</code> </td>
<td>Only Padding top will be 20px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<div class="col-md-12 m-t-40 m-b-40">
<hr/> </div>
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Margin top Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.m-t-5</code> </td>
<td>Only Margin top will be 5px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-10 </code> </td>
<td>Only Margin top will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-15 </code> </td>
<td>Only Margin top will be 15px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-20</code> </td>
<td>Only Margin top will be 20px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-30</code> </td>
<td>Only Margin top will be 30px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-40</code> </td>
<td>Only Margin top will be 40px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Margin Bottom Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.m-b-5</code> </td>
<td>Only Margin Bottom will be 5px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-b-10 </code> </td>
<td>Only Margin Bottom will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-b-15 </code> </td>
<td>Only Margin Bottom will be 15px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-b-20</code> </td>
<td>Only Margin Bottom will be 20px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-b-30</code> </td>
<td>Only Margin Bottom will be 30px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-t-40</code> </td>
<td>Only Margin top will be 40px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Margin Right Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.m-r-5</code> </td>
<td>Only Margin Right will be 5px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-r-10 </code> </td>
<td>Only Margin Right will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-r-15 </code> </td>
<td>Only Margin Right will be 15px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-r-20</code> </td>
<td>Only Margin Right will be 20px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-r-30</code> </td>
<td>Only Margin Right will be 30px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-r-40</code> </td>
<td>Only Margin Right will be 40px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-3">
<h3 class="box-title">Margin Left Classes</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.m-l-5</code> </td>
<td>Only Margin Left will be 5px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-l-10 </code> </td>
<td>Only Margin Left will be 10px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-l-15 </code> </td>
<td>Only Margin Left will be 15px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-l-20</code> </td>
<td>Only Margin Left will be 20px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-l-30</code> </td>
<td>Only Margin Left will be 30px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.m-l-40</code> </td>
<td>Only Margin Left will be 40px.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<div class="col-sm-12 m-t-40 m-b-40">
<hr/> </div>
<!-- .col -->
<div class="col-md-4">
<h3 class="box-title">Vertical Align</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.vt</code> </td>
<td>Element - vertical align top.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.vb</code> </td>
<td>Element - vertical align bottom.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.vertical-middle </code> </td>
<td>Element - vertical align middle.</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-4">
<h3 class="box-title">Font Weight</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.font-light</code> </td>
<td>Font weight will be light (300).</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.font-normal</code> </td>
<td>Font weight will be normal</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.font-bold </code> </td>
<td>Font weight will be bold (700)</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- .col -->
<div class="col-md-4">
<h3 class="box-title">Border</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.b-all</code> </td>
<td>Border 1px all side.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.b-none</code> </td>
<td>border none all side</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.b-t </code> </td>
<td>border top 1px </td>
</tr>
<tr>
<td class="text-nowrap">
<code>.b-b</code> </td>
<td>Border bottom 1px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.b-l</code> </td>
<td>border left 1px.</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.b-r</code> </td>
<td>border right 1px </td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<div class="col-sm-12 m-t-40 m-b-40">
<hr> </div>
<!-- /.col -->
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Portrait phones (<544px)</small>
</th>
<th>
Small devices
<small>Landscape phones (≥544px - <768px)</small>
</th>
<th>
Medium devices
<small>Tablets (≥768px - <992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥992px - <1200px)</small>
</th>
<th>
Extra large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.hidden-xs-down</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-sm-down</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-md-down</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-lg-down</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-xl-down</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-xs-up</code>
</th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-sm-up</code>
</th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-md-up</code>
</th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-lg-up</code>
</th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row">
<code>.hidden-xl-up</code>
</th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.col -->
<div class="col-sm-12 m-t-40 m-b-40">
<hr> </div>
<!-- /.col -->
<div class="col-md-4">
<h3 class="box-title">Background Colors</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.bg-primary</code> </td>
<td>For Primary background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-success</code> </td>
<td>For Success (green) background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-info</code> </td>
<td>For info (Blue) background color</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- /.col -->
<div class="col-md-4">
<h3 class="box-title"> </h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.bg-warning</code> </td>
<td>For Warning (yellow) background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-danger</code> </td>
<td>For Danger (red) background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-theme</code> </td>
<td>For Theme background color</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- /.col -->
<div class="col-md-4">
<h3 class="box-title"> </h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.bg-theme-dark</code> </td>
<td>For theme dark background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-inverse </code> </td>
<td>For inverse (dark) background color</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.bg-purple</code> </td>
<td>For Purple background color</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
<!-- /.col -->
<div class="col-md-6">
<h3 class="box-title">Image Radious</h3>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-nowrap">Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code>.rounded</code> </td>
<td>For rounded corner to image or any element</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-top </code> </td>
<td>Only top will be rounded not other</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-right</code> </td>
<td>Only right will be rounded</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-bottom</code> </td>
<td>Only bottom will be rounded not other</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-left </code> </td>
<td>Only left will be rounded not other</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-circle</code> </td>
<td>Full circle class</td>
</tr>
<tr>
<td class="text-nowrap">
<code>.rounded-0</code> </td>
<td>No radious to the element</td>
</tr>
</tbody>
</table>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>