Bootstrap 3 CSS Classes Desk Reference

1/9

Grid Text & Images

.text-left Left aligned text
Basic grid - full width is 12 columns wide .text-center Center aligned text
<!-- change .container to .container-fluid .text-right Right aligned text
to be full width -->
.text-justify Justified text
<div class="container">
.text-nowrap No wrap text
<!-- Columns are always 50% wide, on
mobile and desktop --> .text-lowercause Lowercase text
<div class="row"> .text-uppercase Uppercase text
<div class="col-xs-6">.col-xs-6</div> .text-capitalize Capitalized text
<div class="col-xs-6">.col-xs-6</div> .lead Good for first paragraph of article
</div> .list-unstyled Removes default list margin/
padding
<!-- nested columns example -->
.list-inline Makes list items inline
<div class="row">
.dl-horizontal Makes list items two columns
<div class="col-xs-6">.col-xs-6</div>
.img-responsive Make an image responsive
<div class="col-xs-6">.col-xs-6
.img-rounded Adds rounded corners to image
<div class="row">
.img-circle Crops image to be circle
<div class="col-md-6">100% mobile 50%
everywhere else</div> .img-thumbnail Adds rounded corner and
border to an image
<div class="col-md-6">100% mobile 50%
everywhere else</div> .pull-left Floats item left
</div> .pull-right Floats item right
</div> .center-block Set an elemennt to block with
auto left and right margin
</div>
.clearfix Clear floats by adding this class
</div> to the parent container

Media queries Blockquote

/* Extra small devices (phones, less than
<blockquote><p>Lorem ipsum dolor</p>
768px) No media query since this is the
default in Bootstrap */ <footer>Someone famous in <cite
/* small (tablets, 768px and up) */ title="Source Title">Source Title</cite></
footer></blockquote>
@media (min-width: @screen-sm-min) { ... }
/* medium (desktops, 992px and up) */ Headings
@media (min-width: @screen-md-min) { ... } <h1>h1. Bootstrap heading <small>Secondary
/* large (large desktops, 1200px and up) */ text</small></h1>
@media (min-width: @screen-lg-min) { ... } <p class="h1">Paragraph that looks like
heading</p>

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
2/9

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" data-
target="#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" aria-
haspopup="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>

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
3/9

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 <a class="btn btn-default"
.btn-lg Large buttom href="#" role="button">Link</a>
.btn-sm Smaller than default button <button class="btn btn-primary"
.btn-xs Even smaller type="submit">Button</button>
.btn-block Button that spans full width of parent

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
4/9

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" data-
slide="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" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
5/9

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>

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
6/9

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)*/

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
7/9

.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

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Bootstrap 3 CSS Classes Desk Reference
8/9

.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

Quickly Learn Bootstrap 4

bootstrapquickstart.com
 Quickly Learn Bootstrap 4
A learn by doing approach.

Build a CMS dashboard

and homepage.
The goal of this ebook is to introduce you
to the most used components and how
to reference the official documentation.
You will build two page layouts so you can
quickly visualize how you start a new project
from scratch. Follow along step by step as
you copy and paste the necessary code to
build a homepage and CMS backend admin
area. You will become familiar with common
components, grid structure, grid nesting, and
navbar.

Build two real world examples. Follow

along step-by-step to build a web
application dashboard and homepage for a
services business.
Always up to date. Receive free book
updates for each minor version release and
a discount for major versions.
Download Sample Chapter Windows 10 PC screenshots and
instructions. Have confidence knowing the
tools and instructions will work on your
machine.

bootstrapquickstart.com