This section contains information about the included BootStrap library CSS classes.


Detailed documenation can be found here:

https://getbootstrap.com/docs/3.4/css/



Rows - Grid System

Rows are in .container or .container-fluid

Columns

.col-xs-

Always

Full

.col-sm-

>768

750 wide

.col-md-

>992

970 wide

.col-lg-

>1200

1170 wide

Resets, Offsets, Pushes, Pulls

.clearfix

.col-xs-offset- (sm, md, lg)

Nest using a .row inside a col

.col-xs-push- (sm, md, lg)

.col-xs-pull- (sm, md, lg)

.visible-xs (sm, md, lg)

.hidden-xs (sm, md, lg)

.visible-print

.hidden-print

Grid Variables

@grid-columns:

12

@grid-gutter-width:

30px

@grid-float-breakpoint:

768px

Using Grid Mixin CSS

.wrapper {.make-row();}
.content-main {.make-lg-column(8);}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}

Using Grid Mixin HTML

<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>

 

Typography

.h1

.h2

.h3

.h4

.h5

.h6

.small

<small>

.lead

@font-size-base | @line-height-base

Align

.text-left

.text-right

.text-center

.text-justify

Text Helpers

.text-muted

.text-primary

.text-success

.text-info

.text-warning

.text-danger

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.text-hide

.sr-only

Lists

.list-unstyled

.list-inline

Descriptions

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

.dl-horizontal

Images

.img-responsive (max-width:100%, height:auto)

.img-rounded

.img-circle

.img-thumbnail (double border)


 

Buttons

<button type="button" class="btn btn-default">Default</button>

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

Button Classes

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link (to look like a link)

.btn-lg

.btn-sm

.btn-xs

.btn-block

.active (A tag)

.disabled (A tag)

disabled="disabled"

Labels

.label

.label-default

primary, success, info, warning, danger

<span class="label label-default">New</span>

Badge

<span class="badge">42</span>

Alerts

.alert .alert-success

success, info, warning, or danger

.alert-dismissable

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

<a href="#" class="alert-link">...</a>

Tables

.table

.table-striped

.table-bordered

.table-hover

.table-condensed

.table-responsive

Wrap .table in .table-responsive
<div class='table-responsive'>
...table
</div>

Rows or Cells

.active

.success

.info

.warning

.danger

Tags

abbr

<abbr title="attribute">attr</abbr>

address

<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>

blockquote

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</p> </blockquote>

blockquote footer

<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

blockquote right justify

.blockquote-reverse

code

<code>&lt;section&gt;</code>

kbd Keyboard Entry

<kbd>cd</kbd>

.pre-scrollable

Max Height 350px box, with y-axis scrollbar. Used with pre tag

close button

<button type="button" class="close" aria-hidden="true">&times;</button>

Caret

<span class="caret"></span>

Floats

.pull-left .pull-right

Float Mixin

.element { .pull-left(); }

Clear Floats

.clearfix

Center Block (mixin also)

.center-block (display:block, margin auto) | .center-block();

Show (mixin also)

.show | .show();

Hide (mixin also)

.hide | .hide();

Glyphicons

<span class="glyphicon glyphicon-search"></span>