Bootstrap 3 CSS Classes

Desk Reference
1/8

Grid
Basic grid - full width is 12 columns wide
<!-- change .container to .container-fluid
to be full width -->
<div class="container">

<!-- Columns are always 50% wide, on

mobile and desktop -->

Text & Images

.text-left Left aligned text

.text-center Center aligned text

.text-right Right aligned text
.text-justify Justified text
.text-nowrap No wrap text

.text-lowercause Lowercase text

<div class="row">

.text-uppercase Uppercase text

.lead Good for first paragraph of article

<div class="col-xs-6">.col-xs-6</div>

<div class="col-xs-6">.col-xs-6</div>

</div>

<!-- nested columns example -->

<div class="row">

<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6
<div class="row">

<div class="col-md-6">100% mobile 50%
everywhere else</div>

<div class="col-md-6">100% mobile 50%
everywhere else</div>

</div>

</div>

</div>

.text-capitalize Capitalized text

.list-unstyled Removes default list margin/

padding
.list-inline Makes list items inline

.dl-horizontal Makes list items two columns

.img-responsive Make an image responsive

.img-rounded Adds rounded corners to image

.img-circle Crops image to be circle

.img-thumbnail Adds rounded corner and

border to an image
.pull-left Floats item left

.pull-right Floats item right

.center-block Set an elemennt to block with

auto left and right margin

</div>

.clearfix Clear floats by adding this class

to the parent container

Media queries

Blockquote

/* Extra small devices (phones, less than

768px) No media query since this is the
default in Bootstrap */
/* small (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

<blockquote><p>Lorem ipsum dolor</p>

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

/* medium (desktops, 992px and up) */

Headings

@media (min-width: @screen-md-min) { ... }

<h1>h1. Bootstrap heading <small>Secondary

text</small></h1>

/* large (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

<p class="h1">Paragraph that looks like

heading</p>

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
2/8

Navbar
<!-- Fixed top navbar with brand as logo image tags -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" datatarget="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#"><img alt="Brand" src="..."></a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></

li>

<li><a href="#">Link</a></li>
<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" ariahaspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
3/8

Forms
<form>

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

</div>

<div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1"

placeholder="Password">
</div>

<div class="form-group">

<label for="exampleInputFile">File input</label>

<input type="file" id="exampleInputFile">

<p class="help-block">Example block-level help text here.</p>

</div>

<div class="checkbox">
<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Buttons
.btn Needs to be added to all buttons because it adds padding and margin
.btn-default The default button style

.btn-primary The button that has the primary action in a group

.btn-success Could be used on the last submit button in a form
.btn-info Informational button

.btn-link Removes background color and add text color

.btn-lg Large buttom

<a class="btn btn-default"

href="#" role="button">Link</a>

.btn-xs Even smaller

<button class="btn btn-primary"

type="submit">Button</button>

.btn-sm Smaller than default button

.btn-block Button that spans full width of parent

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
4/8

Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="..." alt="...">

<div class="carousel-caption">
...

</div>

</div>

<div class="item">

<img src="..." alt="...">

<div class="carousel-caption">
...

</div>

</div>
...

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" role="button" dataslide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" dataslide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

</a>

</div>

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
5/8

Jumbotron
<div class="jumbotron">

<h1>Hello, world!</h1>
<p>...</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

To make the jumbotron full width, and without rounded corners, place it outside all
.containers and instead add a .container within.
<div class="jumbotron">

<div class="container">
...

</div>

</div>

Page header
<div class="page-header">

<h1>Example page header <small>Subtext for header</small></h1>

</div>

Breadcrumbs
<ol class="breadcrumb">

<li><a href="#">Home</a></li>

<li><a href="#">Library</a></li>
<li class="active">Data</li>

</ol>

Responsive embed
<!-- 16:9 aspect ratio - change aspect ratio by replacing 16by9 with 4by3 -->
<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="..."></iframe>

</div>

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
6/8

Tables
<!-- Responsive table with all of the options applied
<div class="table-responsive">

-->

<table class="table table-condensed table-hover table-bordered table-striped">

<tr class="active">...</tr>
<tr>

<td class="info">...</td>

</tr>

</table>

</div>

Alphabetical Index of CSS Classes

.active

.btn-danger

.center-block

.affix

.btn-default

.checkbox

.alert

.btn-group

.checkbox-inline

.alert-danger

.btn-group-justified

.close

.alert-dismissible

.btn-group-vertical

.col-lg-* /*(1-12)*/

.alert-info

.btn-info

.col-lg-offset-* /*(0-12)*/

.alert-link

.btn-link

.col-lg-pull-* /*(0-12)*/

.alert-success

.btn-primary

.col-lg-push-* /*(0-12)*/

.alert-warning

.btn-sm

.col-md-* /*(1-12)*/

.arrow

.btn-success

.col-md-offset-* /*(0-12)*/

.badge

.btn-toolbar

.col-md-pull-* /*(0-12)*/

.bg-danger

.btn-warning

.col-md-push-* /*(0-12)*/

.bg-info

.btn-xs

.col-sm-* /*(1-12)*/

.bg-primary

.caption

.col-sm-offset-* /*(0-12)*/

.bg-success

.caret

.col-sm-pull-* /*(0-12)*/

.bg-warning

.carousel

.col-sm-push-* /*(0-12)*/

.bottom

.carousel-caption

.col-xs-* /*(1-12)*/

.breadcrumb

.carousel-control

.col-xs-offset-* /*(0-12)*/

.btn

.carousel-indicators

.col-xs-pull-* /*(0-12)*/

.btn-block

.carousel-inner

.col-xs-push-* /*(0-12)*/

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
7/8

.collapse

.hidden-lg

.list-group-item-danger

.collapsing

.hidden-md

.list-group-item-heading

.container

.hidden-print

.list-group-item-info

.container-fluid

.hidden-sm

.list-group-item-success

.control-label

.hidden-xs

.list-group-item-text

.divider

.hide

.list-group-item-warning

.dropdown

.icon-bar

.list-inline

.dropdown-backdrop

.icon-next

.list-unstyled

.dropdown-header

.icon-prev

.mark

.dropdown-menu

.img-circle

.media

.dropdown-menu-left

.img-rounded

.media-body

.dropdown-menu-right

.img-thumbnail

.media-heading

.dropdown-toggle

.in

.media-list

.embed-responsive

.initialism

.media-object

.embed-responsive-16by9

.input-group

.modal

.embed-responsive-4by3

.input-group-addon

.modal-backdrop

.fade

.input-group-btn

.modal-body

.form-control

.input-lg

.modal-content

.form-control-feedback

.input-sm

.modal-dialog

.form-control-static

.invisible

.modal-footer

.form-group

.item

.modal-header

.glyphicon

.jumbotron

.modal-lg

.glyphicon-chevron-left

.label

.modal-open

.glyphicon-chevron-right

.label-danger

.modal-scrollbar-measure

.h1

.label-default

.modal-sm

.h2

.label-info

.modal-title

.h3

.label-primary

.nav

.h4

.label-success

.nav-divider

.h5

.label-warning

.nav-justified

.h6

.lead

.nav-tabs

.has-feedback

.left

.nav-tabs-justified

.help-block

.list-group

.navbar

.hidden

.list-group-item

.navbar-brand

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/

Bootstrap 3 CSS Classes

Desk Reference
8/8

.navbar-btn

.popover-title

.text-success

.navbar-collapse

.pre-scrollable

.text-uppercase

.navbar-default

.prev

.text-warning

.navbar-fixed-bottom

.progress

.thumbnail

.navbar-fixed-top

.progress-bar

.tooltip

.navbar-form

.progress-bar-danger

.tooltip-arrow

.navbar-header

.progress-bar-info

.tooltip-inner

.navbar-inverse

.progress-bar-striped

.top

.navbar-left

.progress-bar-success

.visible-lg

.navbar-link

.progress-bar-warning

.visible-lg-block

.navbar-nav

.pull-left

.visible-lg-inline

.navbar-right

.pull-right

.visible-lg-inline-block

.navbar-static-top

.right

.visible-md

.navbar-text

.row

.visible-md-block

.navbar-toggle

.show

.visible-md-inline

.next

.small

.visible-md-inline-block

.page-header

.sr-only

.visible-print

.pager

.tab-pane

.visible-print-block

.pagination

.table

.visible-print-inline

.panel

.table-bordered

.visible-print-inline-block

.panel-body

.table-responsive

.visible-sm

.panel-danger

.text-capitalize

.visible-sm-block

.panel-default

.text-center

.visible-sm-inline

.panel-footer

.text-danger

.visible-sm-inline-block

.panel-group

.text-hide

.visible-xs

.panel-heading

.text-info

.visible-xs-block

.panel-info

.text-justify

.visible-xs-inline

.panel-primary

.text-left

.visible-xs-inline-block

.panel-success

.text-lowercase

.well

.panel-title

.text-muted

.well-lg

.panel-warning

.text-nowrap

.well-sm

.popover

.text-primary

.popover-content

.text-right

Free Bootstrap Video Tutorial Course

BootstrapCreative.com/bootstrap-tutorial/