Bootstrap Classes Reference

Complete List of All Bootstrap Classes

Complete list of all Bootstrap classes with description and examples:

Class Description Example Tutorial

.active Adds a grey background color to Try it Tables

the table row (<tr> or table cell (<td>)
(same color used on hover)

.active Animates a striped progress bar Try it Progress

Bars

.active Adds a blue background color to the Try it Pagination

active pagination link (to highlight the
current page)

.active Adds a blue background color to the Try it List Groups

active list item in a list group

.active Adds a blue background color to simulate a Try it Buttons

"pressed" button

.active Adds a gray background color to the active Try it Navbar

link in a default navbar. Adds a black
background and a white color to the current
link inside an inverted navbar.
Class Description Example Tutorial

.active Adds a blue background color to the Try it Dropdowns

active dropdown item in a dropdown

.affix The Affix plugin allows an element to Try it Affix

become affixed (locked/sticky) to an area on
the page. It toggles position:fixed on
and off

.alert Creates an alert message box Try it Alerts

.alert-danger Red alert box. Indicates a dangerous or Try it Alerts

potentially negative action

.alert- Together with the .close class, this class Try it Alerts
dismissible is used to close the alert

.alert-info Light-blue alert box. Indicates some Try it Alerts

information

.alert-link Used on links inside alerts to add matching Try it Alerts

colored links

.alert- Green alert box. Indicates a successful or Try it Alerts

success positive action
Class Description Example Tutorial

.alert- Yellow alert box. Indicates caution should Try it Alerts

warning be taken with this action

.badge Creates a circular badge (grey circle - often Try it Badges

used as a numerical indicator)

.bg-danger Adds a red background color to an element. Try it Helpers

Represents danger or a negative action

.bg-info Adds a light-blue background color to an Try it Helpers

element. Represents some information

.bg-primary Adds a blue background color to an element. Try it Helpers

Represents something important

.bg-success Adds a green background color to an Try it Helpers

element. Indicates success or a positive
action

.bg-warning Adds a yellow background color to an Try it Helpers

element. Represents a warning or a negative
action

.breadcrumb A pagination. Indicates the current page's Try it Pagination

location within a navigational hierarchy
Class Description Example Tutorial

.btn Creates a basic button (gray background and Try it Buttons

rounded corners)

.btn-block Creates a block level button that spans the Try it Buttons
entire width of the parent element

.btn-danger Red button. Indicates danger or a negative Try it Buttons

action

.btn-default Default button. White background and grey Try it Buttons

border

.btn-group Groups buttons together on a single line Try it Button

Groups

.btn-group- Makes a group of buttons span the entire Try it Button

justified width of the screen Groups

.btn-group-lg Large button group (makes all buttons in a Try it Button

button group larger - increased font-size and Groups
padding)

.btn-group-sm Small button group (makes all buttons in a Try it Button

button group smaller) Groups
Class Description Example Tutorial

.btn-group- Makes a button group appear vertically Try it Button

vertical stacked Groups

.btn-group-xs Extra small button group (makes all buttons Try it Button
in a button group extra small) Groups

.btn-info Light-blue button. Represents information Try it Buttons

.btn-lg Large button Try it Buttons

.btn-link Makes a button look like a link (get button Try it Buttons
behavior)

.btn-primary Blue button. Try it Buttons

.btn-sm Small button Try it Buttons

.btn-success Green button. Indicates success or a positive Try it Buttons

action

.btn-warning Yellow button. Represents warning or a Try it Buttons

negative action
Class Description Example Tutorial

.btn-xs Extra small button Try it Buttons

.caption Adds a caption text inside a .thumbnail Try it Images

.caret Creates a caret arrow icon , which indicates Try it Dropdowns

that the button is a dropdown

.carousel Creates a carousel (slideshow) Try it Carousel

.carousel- Creates a caption text for each slide in the Try it Carousel
caption carousel

.carousel- Container for next and previous links Try it Carousel

control

.carousel- Adds little dots/indicators at the bottom of Try it Carousel

indicators each slide (which indicates how many slides
there is in the carousel, and which slide the
user are currently viewing)

.carousel- Container for slide items Try it Carousel

inner
Class Description Example Tutorial

.center-block Centers any element (Sets an element Try it Helpers

to display:block with margin-
right:auto and margin-left:auto)

.checkbox Container for checkboxes Try it Inputs

.checkbox- Makes multiple checkboxes appear on the Try it Inputs

inline same line

.clearfix Clears floats Try it Helpers

.close Indicates a close icon Try it Helpers

.col-*-* Responsive grid (span 1-12 column). Extra Try it Grid

small devices Phones (< 768px), Small
devices Tablets (≥768px), Medium devices
Desktops (≥992px), Large devices Desktops
(≥1200px). Column values can be 1-12.

.col-*- Move columns to the right. These classes Try it Grid

offset-* increase the left margin of a column by *
columns

.col-*-pull-* Changes the order of the grid columns Try it Grid

Class Description Example Tutorial

.col-*-push-* Changes the order of the grid columns Try it Grid

.collapse Indicates collapsible content - which can be Try it Collapse

hidden or shown on demand

.collapse in Show the collapsible content by default Try it Collapse

.container Fixed width container with widths Try it Containers

determined by screen sites. Equal margin on
the left and right.

.container- A container that spans the full width of the Try it Containers
fluid screen

.control- Allows a label to be used for form validation Try it Forms

label

.danger Adds a red background to the table row Try it Tables

(<tr> or table cell (<td>). Indicates a
dangerous or potentially negative action

.disabled Disables a pagination link (cannot be Try it Pagination

clicked - adds a grey text color and a "no-
parking-sign" icon on hover)
Class Description Example Tutorial

.disabled Disables a button (adds opacity and a "no- Try it Buttons

parking-sign" icon on hover)

.disabled Disables a list item in a list group (cannot be Try it List Groups
clicked - adds a grey background color and a
"no-parking-sign" icon on hover)

.disabled Disables a dropdown item (adds a grey text Try it Dropdowns

color and a "no-parking-sign" icon on
hover)

.divider Used to separate links in the dropdown Try it Dropdowns

menu with a thin horizontal border

.dl- Lines up the terms <dt> and Try it Typography

horizontal descriptions <dd> in <dl>elements side-
by-side. Starts off like default <dl>s, but
when the browser window expands, it will
line up side-by-side

.dropdown Creates a toggleable menu that allows the Try it Dropdowns

user to choose one value from a predefined
list

.dropdown- Used to add headers inside the dropdown Try it Dropdowns

header menu
Class Description Example Tutorial

.dropdown- Adds the default styles for the dropdown Try it Dropdowns
menu menu container

.dropdown- Right-aligns a dropdown menu Try it Dropdowns

menu-right

.dropdown- Used on the button that should hide and Try it Dropdowns
toggle show (toggle) the dropdown menu

.dropup Indicates a dropup menu (upwards instead Try it Dropdowns

of downwards)

.embed- Container for embedded content. Makes Try it Images

responsive videos or slideshows scale properly on any
device

.embed- Container for embedded content. Creates an Try it Images

responsive- 16:9 aspect ratio embedded content
16by9

.embed- Container for embedded content. Creates an Try it Images

responsive- 4:3 aspect ratio embedded content
4by3
Class Description Example Tutorial

.embed- Used inside .embed-responsive. Try it Images

responsive- Scales the video nicely to the parent element
item

.fade Adds a fading effect when closing an alert Try it Alerts

box

.form-control Used on input, textarea, and select elements Try it Forms

to span the entire width of the page and
make them responsive

.form- Form validation class Try it Inputs 2

control-
feedback

.form- Adds plain text next to a form label within a Try it Inputs 2
control- horizontal form
static

.form-group Container for form input and label Try it Forms

.form- Aligns labels and groups of form controls in Try it Forms

horizontal a horizontal layout

.form-inline Makes a <form> left-aligned with inline- Try it Forms

block controls (This only applies to forms
Class Description Example Tutorial

within viewports that are at least 768px

wide)

.glyphicon Creates an icon. Bootstrap provides 260 free Try it Glyphicons

glyphicons from the Glyphicons Halflings
set

.h1 - .h6 Makes an element look like a heading of the Try it Typography
chosen class (h1-h6)

.has-danger Adds a red color to the label and a red Try it Forms
border to the input, as well as an error icon
inside the input (used together with .has-
feedback)

.has-feedback Adds feedback icons for inputs (checkmark, Try it Forms

warning and error signs)

.has-success Adds a green color to the label and a green Try it Forms
border to the input, as well as a checkmark
icon inside the input (used together
with .has-feedback)

.has-warning Adds a yellow/orange color to the label and Try it Forms

a yellow/orange border to the input, as well
as a checkmark icon inside the input (used
together with .has-feedback)
Class Description Example Tutorial

.help-block A block of help text that breaks onto a new Try it Input
line and may extend beyond one line. Sizing

.hidden Forces an element to be hidden Try it Helpers

(display:none)

.hidden-* Hides content depending on screen size Try it Helpers

.hidden-print Hides the element (display:none) in Helpers

print (pre)view

.hide Deprecated. Use .hidden instead Try it Helpers

.icon-bar Used in the navbar to create a hamburger Try it Navbar

menu (three horizontal bars)

.icon-next Unicode icon (arrow pointing right), used in Try it Carousel

carousels. This is often replaced with a
glyphicon

.icon-prev Unicode icon (arrow pointing left), used in Try it Carousel

carousels. This is often replaced with a
glyphicon
Class Description Example Tutorial

.img-circle Shapes an image to a circle (not supported Try it Images

in IE8 and earlier)

.img- Makes an image responsive Try it Images

responsive

.img-rounded Adds rounded corners to an image Try it Images

.img- Shapes an image to a thumbnail (borders) Try it Images

thumbnail

.in Fades in tabs Try it Tabs

.info Adds a light-blue background to the table Try it Tables

row (<tr> or table cell (<td>). Indicates a
neutral informative change or action

.initialism Displays the text inside an <abbr> element Try it Typography

in a slightly smaller font size

.input-group Container to enhance an input by adding an Try it Inputs

icon, text or a button in front or behind it as
a "help text"
Class Description Example Tutorial

.input-group- Together with the .input-group class, Try it Inputs

addon this class makes it possible to add an icon or
help text next to the input field

.input-group- Together with the .input-group class, Try it Inputs

btn this class attaches a button next to an input.
Often used as a search bar

.input-group- Large input group Try it Inputs

lg

.input-group- Small input group Try it Inputs

sm

.input-lg Large input field Try it Input

Sizing

.input-sm Small input field Try it Input

Sizing

.invisible Makes an element invisible Try it Helpers

(visibility:hidden). Note: Even
though the element is invisible, it will take
up space on the page
Class Description Example Tutorial

.item Class added to each carousel item. May be Try it Carousel

text or images

.jumbotron Creates a padded grey box with rounded Try it Jumbotron

corners that enlarges the font sizes of the
text inside it. Creates a big box for calling
extra attention to some special content or
information

.label Adds a grey rounded box to an element. Try it Labels

Provides additional information about
something (e.g. "New")

.label-danger Red label Try it Labels

.label-info Light-blue label Try it Labels

.label- Green label Try it Labels

success

.label- Yellow label Try it Labels

warning

.lead Increase the font size and line height of a Try it Typography
paragraph
Class Description Example Tutorial

.left Used to identify the left carousel control Try it Carousel

.list-group Creates a bordered list group Try it List Group

for <li> elements

.list-group- Added to each <li> element in the list Try it List Group
item group

.list-group- Red background color for a list item in a list Try it List Group
item-danger group

.list-group- Creates a list group heading (used on other Try it List Group
item-heading elements besides <li>)

.list-group- Light-blue background color for a list item Try it List Group
item-info in a list group

.list-group- Green background color for a list item in a Try it List Group
item-success list group

.list-group- Used for item text inside the list group (used Try it List Group
item-text on other elements besides <li>)
Class Description Example Tutorial

.list-group- Yellow background color for a list item in a Try it List Group
item-warning list group

.list-inline Places all list items on a single line Try it Tabs

(horizontal menu)

.list- Removes all default list-style (bullets, left Try it Typography

unstyled margin, etc.) styling from
a <ul> or <ol> list

.mark Highlights text: Highlighted text Try it Typography

.media Aligns media objects (like images or videos Try it Media

- often used for comments in a blog post etc) Objects

.media-body Text that should appear next to a media Try it Media

object Objects

.media- Creates a heading inside the media object Try it Media

heading Objects

.media-list Nested media lists Try it Media

Objects
Class Description Example Tutorial

.media-object Indicates a media object (image or video) Try it Media

Objects

.modal Identifies the content as a modal and brings Try it Modals

focus to it

.modal-body Defines the style for the body of the modal. Try it Modals
Add any HTML markup here (p, img, etc)

.modal- Styles the modal (border, background-color, Try it Modals

content etc). Inside this, add the modal's header,
body and footer, if needed

.modal-dialog Sets the proper width and margin of the Try it Modals
modal

.modal-footer The footer of the modal (often contains an Try it Modals

action button and a close button)

.modal-header The header of the modal (often contains a Try it Modals

title and a close button)

.modal-lg Large modal (wider than default) Try it Modals

Class Description Example Tutorial

.modal-open Used on the <body> element to prevent Try it Modals

page scrolling (overflow:hidden)

.modal-sm Small modal (less width) Try it Modals

.modal-title The title of the modal Try it Modals

.nav .navbar- Used on a <ul> container that contains the Try it Navbar
nav list items with links inside a navigation bar

.nav nav- Indicates a pill menu Try it Tabs

pills

.nav nav-tabs Indicates a tabbed menu Try it Tabs

.nav- Centers tabs/pills. Note that on screens Try it Tabs

justified smaller than 768px the items are stacked
(content will remain centered)

.nav-stacked Vertically stack tabs or pills Try it Tabs

.nav-tabs Creates a tabbed menu Try it Tabs

Class Description Example Tutorial

.navbar Creates a navigation bar Try it Navbar

.navbar-brand Added to a link or a header element inside Try it Navbar

the navbar to represent a logo or a header

.navbar-btn Vertically aligns a button inside a navbar Try it Navbar

.navbar- Collapses the navbar (hidden and replaced Try it Navbar

collapse with a menu/hamburger icon on mobile
phones and small tablets)

.navbar- Creates a default navigation bar (light-grey Try it Navbar

default background color)

.navbar- Makes the navbar stay at the bottom of the Try it Navbar
fixed-bottom screen (sticky/fixed)

.navbar- Makes the navbar stay at the top of the Try it Navbar
fixed-top screen (sticky/fixed)

.navbar-form Added to form elements inside the navbar to Try it Navbar

vertically center them (proper padding)
Class Description Example Tutorial

.navbar- Added to a container element that contains Try it Navbar

header the link/element that represent a logo or a
header

.navbar- Creates a black navigation bar (instead of Try it Navbar

inverse light-grey)

.navbar-left Aligns nav links, forms, buttons, or text, in Try it Navbar

the navbar to the left

.navbar-link Styles an element to look like a link inside Try it Navbar

the navbar (anchors get proper padding and
an underline on hover, while other elements
like p or span gets a default hover effect -
white color in an inversed navbar and a
black color in a default navbar)

.navbar-nav Used on a <ul> container that contains the Try it Navbar

list items with links inside a navigation bar

.navbar-right Aligns nav links, forms, buttons, or text in Try it Navbar

the navbar to the right.

.navbar- Removes left, top and right borders Try it Navbar

static-top (rounded corners) from the navbar (default
navbar has a gray border and a 4px border-
radius by default)
Class Description Example Tutorial

.navbar-text Vertical align any elements inside the Try it Navbar

navbar that are not links (ensures proper
padding)

.navbar- Styles the button that should open the Try it Navbar
toggle navbar on small screens. Often used
together with three .icon-bar classes to
indicate a toggleable menu icon
(hamburger/bars)

.next Used in the carousel control to identity the Try it Carousel

next control

.next Used to align pager buttons to the right side Try it Pager
of the page (next button)

.page-header Adds a horizontal line under the heading (+ Try it Page

adds some extra space around the element) Header

.pager Creates previous/next buttons (used Try it Pager

on <ul> elements)

.pagination Creates a pagination (Useful when you have Try it Pagination

a web site with lots of pages. Used
on <ul> elements)
Class Description Example Tutorial

.pagination- Large pagination (each pagination link gets Try it Pagination

lg a font-size of 18px. Default is 14px)

.pagination- Small pagination (each pagination link gets Try it Pagination

sm a font-size of 12px. Default is 14px)

.panel Creates a bordered box with some padding Try it Panels

around its content

.panel-body Container for content inside the panel Try it Panels

.panel- Collapsible panel (toggle between hiding Try it Collapse

collapse and showing panel(s))

.panel-danger Red panel. Indicates danger Try it Panels

.panel-footer Creates a panel footer (light background Try it Panels

color)

.panel-group Used to group many panels together. This Try it Panels

removes the bottom margin below each
panel
Class Description Example Tutorial

.panel- Creates a panel header (light background Try it Panels

heading color)

.panel-info Light-blue panel. Indicates information Try it Panels

.panel- Green panel. Indicates success Try it Panels

success

.panel-title Used inside a .panel-heading to adjust Try it Panels

the styling of the text (removes margins and
adds a font-size of 16px)

.panel- Yellow panel. Indicates warning Try it Panels

warning

.popover Popup-box that appears when the user clicks Try it Popover
on an element

.pre- Makes a <pre> element scrollable (max- Try it Helpers

scrollable height of 350px and provide a y-axis
scrollbar)

.prev Used in carousels to indicate a "previous" Try it Carousel

link
Class Description Example Tutorial

.previous Used to align pager buttons to the left side Try it Pager
of the page (previous button)

.progress Container for progress bars Try it Progress

Bars

.progress-bar Creates a progress bar Try it Progress

Bars

.progress- Red progress bar. Indicates danger Try it Progress

bar-danger Bars

.progress- Light-blue progress bar. Indicates Try it Progress

bar-info information Bars

.progress- Creates a striped progress bar Try it Progress

bar-striped Bars

.progress- Green progress bar. Indicates success Try it Progress

bar-success Bars

.progress- Yellow progress bar. Indicates warning Try it Progress

bar-warning Bars
Class Description Example Tutorial

.pull-left Float an element to the left Try it Helpers

.pull-right Float an element to the right Try it Helpers

.right Used to identify the right carousel control Try it Carousel

.row Container for responsive columns Try it Grid

.show Shows an element (display:block) Try it Helpers

.small Creates a lighter, secondary text in any Try it Typography

heading

.sr-only Hides an element on all devices except for Try it Helpers

screen readers

.sr-only- Hides an element on all devices except for Try it Helpers

focusable screen readers

.success Adds a green background color to a table Try it Tables

row (<tr> or table cell (<td>). Indicates
success or a positive action
Class Description Example Tutorial

.tab-content Used together with .tab-pane to creates Try it Tabs

toggleable/dynamic tabs/pills

.tab-pane Used together with .tab-content to Try it Tabs

creates toggleable/dynamic tabs/pills

.table Adds basic styling to a table (padding, Try it Tables

bottom borders, etc)

.table- Adds borders on all sides of the table and Try it Tables
bordered cells

.table- Makes a table more compact by cutting cell Try it Tables

condensed padding in half

.table-hover Creates a hoverable table (adds a grey Try it Tables

background color on table rows on hover)

.table- Makes a table responsive (adds a horizontal Try it Tables

responsive scrollbar when needed)

.text- Indicates capitalized text Try it Typography

capitalize
Class Description Example Tutorial

.text-center Center-aligns text Try it Typography

.text-danger Red text color. Indicates danger Try it Typography

.text-hide Hides text (helps replace an element's text Try it Typography

content with a background image)

.text-info Light-blue text color. Indicates information Try it Typography

.text-justify Indicates justified text Try it Typography

.text-left Aligns the text to the left Try it Typography

.text- Changes text to lowercase Try it Typography

lowercase

.text-muted Grey text color Try it Typography

.text-nowrap Prevents the text from wrapping Try it Typography

.text-primary Blue text color Try it Typography

Class Description Example Tutorial

.text-right Aligns text to the right Try it Typography

.text-success Green text color. Indicates success Try it Typography

.text- Makes text uppercase Try it Typography

uppercase

.text-warning Yellow/orange text color. Indicates warning Try it Typography

.thumbnail Adds a border around an element (often Try it Images

images or videos) to make it look like a
thumbnail

.tooltip Popup-box that appears when the user Try it Tooltip

moves the mouse pointer over an element

.visible-* Deprecated as of v3.2.0. Used to show Try it Helpers

and/or hide content by
device. Note: Use .hidden-* instead

.visible- Displays the element (display:block) Helpers

print-block in print (pre)view
Class Description Example Tutorial

.visible- Displays the element (display:inline) Helpers

print-inline in print (pre)view

.visible- Displays the element Helpers

print-inline- (display:inline-block) in print
block (pre)view

.warning Adds a yellow background color to the table Try it Tables

row (<tr> or table cell (<td>). Indicates a
warning

.well Adds a rounded border around an element Try it Wells

with a gray background color and some
padding

.well-lg Large well (more padding) Try it Wells

.well-sm Small well (less padding) Try it Wells