4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Bootstrap 3 All CSS Classes List and Cheat Sheet PDF

The Bootstrap 3 classes list helps you find documentation for particular CSS styles, components, and grids. Use the sortable table
below to search specific classes.

Share this:

 (https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/?share=facebook&nb=1)
 (https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/?share=linkedin&nb=1)

 (https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/?share=twitter&nb=1)
 (https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/?share=pinterest&nb=1)
42

Advertise Here (/advertise/)

Bootstrap 3 Classes List with Description (https://bootstrapcreative.com/resources/bootstrap-3-

css-classes-index/) v3.4.0
Complete list of all Bootstrap classes with description, examples, and links to documentation. Looking for a Bootstrap 4 Cheat Sheet? (https://bootstrapcreative.com/resources/bootstrap-4-classes-list-reference-
cheat-sheet/)

Click each column header to sort alphabetically.

Filter results by class name

Class Name Preview Description

The affix plugin

.affix (http://getbootstrap.com/javascript/#affix) (https://bootstrapcreative.com/wp-bc/wp-content/uploads/2016/04/bootstrap-classes-list-affix.png)

Similar to a wel
.alert (http://getbootstrap.com/components/#alerts) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alerts-all.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-danger.png)Similar to a wel
.alert-danger (http://getbootstrap.com/components/#alerts)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 1/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-dismissable.png)
Similar to a wel
.alert-dismissible (http://getbootstrap.com/components/#alerts)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-info.png) Similar to a wel

.alert-info (http://getbootstrap.com/components/#alerts)

.alert-link (http://getbootstrap.com/components/#alerts) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-link.png) When you add

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-success.png)
Similar to a wel
.alert-success (http://getbootstrap.com/components/#alerts)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/alert-warning.png)
Similar to a wel
.alert-warning (http://getbootstrap.com/components/#alerts)

.active (http://getbootstrap.com/css/#tables-contextual-classes) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/active.png) Tables contextu

.arrow (http://getbootstrap.com/javascript/#popovers-options) popover option

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/arrow.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dl-horizontal.png)Makes terms an
.dl-horizontal (http://getbootstrap.com/css/#horizontal-description)

.badge (http://getbootstrap.com/components/#badges) Used to show n

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/badges.png)

.bg-danger (http://getbootstrap.com/css/#helper-classes-backgrounds) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/bg-danger.png) Similar to the c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/bg-info.png) Similar to the c

.bg-info (http://getbootstrap.com/css/#helper-classes-backgrounds)

.bg-primary (http://getbootstrap.com/css/#helper-classes-backgrounds) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/bg-primary.png) Similar to the c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/bg-success.png) Similar to the c

.bg-success (http://getbootstrap.com/css/#helper-classes-backgrounds)

.bg-warning (http://getbootstrap.com/css/#helper-classes-backgrounds) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/bg-warning.png) Similar to the c

Indicate the cur

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/breadcrumbs.png)
.breadcrumb (http://getbootstrap.com/components/#breadcrumbs)

.btn (http://getbootstrap.com/css/#buttons) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn.png) This class sets

By default butto
.btn-block (http://getbootstrap.com/css/#buttons) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-block.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 2/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.btn-danger (http://getbootstrap.com/css/#buttons) Defaults to a re

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-danger.png)

Defaults to a w
.btn-default (http://getbootstrap.com/css/#buttons)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-default.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-group.png) Smushes multip

.btn-group (http://getbootstrap.com/components/#btn-groups)

.btn-group-justified (http://getbootstrap.com/components/#btn-groups) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-group-justified.png)

Make a group o

Make a set of b
.btn-group-vertical (http://getbootstrap.com/components/#btn-groups)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-group-vertical.png)

.btn-info (http://getbootstrap.com/css/#buttons-options) Button for inform

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-info.png)

Keeps the spac

.btn-link (http://getbootstrap.com/css/#buttons-options)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-link.png)

.btn-lg (http://getbootstrap.com/css/#buttons) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-lg.png) Fancy larger or

.btn-primary (http://getbootstrap.com/css/#buttons-options) Use for the prim

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-primary.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 3/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.btn-sm (http://getbootstrap.com/css/#buttons) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-sm.png) Fancy larger or

.btn-success (http://getbootstrap.com/css/#buttons-options) Defaults to a gr

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-success.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-toolbar.png) Used to create

.btn-toolbar (http://getbootstrap.com/components/#btn-groups-toolbar)

Defaults to a ye
.btn-warning (http://getbootstrap.com/css/#buttons-options)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-warning.png)

.btn-xs (http://getbootstrap.com/css/#buttons) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/btn-xs.png) Fancy larger or

.caption (http://getbootstrap.com/components/#thumbnails-custom-content) thumbnail capti

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/caption.png)

Used in dropdo
.caret (http://getbootstrap.com/components/#dropdowns-example)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/caret.png)

.carousel (http://getbootstrap.com/javascript/#carousel) parent carouse

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel.png)

Caption for eac

.carousel-caption (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-caption.png)

Added to each
.carousel-control (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-control.png)

parent classed
.carousel-indicators (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-indicators.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 4/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

The div wrappe

.carousel-inner (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-inner.png)

.center-block (http://getbootstrap.com/css/#helper-classes-center) add width and h

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/center-block.png)

form checkbox
.checkbox (http://getbootstrap.com/css/#checkboxes-and-radios)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/checkbox.png)

Checkboxes ar
.checkbox-inline (http://getbootstrap.com/css/#checkboxes-and-radios) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/checkbox-inline.png)

Used to clear fl
.clearfix (http://getbootstrap.com/css/#helper-classes-clearfix)

.close (http://getbootstrap.com/css/#helper-classes-close) Use the generic

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/close.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/col.png) span 1-12 colum

.col-*-* (http://getbootstrap.com/css/#grid-options)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/col-offset.png) Move columns

.col-*-offset-* (http://getbootstrap.com/css/#grid-offsetting)

.col-*-pull-* (http://getbootstrap.com/css/#grid-column-ordering) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/col-push-pull.png)Easily change t

.col-*-push-* (http://getbootstrap.com/css/#grid-column-ordering) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/col-push-pull.png)Easily change t

.collapse (http://getbootstrap.com/javascript/#collapse) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/collapse.gif) hides content o

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/collapse.gif) applied during t

.collapsing (http://getbootstrap.com/javascript/#collapse)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/container.png) Fixed width con

.container (http://getbootstrap.com/css/#overview-container)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/container-fluid.png)
Spans the full w
.container-fluid

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 5/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.control-label (http://getbootstrap.com/css/#forms-help-text) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/control-label.png)In forms this cla

.danger (http://getbootstrap.com/css/#tables-contextual-classes) Tables contextu

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/danger.png)

.divider (http://getbootstrap.com/components/#dropdowns) Used to separa

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/divider.png)

.dropdown (http://getbootstrap.com/javascript/#dropdowns) This class gives

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dropdown.png)

.dropdown-backdrop On mobile devi

Used to add he
.dropdown-header (http://getbootstrap.com/javascript/#dropdowns)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dropdown-header.png)

Adds the defau

.dropdown-menu (http://getbootstrap.com/javascript/#dropdowns)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dropdown-menu.png)

This class is ad
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dropdown-toggle.png)
.dropdown-toggle (http://getbootstrap.com/javascript/#dropdowns)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/dropup2.png) Add this class t

.dropup (http://getbootstrap.com/components/#dropdowns-example)

The default res

.embed-responsive (http://getbootstrap.com/components/#responsive-embed)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/responsive-embed.png)

Div wrapper cla

.embed-responsive-16by9 (http://getbootstrap.com/components/#responsive-embed)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/responsive-embed.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 6/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

Div wrapper cla

.embed-responsive-4by3 (http://getbootstrap.com/components/#responsive-embed)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/responsive-embed.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/fade.gif) To have your al

.fade (http://getbootstrap.com/javascript/#alerts-usage)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/form-control.png)Class added in
.form-control (http://getbootstrap.com/css/#forms-example)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/form-control-feedback.png)
A form validatio
.form-control-feedback (http://getbootstrap.com/css/#forms)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/form-control-static.png)
Lets you add pl
.form-control-static (http://getbootstrap.com/css/#forms-controls-static)

A div wrapper c
.form-group (http://getbootstrap.com/css/#forms) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/form-group.png)

Base icon font

.glyphicon (http://getbootstrap.com/components/#glyphicons)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/glyphicon.png)

Class to add ch
.glyphicon-chevron-left (http://getbootstrap.com/components/#glyphicons)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/chevron-left.png)

.glyphicon-chevron-right (http://getbootstrap.com/components/#glyphicons) Class to add ch

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/chevron-right.png)

Apply heading
.h1 - .h6 (http://getbootstrap.com/css/#type)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/h1-h6.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 7/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/has-feedback.png)
You can also ad
.has-feedback (http://getbootstrap.com/css/#forms)

.help-block (http://getbootstrap.com/css/#forms) A block of help

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/help-block.png)

.hidden (http://getbootstrap.com/css/#helper-classes-show-hide) hides an eleme

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/show-hidden-invisible.png)

.hidden-* (http://getbootstrap.com/css/#responsive-utilities) Use a single or

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/hidden-visible.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/hidden-print.png)Similar to the re
.hidden-print (http://getbootstrap.com/css/#responsive-utilities)

this class is the

.hide (http://getbootstrap.com/css/#helper-classes)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/show-hidden-invisible.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/icon-bar.png) Used in the nav

.icon-bar (http://getbootstrap.com/components/#navbar)

Glyphicon icons
.icon-next (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-control.png)

Glyphicon icons
.icon-prev (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-control.png)

Crops an image
.img-circle (http://getbootstrap.com/css/#images)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/img-circle.png)

.img-rounded (http://getbootstrap.com/css/#images) Adds rounded c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/img-rounded.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 8/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

Adds rounded c
.img-thumbnail (http://getbootstrap.com/css/#images)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/img-thumbnail.png)

To make tabs fa
.in (http://getbootstrap.com/javascript/#fade-effect) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/in.gif)

.info (http://getbootstrap.com/css/#tables-contextual-classes) Tables contextu

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/info.png)

.initialism (http://getbootstrap.com/css/#type) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/initialism.png) Add .initialism t

.input-group (http://getbootstrap.com/components/#input-groups) Wrapper class

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/input-group.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/input-group-addon.png)
The class adde
.input-group-addon (http://getbootstrap.com/components/#input-groups)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/input-group-btn.png)
Attaches a butt
.input-group-btn (http://getbootstrap.com/components/#input-groups-buttons)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/input-lg.png) Set heights usin

.input-lg (http://getbootstrap.com/css/#forms)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/input-sm.png) Set heights usin

.input-sm (http://getbootstrap.com/css/#forms)

Make somethin
.invisible (http://getbootstrap.com/css/#helper-classes)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/show-hidden-invisible.png)

Class added to
.item (http://getbootstrap.com/javascript/#carousel)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/item.gif)

A content sectio
.jumbotron (http://getbootstrap.com/components/#jumbotron) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/jumbotron.png)

.label (http://getbootstrap.com/components/#labels) Applies default

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/labels.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 9/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.label-* (http://getbootstrap.com/components/#labels) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/labels-colors.png)Change color o

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/lead.png) Increase the fo

.lead (http://getbootstrap.com/css/#type)

.left (http://getbootstrap.com/javascript/#carousel) Used to identify

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/left.png)

.list-group (http://getbootstrap.com/components/#list-group) Wrapper ul clas

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-group-item.png)

Class added to
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-group-item.png)
.list-group-item (http://getbootstrap.com/components/#list-group)

.list-group-item-heading (http://getbootstrap.com/components/#list-group) Class added to

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-group-item-heading.png)

.list-group-item-text (http://getbootstrap.com/components/#list-group) Class added to

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-group-text.png)

.list-group-item-* (http://getbootstrap.com/components/#list-group) Change color o

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-group-item-color.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/list-inline.png) Overrides a list

.list-inline (http://getbootstrap.com/css/#inline)

.list-unstyled (http://getbootstrap.com/css/#unstyled) Removes all bu

(/wp-bc/wp-content/themes/wp-bootstrap/images/list-unstyled.png)

.mark (http://getbootstrap.com/css/#marked-text) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/mark.png) For highlighting

Media compone
.media (http://getbootstrap.com/components/#media) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/media-list.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/media-body.png)The class adde

.media-body (http://getbootstrap.com/components/#media)

.media-heading (http://getbootstrap.com/components/#media) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/media-heading.png)

The class appli

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/media-object.png)
Nested media l
.media-list (http://getbootstrap.com/components/#media-list)

.media-object (http://getbootstrap.com/components/#media) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/media-object.png)

Class added to

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 10/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

The parent wra

.modal (http://getbootstrap.com/javascript/#modals)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal.gif)

Added by the m
.modal-backdrop (http://getbootstrap.com/javascript/#modals)

The modal bod

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-header-body-footer.png)
.modal-body (http://getbootstrap.com/javascript/#modals)

.modal-content (http://getbootstrap.com/javascript/#modals) modal-content

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-content.png)

The secondary
.modal-dialog (http://getbootstrap.com/javascript/#modals) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-dialouge.png)

.modal-footer (http://getbootstrap.com/javascript/#modals) The footer of th

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-header-body-footer.png)

.modal-header (http://getbootstrap.com/javascript/#modals) The header sec

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-header-body-footer.png)

.modal-lg (http://getbootstrap.com/javascript/#modals) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-lg-sm.gif) Makes a modal

.modal-open (http://getbootstrap.com/javascript/#modals) Javascript adds

.modal-sm (http://getbootstrap.com/javascript/#modals) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-lg-sm.gif) Makes the mod

.modal-title (http://getbootstrap.com/javascript/#modals) The title of the

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/modal-header-body-footer.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 11/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.nav (http://getbootstrap.com/components/#nav) nav base class

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar.png)

.nav-justified (http://getbootstrap.com/components/#nav) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/nav-justified.png)Makes a tab na

.nav-tabs (http://getbootstrap.com/javascript/#tabs) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/tabs.png) Class added to

.navbar (http://getbootstrap.com/components/#navbar) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar.png) Navigation hea

.navbar-brand (http://getbootstrap.com/components/#navbar) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-brand-image.png)

Most navbars c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-buttons.png)
Vertically aligns
.navbar-btn (http://getbootstrap.com/components/#navbar)

.navbar-collapse (http://getbootstrap.com/components/#navbar) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-collapse.gif)

The content ins

The default nav

.navbar-default (http://getbootstrap.com/components/#navbar)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-default-inverse.png)

Fixes the footer

.navbar-fixed-bottom (http://getbootstrap.com/components/#navbar)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-fixed-footer.png)

Affixes the navb

.navbar-fixed-top (http://getbootstrap.com/components/#navbar)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-static-top.png)

Wrap form elem

.navbar-form (http://getbootstrap.com/components/#navbar)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-form.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 12/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.navbar-header (http://getbootstrap.com/components/#navbar) This class cont

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-header.png)

.navbar-inverse (http://getbootstrap.com/components/#navbar) Modify the look

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-default-inverse.png)

.navbar-left (http://getbootstrap.com/components/#navbar) Align nav links,

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-left-right.png)

.navbar-link (http://getbootstrap.com/components/#navbar) Use the .navba

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-link.png)

.navbar-nav (http://getbootstrap.com/components/#navbar) The wrapper cl

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-nav.png)

.navbar-right (http://getbootstrap.com/components/#navbar) Align nav links,

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-left-right.png)

.navbar-static-top (http://getbootstrap.com/components/#navbar-static-top) Create a full-wi

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-static-top.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 13/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

Wrap strings of
.navbar-text (http://getbootstrap.com/components/#navbar-text)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-text.png)

.navbar-toggle (http://getbootstrap.com/components/#navbar) The class the w

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/navbar-toggled.png)

.next (http://getbootstrap.com/javascript/#carousel) Used in the car

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-control.png)

.page-header (http://getbootstrap.com/components/#page-header) Used as a cont

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/page-header.png)

.pager (http://getbootstrap.com/components/#pagination) class added to

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/pager.png)

.pagination (http://getbootstrap.com/components/#pagination) The wrapper cl

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/pagination.png)

.panel (http://getbootstrap.com/components/#panels) By default, all th

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-group.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 14/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

Class added to
.panel-body (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-body.png)

Change the col

.panel-* (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-colors.png)

Class added to
.panel-footer (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-footer.png)

Used to group m
.panel-group (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-group.png)

Class added to
.panel-heading (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-heading.png)

Inside a .panel-
.panel-title (http://getbootstrap.com/components/#panels)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/panel-title.png)

A popover is sim
.popover (http://getbootstrap.com/javascript/#popovers)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/popover.png)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 15/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.popover-content (http://getbootstrap.com/javascript/#popovers) A popover is sim

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/popover-content.png)

.popover-title (http://getbootstrap.com/javascript/#popovers) A popover is sim

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/popover-title.png)

.pre-scrollable (http://getbootstrap.com/css/#code) You may option

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/pre-scrollable.png)

.prev (http://getbootstrap.com/javascript/#carousel) used in the caro

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/carousel-control.png)

.progress (http://getbootstrap.com/components/#progress) The parent clas

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-bar.png)

.progress-bar (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-bar.png)The class appli

.progress-bar-danger (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-danger.png)

Changes color

.progress-bar-info (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-info.png)

Changes color

.progress-bar-striped (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-bar-striped.png)

Changes progr

.progress-bar-success (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-success.png)

Changes color

.progress-bar-warning (http://getbootstrap.com/components/#progress) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/progress-warning.png)

Changes color

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 16/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.pull-left (http://getbootstrap.com/css/#helper-classes-floats) Float element t

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/pull-left-right.png)

Float element t
.pull-right (http://getbootstrap.com/css/#helper-classes-floats)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/pull-left-right.png)

.right (http://getbootstrap.com/javascript/#carousel) Used in the car

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/right.png)

.row (http://getbootstrap.com/css/#grid) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/col-push-pull.png)used a parent w

Remove the pa
.row-no-gutters (https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters)

.show (http://getbootstrap.com/css/#helper-classes) show hidden el

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/show-hidden-invisible.png)

.small (http://getbootstrap.com/css/#type) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/small.png) Create lighter, s

.sr-only (http://getbootstrap.com/css/#helper-classes) Hide an elemen

.success (http://getbootstrap.com/css/#tables-contextual-classes) Tables contextu

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/success.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/tab-pane.png) Class added to

.tab-pane (http://getbootstrap.com/javascript/#tabs)

.table (http://getbootstrap.com/css/#tables) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/table.png) Adding this clas

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/table-condensed.png)
Removes some
.table-condensed (http://getbootstrap.com/css/#tables)

.table-bordered (http://getbootstrap.com/css/#tables) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/table-bordered.png)

Adds borders to

Makes a table r
.table-responsive (http://getbootstrap.com/css/#tables) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/table-responsive.gif)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 17/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

.table-striped (https://getbootstrap.com/docs/3.3/css/#tables-striped) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/table-striped.png)Zebra stripes th

.text-capitalize (http://getbootstrap.com/css/#type) Capitalize the t

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-transform.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-alignment.png)
Aligns the text t
.text-center (http://getbootstrap.com/css/#type)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-danger.png) Changes text c

.text-danger (http://getbootstrap.com/css/#helper-classes-colors)

.text-hide (http://getbootstrap.com/css/#type) hides the text -

.text-info (http://getbootstrap.com/css/#helper-classes-colors) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-info.png) Changes text c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-alignment.png)
Full justifys the
.text-justify (http://getbootstrap.com/css/#type)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-alignment.png)
Aligns the text t
.text-left (http://getbootstrap.com/css/#type)

Changes text to
.text-lowercase (http://getbootstrap.com/css/#type) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-transform.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-muted.png) Changes text c

.text-muted (http://getbootstrap.com/css/#helper-classes-colors)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-alignment.png)
Prevents the te
.text-nowrap (http://getbootstrap.com/css/#type-alignment)

.text-primary (http://getbootstrap.com/css/#helper-classes-colors) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-primary.png)Changes text c

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-alignment.png)
Applies text-alig
.text-right (http://getbootstrap.com/css/#type)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-success.png)Changes text c
.text-success (http://getbootstrap.com/css/#helper-classes-colors)

Makes text upp

.text-uppercase (http://getbootstrap.com/css/#type) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-transform.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/text-warning.png)Changes a text
.text-warning (http://getbootstrap.com/css/#helper-classes-colors)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 18/21
4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Class Name Preview Description

display grids of
.thumbnail (http://getbootstrap.com/components/#thumbnails)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/thumbnail.png)

This class is us
.tooltip (http://getbootstrap.com/javascript/#tooltips)
(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/tooltip.png)

This is the arrow

.tooltip-arrow (http://getbootstrap.com/javascript/#tooltips) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/tooltip-arrow.png)

.tooltip-inner (http://getbootstrap.com/javascript/#tooltips) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/tooltip-inner.png)The wrapper cl

.top (http://getbootstrap.com/javascript/#tooltips) Used on popov

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/top.png)

Use a single or
.visible-*-* (http://getbootstrap.com/css/#responsive-utilities-classes) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/hidden-visible.png)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/visible-print.png) Use a single or

.visible-print-block (http://getbootstrap.com/css/#responsive-utilities-classes)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/visible-print.png) Use a single or

.visible-print-inline (http://getbootstrap.com/css/#responsive-utilities-classes)

.visible-print-inline-block (http://getbootstrap.com/css/#responsive-utilities-classes) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/visible-print.png) Use a single or

Tables contextu
.warning (http://getbootstrap.com/css/#tables-contextual-classes) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/warning.png)

.well (http://getbootstrap.com/components/#wells) (/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/well.png) Wells are good

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/well-lg.png) Wells are good

.well-lg (http://getbootstrap.com/components/#wells)

(/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap3-screens/well-sm.png) Wells are good

.well-sm (http://getbootstrap.com/components/#wells)

Bootstrap List (http://getbootstrap.com/css/#type-lists)

Bootstrap Unordered List (http://getbootstrap.com/css/#unordered)
Bootstrap Ordered List (http://getbootstrap.com/css/#ordered)
Bootstrap Unstyled List (http://getbootstrap.com/css/#unstyled)
Bootstrap Inline List (http://getbootstrap.com/css/#inline)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 19/21
 4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Bootstrap Description List (http://getbootstrap.com/css/#description)

Bootstrap Horizontal Description List (http://getbootstrap.com/css/#horizontal-description)

Looking for a Bootstrap 4 Cheat Sheet? Go Now (https://bootstrapcreative.com/resources/bootstrap-4-classes-list-reference-cheat-sheet/)

Sources: https://gist.github.com/geksilla/6543145 (https://gist.github.com/geksilla/6543145)

Finding it Hard to Remember All of the Classes?

Get the Bootstrap Reference Guide (/web-design-books/)

Advertise Here (/advertise/)

Home (https://bootstrapcreative.com/) / Free Web Design & Development Resources (https://bootstrapcreative.com/resources/) / Bootstrap 3 Classes List Reference Cheat Sheet

Books & Templates (/shop/)

Bootstrap 4 Quick Start Book (https://bootstrapcreative.com/shop/bootstrap-quick-start/)
Bootstrap Reference Guide Book (https://bootstrapcreative.com/shop/bootstrap-reference-guide-book/)
Bootstrap 4 Templates (https://bootstrapcreative.com/product-tag/bootstrap-4-templates/)
HubSpot Templates (/product-tag/hubspot-templates/)
Product Documentation & Support (https://bootstrapcreative.com/docs/)

Free Resources & Reference (/resources/)

Bootstrap 4 Cheat Sheet (https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/)
Bootstrap 3 Cheat Sheet (https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/)
Bootstrap 4 & 5 Icons Cheat Sheet (https://bootstrapcreative.com/resources/bootstrap-icons-cheat-sheet/)
Flexbox Cheat Sheet Reference (https://bootstrapcreative.com/resources/flexbox-cheat-sheet/)
CSS Cheat Sheet Reference (https://bootstrapcreative.com/resources/css-cheat-sheet-reference-pdf/)
Bootstrap Code Snippets (https://bootstrapcreative.com/pattern/)
Blog (https://bootstrapcreative.com/blog/)
Term Glossary (https://bootstrapcreative.com/resources/glossary/)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 20/21
 4/15/2020 Bootstrap 3 All Classes List Cheat Sheet Reference PDF (2020)

Services (/services/)
Freelance Bootstrap Frontend Developer (https://bootstrapcreative.com/services/bootstrap-developer/)
HubSpot CMS Page Template Design & Development Service – Detroit Michigan (https://bootstrapcreative.com/services/hubspot-landing-page-design-development/)
HubSpot Email Template Design & Development (https://bootstrapcreative.com/services/hubspot-email-template-design-development/)
Freelance HubSpot CMS Developer (https://bootstrapcreative.com/hubspot-designer/)

Contact (/contact/)
BootstrapCreative (/about/) is a Metro Detroit HubSpot CMS / Bootstrap Web Design & Development company (/) which partners with businesses to improve their digital experiences. We specialize in the
following technologies: WordPress (/services/), HubSpot CMS (/hubspot-designer/), and Bootstrap web applications (/services/bootstrap-developer/)

Sterling Heights, Michigan 48314 USA

 (586) 894-8024 (tel:1-586-894-8024) |  Email me (/contact-us/)

LinkedIn (https://www.linkedin.com/in/jacoblett/)  Facebook (https://www.facebook.com/bootstrapcreative/)  YouTube (https://www.youtube.com/channel/UCSgzUpaCziLm3OMrLTiTLfw)  

Twitter (https://twitter.com/BootstrapC)
Blog Topics (/blog/)

Bootstrap (https://bootstrapcreative.com/tag/bootstrap/)
CSS - SCSS (https://bootstrapcreative.com/tag/css/)
Google Analytics (https://bootstrapcreative.com/tag/google-analytics/)
Google Chrome (https://bootstrapcreative.com/tag/google-chrome/)
HubSpot (https://bootstrapcreative.com/tag/hubspot-templates/)
JavaScript (https://bootstrapcreative.com/tag/javascript/)
Marketing (https://bootstrapcreative.com/tag/marketing/)
Newsletter (https://bootstrapcreative.com/tag/bootstrap-creative/)
SEO (https://bootstrapcreative.com/tag/seo/)
Site Migration (https://bootstrapcreative.com/tag/site-migration/)
Web Design (https://bootstrapcreative.com/tag/responsive-web-design/)
WordPress (https://bootstrapcreative.com/tag/wordpress/)

Proudly hosted with A2 Hosting (http://www.a2hosting.com/?aid=77676c39)

© 2020 Bootstrap Creative LLC (https://maps.google.com/maps?cid=13038456665742407005&hl=en)

Privacy & Terms (https://bootstrapcreative.com/privacy-policy/)
Sitemap (https://bootstrapcreative.com/sitemap/)
BBB Profile (https://www.bbb.org/us/mi/sterling-heights/profile/seo-services/bootstrap-creative-0332-90034545)
G2 Reviews (https://www.g2.com/products/bootstrapcreative/reviews)
Bigcommerce Themes for Sale (/resources/bigcommerce-template-chooser/)

https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ 21/21