Bootstrap 3 Classes List Cheat Sheet

Bootstrap 3 All Classes List Reference Guide

Complete list of all Bootstrap classes with description, examples, and links to documentation. Looking for a Bootstrap 4 Cheat Sheet?

Click each column header to sort alphabetically.

Class Name	Description	Category
.affix	The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The sub navigation on the right is a live demo of the affix plugin.	Affix
.alert	Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin.	Alerts
.alert-danger	Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as red background color.	Alerts
.alert-dismissible	Similar to a well it is a box with a border and padding. This class and a child element with a .close class lets the user close the alert.	Alerts
.alert-info	Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as blue background color.	Alerts
.alert-link	When you add links inside alert this class matches the font color to the parent alert class.	Alerts
.alert-success	Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as green background color.	Alerts
.alert-warning	Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as yellow background color.	Alerts
.active	Tables contextual class to change row color	Tables
.arrow	popover option - .arrow will become the popover's arrow.	Popover
.dl-horizontal	Makes terms and definitions line up with a center gutter	Lists
.badge	Used to show new or unread messages or items like the iOS red icon showing new messages or email.	Badges
.bg-danger	Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.	Helper Classes
.bg-info	Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.	Helper Classes
.bg-primary	Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.	Helper Classes
.bg-success	Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.	Helper Classes
.bg-warning	Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.	Helper Classes
.breadcrumb	Indicate the current page's location within a navigational hierarchy.	Breadcrumbs
.btn	This class sets the spacing and size of the button.	Buttons
.btn-block	By default buttons are inline this class makes it block to span the full width of its parent.	Buttons
.btn-danger	Defaults to a red background button	Buttons
.btn-default	Defaults to a white background button with dark border.	Buttons
.btn-group	Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line.	Button groups
.btn-group-justified	Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.	Button groups
.btn-group-vertical	Make a set of buttons appear vertically stacked rather than horizontally.	Button groups
.btn-info	Button for information on a topic like terms and conditions. Default is light blue.	Buttons
.btn-link	Keeps the spacing set with the .btn class but removes the outer border.	Buttons
.btn-lg	Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.	Buttons
.btn-primary	Use for the primary action in a set.	Buttons
.btn-sm	Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.	Buttons
.btn-success	Defaults to a green background button with dark border.	Buttons
.btn-toolbar	Used to create a row of buttons similar pagination row	Button groups
.btn-warning	Defaults to a yellow background button with dark border.	Buttons
.btn-xs	Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.	Buttons
.caption	thumbnail caption but could be used elsewhere	Thumbnails
.caret	Used in dropdown menus to show open and closed states	Dropdowns
.carousel	parent carousel class making it position relative	Carousel
.carousel-caption	Caption for each slide item	Carousel
.carousel-control	Added to each next and previous anchors	Carousel
.carousel-indicators	parent classed added to an ordered list for the little circles showing what slide you are on	Carousel
.carousel-inner	The div wrapper that contains the carousel slide items	Carousel
.center-block	add width and height to center a block level element	Helper Classes
.checkbox	form checkbox wrapper - Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.	Forms
.checkbox-inline	Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.	Forms
.clearfix	Used to clear floats by adding .cleafix to the parent element. It adds a pseudo element with clear:both property.	Helper Classes
.close	Use the generic close icon for dismissing content like modals and alerts.	Helper Classes
.col--	span 1-12 column. Extra small devices Phones ( < 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column device Column numeric values can be 1-12.	Grid system
.col--offset-	Move columns to the right using .col-lg-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-lg-offset-4 moves .col-lg-4 over four columns. Offset numeric values can be 0-12	Grid system
.col--pull-	Easily change the order of our built-in grid columns with .col--push- and .col--pull- modifier classes. Pull numeric values can be 0-12.	Grid system
.col--push-	Easily change the order of our built-in grid columns with .col--push- and .col--pull- modifier classes. Push numeric values can be 0-12.	Grid system
.collapse	hides content on hide and show component	Collapse
.collapsing	applied during transitions on hide and show component	Collapse
.container	Fixed width container with widths determined by screen sites. Equal margin on the left and right.	Grid system
.container-fluid	Spans the full width of the screen	Grid system
.control-label	In forms this classes is added to form labels to allow the label to be used for form validation	Forms
.danger	Tables contextual class to change row color	Tables
.divider	Used to separate links in dropdown menus a	Dropdowns
.dropdown	This class gives you the ability to add a dropdown to navbar, tabs, and pills so you can display a dropdown of additional navigation.	Dropdowns
.dropdown-backdrop	On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.	Dropdown
.dropdown-header	Used to add headers inside the dropdown menu	Dropdown
.dropdown-menu	Adds the default styles for the dropdown menu container	Dropdown
.dropdown-toggle	This class is added to the button that will have the toggle action applied that will hide and show the dropdown menu	Dropdown
.dropup	Add this class to change the orientation of the dropdown menu to pop up instead of down	Dropdown
.embed-responsive	The default responsive iframe embed styles	Responsive embed
.embed-responsive-16by9	Div wrapper class to make child iframe responsive	Responsive embed
.embed-responsive-4by3	Div wrapper class to make child iframe responsive	Responsive embed
.fade	To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.	Alert
.form-control	Class added input, textarea, and select to make them 100% and responsive	Forms
.form-control-feedback	A form validation class	Forms
.form-control-static	Lets you add plain text to the right of a label. For example, Email label could have help text	Forms
.form-group	A div wrapper class that goes around a form input and label	Forms
.glyphicon	Base icon font styling for icon font	Glyphicons
.glyphicon-chevron-left	Class to add chevron icon to the right	Glyphicons
.glyphicon-chevron-right	Class to add chevron icon to the right	Glyphicons
.h1 - .h6	Apply heading styles to other elements. Make a paragraph look like an h1	Typography
.has-feedback	You can also add optional feedback icons with the addition of .has-feedback and the right icon.	Forms
.help-block	A block of help text that breaks onto a new line and may extend beyond one line.	Forms
.hidden	hides an element everywhere	Helper Classes
.hidden-*	Use a single or combination of the available classes for toggling content across viewport breakpoints. Can us lg, md, sm. xs	Responsive Utilities
.hidden-print	Similar to the regular responsive classes, use these for toggling content for print.	Responsive Utilities
.hide	this class is the same as hidden but is deprecated so use .hidden instead	Helper Classes
.icon-bar	Used in the navbar to make the cheeseburger mobile menu	Navbar
.icon-next	Glyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives.	Carousel
.icon-prev	Glyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives.	Carousel
.img-circle	Crops an image to be a circle	Images
.img-rounded	Adds rounded corners to an image	Images
.img-thumbnail	Adds rounded corners and an inset border to an image	Images
.in	To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to make the initial content visible.	Tab
.info	Tables contextual class to change row color" target="_blank" rel="nofollow" href="http://getbootstrap.com/css/#tables-contextual-classes	Tables
.initialism	Add .initialism to an abbreviation for a slightly smaller font-size.	Typography
.input-group	Wrapper class used to enhance an input and label group by adding a button in front or behind as help text	Input groups
.input-group-addon	The class added to an icon or help text in an form .input-group	Input groups
.input-group-btn	Attaches a button next to a text input. Would work for a search bar or email optin form.	Input groups
.input-lg	Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.	Forms
.input-sm	Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.	Forms
.invisible	Make something invisible	Helper Classes
.item	Class added to each carousel item	Carousel
.jumbotron	A content section that is used to showcase important content. Commonly used on home pages and category pages.	Jumbotron
.label	Applies default styling to labels "New"	Labels
.label-*	Change color of the label by adding one of the following: default, warning, info, danger, primary	Labels
.lead	Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability.	Typography
.left	Used to identify the left carousel control	Carousel
.list-group	Wrapper ul class that contains li with borders	List group
.list-group-item	Class added to each li in a list-group	List group
.list-group-item-heading	Class added to an anchor or p for a .list-group-item heading	List group
.list-group-item-text	Class added to an anchor or p for a .list-group-item text under a heading	List group
.list-group-item-*	Change color of list group item by adding one of the following: default, warning, info, danger, primary	List group
.list-inline	Overrides a lists default style to be inline and block	Typography
.list-unstyled	Removes all bullet styling from a ul or ol list	Typography
.mark	For highlighting a run of text due to its relevance in another context, use the mark tag.	Typography
.media	Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc.	Media object
.media-body	The class added for the media description copy block	Media object
.media-heading	The class applied to a heading in a media component	Media object
.media-list	Nested media lists would be good used as comments	Media object
.media-object	Class added to a media component image	Media object
.modal	The parent wrapper class of modal content	Modal
.modal-backdrop	Added by the modal javascript to make the area around the modal clickable to hide the modal	Modal
.modal-body	The modal body content class : Header - Body - Footer	Modal
.modal-content	modal-content contains modal-body, modal-header, and modal-footer	Modal
.modal-dialog	The secondary wrapper class of the entire modal content	Modal
.modal-footer	The footer of the modal that contains action buttons or help text	Modal
.modal-header	The header section of the modal that contains the title and close button	Modal
.modal-lg	Makes a modal wider	Modal
.modal-open	Javascript adds this class to the body tag to prevent scrolling with the modal is open	Modal
.modal-sm	Makes the modal not as wide	Modal
.modal-title	The title of the modal	Modal
.nav	nav base class added all types of navigation: tabs, pills, justified, disabled links	Navs
.nav-justified	Makes a tab navigation equal width and span the full width of its parent container	Navs
.nav-tabs	Class added to enable Bootstrap tabs	Tab
.navbar	Navigation header class	Navbar
.navbar-brand	Most navbars contain a logo or brand. This class is added to the anchor	Navbar
.navbar-btn	Vertically aligns a button inside a navbar	Navbar
.navbar-collapse	The content inside the navbar that will be hidden with the mobile nav toggle is enabled	Navbar
.navbar-default	The default navbar configuration styles	Navbar
.navbar-fixed-bottom	Fixes the footer to the bottom of the window	Navbar
.navbar-fixed-top	Affixes the navbar to the top of the window	Navbar
.navbar-form	Wrap form elements with this class so that they are vertically center	Navbar
.navbar-header	This class contains the brand image or text and the mobile toggle icons	Navbar
.navbar-inverse	Modify the look of the navbar by inverting the colors	Navbar
.navbar-left	Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction.	Navbar
.navbar-link	Use the .navbar-link class to add the proper colors for the default and inverse navbar options.	Navbar
.navbar-nav	The wrapper class of the navigation elements excluding the brand	Navbar
.navbar-right	Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction.	Navbar
.navbar-static-top	Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.	Navbar
.navbar-text	Wrap strings of text in an element with .navbar-text, usually on atag for proper leading and color.	Navbar
.navbar-toggle	The class the wraps the mobile toggle icon (cheeseburger icon)	Navbar
.next	Used in the carousel control to identity the next control	Carousel
.page-header	Used as a container for a page title and horizontal border for separation from the body content of a page	Page header
.pager	class added to a ul which contains li's with anchors. Good for previous and next buttons	Pagination
.pagination	The wrapper class that contains all of the page navigation	Pagination
.panel	By default, all the .panel does is apply some basic border and padding to contain some content.	Panels
.panel-body	Class added to the panel body because there is also a panel heading	Panels
.panel-*	Change the color of the panel by adding the following: default, primary, info, warning, danger	Panels
.panel-footer	Class added to a panel footer	Panels
.panel-group	Used to group many panels together. This removes the bottom margin below each panel	Panels
.panel-heading	Class added to a panel heading area	Panels
.panel-title	Inside a .panel-heading you can add a .panel-title to adjust the styling of the text	Panels
.popover	A popover is similar to a tooltip but activated on click	Popover
.popover-content	A popover is similar to a tooltip but activated on click	Popover
.popover-title	A popover is similar to a tooltip but activated on click	Popover
.pre-scrollable	You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.	Code
.prev	used in the carousel component for previous link	Carousel
.progress	The parent class wrapper of a progress bar	Progress bars
.progress-bar	The class applied to the progress bar graphic that moves	Progress bars
.progress-bar-danger	Changes color of progress bar to danger color	Progress bars
.progress-bar-info	Changes color of progress bar to info color	Progress bars
.progress-bar-striped	Changes progress to a striped version	Progress bars
.progress-bar-success	Changes color of progress bar to success color	Progress bars
.progress-bar-warning	Changes color of progress bar to warning color	Progress bars
.pull-left	Float element to the left	Helper Classes
.pull-right	Float element to the right	Helper Classes
.right	Used in the carousel	Carousel
.row	used a parent wrapper of any vertical columns	Grid system
.row-no-gutters	Remove the padding or gutters from a row and it's columns	Grid system
.show	show hidden element	Helper Classes
.small	Create lighter, secondary text in any heading with a generic tag or the .small class.	Typography
.sr-only	Hide an element to all devices except screen readers with .sr-only.	Helper Classes
.success	Tables contextual class to change row color	Tables
.tab-pane	Class added to the div that will act as a tab content area	Tab
.table	Adding this class to a HTML table applies the Bootstrap styles	Tables
.table-condensed	Removes some padding from the table cells	Tables
.table-bordered	Adds borders to a table and its cells	Tables
.table-responsive	Makes a table responsive by cropping a wide table and makes it scrollable horizontally	Tables
.table-striped	Zebra stripes the odd table rows. All odd rows are given a background color of #f9f9f9.	Tables
.text-capitalize	Capitalize the text or title case	Typography
.text-center	Aligns the text to the center	Typography
.text-danger	Changes text color to danger variable color	Typography
.text-hide	hides the text - useful for replacing text with a background image	Typography
.text-info	Changes text color to info variable color	Typography
.text-justify	Full justifys the text	Typography
.text-left	Aligns the text to the left	Typography
.text-lowercase	Changes text to lowercase	Typography
.text-muted	Changes text color to gray	Typography
.text-nowrap	Prevents the text from wrapping	Typography
.text-primary	Changes text color to your primary color	Typography
.text-right	Applies text-align:right	Typography
.text-success	Changes text color to green or your "success" variable color	Typography
.text-uppercase	Makes text uppercase	Typography
.text-warning	Changes a text color to your default "warning" color	Typography
.thumbnail	display grids of images, videos, text, and more.	Thumbnails
.tooltip	This class is used by the tooltip javascript as the wrapper of the toolitp	Tooltip
.tooltip-arrow	This is the arrow pointer on tooltips that can be positioned	Tooltip
.tooltip-inner	The wrapper class of tooltip text. This is generated by the Bootstrap javascript Some tooltip text!	Tooltip
.top	Used on popovers and tooltips to show position of arrow	Tooltip
.visible--	Use a single or combination of the available classes for toggling content across viewport breakpoints.	Responsive Utilities
.visible-print-block	Use a single or combination of the available classes for toggling content across viewport breakpoints.	Responsive Utilities
.visible-print-inline	Use a single or combination of the available classes for toggling content across viewport breakpoints.	Responsive Utilities
.visible-print-inline-block	Use a single or combination of the available classes for toggling content across viewport breakpoints.	Responsive Utilities
.warning	Tables contextual class to change row color	Tables
.well	Wells are good for insetting some content. The default styling adds a border box and inner padding.	Wells
.well-lg	Wells are good for insetting some content. The default styling adds a border box and inner padding. This class doubles the padding.	Wells
.well-sm	Wells are good for insetting some content. The default styling adds a border box and inner padding. This class decreases the padding.	Wells