Bootstrap 3 Classes List with Description v3.4.0

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 NamePreviewDescriptionCategory
.affix Bootstrap classes list with descriptionThe 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 bootstrap alertSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin.Alerts
.alert-danger bootstrap alert dangerSimilar 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 bootstrap alert dismissableSimilar 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 bootstrap alertSimilar 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 bootstrap alert linkWhen you add links inside alert this class matches the font color to the parent alert class.Alerts
.alert-success bootstrap alert successSimilar 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 bootstrap alert warningSimilar 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 bootstrap activeTables contextual class to change row colorTables
.arrow bootstrap arrowpopover option - .arrow will become the popover's arrow.Popover
.dl-horizontal bootstrap horizontal definition listMakes terms and definitions line up with a center gutterLists
.badge bootstrap badgesUsed to show new or unread messages or items like the iOS red icon showing new messages or email.Badges
.bg-danger bootstrap bg-dangerSimilar 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 bootstrap bg-infoSimilar 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 bootstrap bg-primarySimilar 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 bootstrap bg-successSimilar 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 bootstrap bg-warningSimilar 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 bootstrap breadcrumbsIndicate the current page's location within a navigational hierarchy.Breadcrumbs
.btn bootstrap btnThis class sets the spacing and size of the button.Buttons
.btn-block bootstrap btn blockBy default buttons are inline this class makes it block to span the full width of its parent.Buttons
.btn-danger bootstrap btn dangerDefaults to a red background buttonButtons
.btn-default bootstrap btn defaultDefaults to a white background button with dark border.Buttons
.btn-group bootstrap btn groupSmushes multiple buttons together to make a pill shape. Each button is separated by a vertical line.Button groups
.btn-group-justified bootstrap btn group justifiedMake 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 bootstrap btn group verticalMake a set of buttons appear vertically stacked rather than horizontally.Button groups
.btn-info bootstrap btn infoButton for information on a topic like terms and conditions. Default is light blue.Buttons
.btn-link bootstrap btn linkKeeps the spacing set with the .btn class but removes the outer border.Buttons
.btn-lg bootstrap btn lgFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-primary bootstrap btn primaryUse for the primary action in a set.Buttons
.btn-sm bootstrap btn smFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-success bootstrap btn successDefaults to a green background button with dark border.Buttons
.btn-toolbar bootstrap btn toolbarUsed to create a row of buttons similar pagination rowButton groups
.btn-warning bootstrap btn warningDefaults to a yellow background button with dark border.Buttons
.btn-xs bootstrap btn xsFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.captionbootstrap captionthumbnail caption but could be used elsewhereThumbnails
.caret bootstrap btn caretUsed in dropdown menus to show open and closed statesDropdowns
.carousel bootstrap carouselparent carousel class making it position relativeCarousel
.carousel-caption bootstrap carousel captionCaption for each slide itemCarousel
.carousel-control bootstrap controlAdded to each next and previous anchorsCarousel
.carousel-indicatorsbootstrap carousel indicatorsparent classed added to an ordered list for the little circles showing what slide you are onCarousel
.carousel-inner bootstrap carousel innerThe div wrapper that contains the carousel slide itemsCarousel
.center-blockbootstrap center blockadd width and height to center a block level elementHelper Classes
.checkboxbootstrap checkboxform checkbox wrapper - Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.Forms
.checkbox-inlinebootstrap checkbox inlineCheckboxes 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 bootstrap btn closeUse the generic close icon for dismissing content like modals and alerts.Helper Classes
.col-*-*bootstrap colspan 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-*bootstrap col offsetMove 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-12Grid system
.col-*-pull-*bootstrap pullEasily 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-*bootstrap pushEasily 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
.collapsebootstrap collapsehides content on hide and show componentCollapse
.collapsingbootstrap collapsingapplied during transitions on hide and show componentCollapse
.containerbootstrap containerFixed width container with widths determined by screen sites. Equal margin on the left and right.Grid system
.container-fluidbootstrap container fluidSpans the full width of the screenGrid system
.control-labelbootstrap control labelIn forms this classes is added to form labels to allow the label to be used for form validationForms
.dangerbootstrap dangerTables contextual class to change row colorTables
.dividerbootstrap dividerUsed to separate links in dropdown menus aDropdowns
.dropdownbootstrap dropdownThis 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-backdropBootstrap classes list with description 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-headerbootstrap dropdown header Used to add headers inside the dropdown menuDropdown
.dropdown-menubootstrap dropdown menu Adds the default styles for the dropdown menu containerDropdown
.dropdown-toggle bootstrap dropdown toggleThis class is added to the button that will have the toggle action applied that will hide and show the dropdown menuDropdown
.dropupbootstrap dropdown toggleAdd this class to change the orientation of the dropdown menu to pop up instead of downDropdown
.embed-responsive bootstrap responsive embed The default responsive iframe embed stylesResponsive embed
.embed-responsive-16by9 bootstrap responsive embedDiv wrapper class to make child iframe responsiveResponsive embed
.embed-responsive-4by3 bootstrap responsive embedDiv wrapper class to make child iframe responsiveResponsive embed
.fadebootstrap fadeTo have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.Alert
.form-controlbootstrap form controlClass added input, textarea, and select to make them 100% and responsiveForms
.form-control-feedbackbootstrap form control feedbackA form validation classForms
.form-control-staticbootstrap form control staticLets you add plain text to the right of a label. For example, Email label could have help textForms
.form-groupbootstrap form groupA div wrapper class that goes around a form input and labelForms
.glyphicon bootstrap glyphiconBase icon font styling for icon fontGlyphicons
.glyphicon-chevron-leftbootstrap chevron leftClass to add chevron icon to the rightGlyphicons
.glyphicon-chevron-rightbootstrap chevron rightClass to add chevron icon to the rightGlyphicons
.h1 - .h6bootstrap h1-h6Apply heading styles to other elements. Make a paragraph look like an h1Typography
.has-feedbackbootstrap has feedbackYou can also add optional feedback icons with the addition of .has-feedback and the right icon.Forms
.help-blockbootstrap help-blockA block of help text that breaks onto a new line and may extend beyond one line.Forms
.hiddenbootstrap hiddenhides an element everywhereHelper Classes
.hidden-*bootstrap hidden visibleUse a single or combination of the available classes for toggling content across viewport breakpoints. Can us lg, md, sm. xsResponsive Utilities
.hidden-printbootstrap hidden printSimilar to the regular responsive classes, use these for toggling content for print.Responsive Utilities
.hidebootstrap hiddenthis class is the same as hidden but is deprecated so use .hidden insteadHelper Classes
.icon-barbootstrap icon barUsed in the navbar to make the cheeseburger mobile menuNavbar
.icon-nextbootstrap nextGlyphicon 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-prevbootstrap nextGlyphicon 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 bootstrap image circleCrops an image to be a circleImages
.img-rounded bootstrap image roundedAdds rounded corners to an imageImages
.img-thumbnail bootstrap image thumbnailAdds rounded corners and an inset border to an imageImages
.inbootstrap inTo 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
.infobootstrap infoTables contextual class to change row color" target="_blank" href="http://getbootstrap.com/css/#tables-contextual-classesTables
.initialism bootstrap innitialismAdd .initialism to an abbreviation for a slightly smaller font-size.Typography
.input-group bootstrap input groupWrapper class used to enhance an input and label group by adding a button in front or behind as help textInput groups
.input-group-addon bootstrap input group addonThe class added to an icon or help text in an form .input-groupInput groups
.input-group-btn bootstrap input group btnAttaches a button next to a text input. Would work for a search bar or email optin form.Input groups
.input-lgbootstrap Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.Forms
.input-smbootstrap Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.Forms
.invisiblebootstrap Make something invisibleHelper Classes
.itembootstrap Class added to each carousel itemCarousel
.jumbotron bootstrap jumbotronA content section that is used to showcase important content. Commonly used on home pages and category pages.Jumbotron
.label bootstrap alertApplies default styling to labels "New"Labels
.label-* bootstrap labelsChange color of the label by adding one of the following: default, warning, info, danger, primaryLabels
.leadbootstrap Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability.Typography
.leftbootstrap Used to identify the left carousel controlCarousel
.list-group bootstrap list groupWrapper ul class that contains li with bordersList group
.list-group-item bootstrap list group itemClass added to each li in a list-groupList group
.list-group-item-heading bootstrap list group headingClass added to an anchor or p for a .list-group-item headingList group
.list-group-item-text bootstrap list group textClass added to an anchor or p for a .list-group-item text under a headingList group
.list-group-item-* bootstrap list group colorChange color of list group item by adding one of the following: default, warning, info, danger, primaryList group
.list-inline bootstrap list inlineOverrides a lists default style to be inline and blockTypography
.list-unstyled bootstrap list unstyledRemoves all bullet styling from a ul or ol listTypography
.markbootstrap For highlighting a run of text due to its relevance in another context, use the mark tag.Typography
.media bootstrap media listMedia components are image heading and description text items. Blog comments, portfolio projects, album covers, etc.Media object
.media-body bootstrap media bodyThe class added for the media description copy blockMedia object
.media-heading bootstrap media headingThe class applied to a heading in a media componentMedia object
.media-list bootstrap media objectNested media lists would be good used as commentsMedia object
.media-objectbootstrap Class added to a media component imageMedia object
.modalbootstrap The parent wrapper class of modal contentModal
.modal-backdropBootstrap classes list with descriptionAdded by the modal javascript to make the area around the modal clickable to hide the modalModal
.modal-bodybootstrap The modal body content class : Header - Body - FooterModal
.modal-contentbootstrap modal-content contains modal-body, modal-header, and modal-footerModal
.modal-dialogbootstrap dialogThe secondary wrapper class of the entire modal contentModal
.modal-footerbootstrap The footer of the modal that contains action buttons or help textModal
.modal-headerbootstrap The header section of the modal that contains the title and close buttonModal
.modal-lgbootstrap modal largeMakes a modal widerModal
.modal-openBootstrap classes list with descriptionJavascript adds this class to the body tag to prevent scrolling with the modal is openModal
.modal-smbootstrap modal smallMakes the modal not as wideModal
.modal-titlebootstrap The title of the modalModal
.nav bootstrap navnav base class added all types of navigation: tabs, pills, justified, disabled linksNavs
.nav-justifiedbootstrap Makes a tab navigation equal width and span the full width of its parent containerNavs
.nav-tabs bootstrap tabsClass added to enable Bootstrap tabsTab
.navbar bootstrap navbarNavigation header classNavbar
.navbar-brand bootstrap navbar brandMost navbars contain a logo or brand. This class is added to the anchorNavbar
.navbar-btn bootstrap navbar buttonsVertically aligns a button inside a navbarNavbar
.navbar-collapsebootstrap The content inside the navbar that will be hidden with the mobile nav toggle is enabledNavbar
.navbar-defaultbootstrap The default navbar configuration stylesNavbar
.navbar-fixed-bottom bootstrap navbar fixed footerFixes the footer to the bottom of the windowNavbar
.navbar-fixed-top bootstrap navbar static topAffixes the navbar to the top of the windowNavbar
.navbar-form bootstrap navbar formWrap form elements with this class so that they are vertically centerNavbar
.navbar-headerbootstrap This class contains the brand image or text and the mobile toggle iconsNavbar
.navbar-inversebootstrap Modify the look of the navbar by inverting the colorsNavbar
.navbar-leftbootstrap leftAlign 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-linkbootstrap navbar linkUse the .navbar-link class to add the proper colors for the default and inverse navbar options.Navbar
.navbar-navbootstrap navbar navThe wrapper class of the navigation elements excluding the brandNavbar
.navbar-rightbootstrap rightAlign 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-topbootstrap static topCreate 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 bootstrap navbar textWrap strings of text in an element with .navbar-text, usually on atag for proper leading and color.Navbar
.navbar-togglebootstrap The class the wraps the mobile toggle icon (cheeseburger icon)Navbar
.nextbootstrap Used in the carousel control to identity the next controlCarousel
.page-header bootstrap page headerUsed as a container for a page title and horizontal border for separation from the body content of a pagePage header
.pager bootstrap pagerclass added to a ul which contains li's with anchors. Good for previous and next buttonsPagination
.pagination bootstrap paginationThe wrapper class that contains all of the page navigationPagination
.panel bootstrap panelBy default, all the .panel does is apply some basic border and padding to contain some content.Panels
.panel-body bootstrap panelClass added to the panel body because there is also a panel headingPanels
.panel-* bootstrap panel colorsChange the color of the panel by adding the following: default, primary, info, warning, dangerPanels
.panel-footer bootstrap panel footerClass added to a panel footerPanels
.panel-group bootstrap panel group Used to group many panels together. This removes the bottom margin below each panelPanels
.panel-heading bootstrap panel headingClass added to a panel heading areaPanels
.panel-title bootstrap panel titleInside a .panel-heading you can add a .panel-title to adjust the styling of the textPanels
.popoverbootstrap A popover is similar to a tooltip but activated on clickPopover
.popover-contentbootstrap A popover is similar to a tooltip but activated on clickPopover
.popover-titlebootstrap A popover is similar to a tooltip but activated on clickPopover
.pre-scrollablebootstrap You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.Code
.prevbootstrap used in the carousel component for previous linkCarousel
.progress bootstrap progress barThe parent class wrapper of a progress barProgress bars
.progress-bar bootstrap progress barThe class applied to the progress bar graphic that movesProgress bars
.progress-bar-danger bootstrap progress dangerChanges color of progress bar to danger colorProgress bars
.progress-bar-info bootstrap progress infoChanges color of progress bar to info colorProgress bars
.progress-bar-striped bootstrap progress bar stripedChanges progress to a striped versionProgress bars
.progress-bar-success bootstrap progress bar successChanges color of progress bar to success colorProgress bars
.progress-bar-warning bootstrap progress bar warningChanges color of progress bar to warning colorProgress bars
.pull-leftbootstrap Float element to the leftHelper Classes
.pull-rightbootstrap Float element to the rightHelper Classes
.rightbootstrap Used in the carouselCarousel
.rowbootstrap rowused a parent wrapper of any vertical columnsGrid system
.row-no-guttersRemove the padding or gutters from a row and it's columnsGrid system
.showbootstrap showshow hidden elementHelper Classes
.smallbootstrap smallCreate lighter, secondary text in any heading with a generic tag or the .small class. Typography
.sr-onlyBootstrap classes list with descriptionHide an element to all devices except screen readers with .sr-only.Helper Classes
.successbootstrap successTables contextual class to change row colorTables
.tab-panebootstrap tab-paneClass added to the div that will act as a tab content areaTab
.table bootstrap tableAdding this class to a HTML table applies the Bootstrap stylesTables
.table-condensed bootstrap table condensedRemoves some padding from the table cellsTables
.table-borderedbootstrap Adds borders to a table and its cellsTables
.table-responsivebootstrap Makes a table responsive by cropping a wide table and makes it scrollable horizontallyTables
.table-stripedtable-stripedZebra stripes the odd table rows. All odd rows are given a background color of #f9f9f9.Tables
.text-capitalize bootstrap text transformCapitalize the text or title caseTypography
.text-centerbootstrap text alignmentAligns the text to the centerTypography
.text-danger bootstrap text dangerChanges text color to danger variable colorTypography
.text-hideBootstrap classes list with descriptionhides the text - useful for replacing text with a background imageTypography
.text-info bootstrap text infoChanges text color to info variable colorTypography
.text-justifybootstrap text alignmentFull justifys the textTypography
.text-leftbootstrap text alignmentAligns the text to the leftTypography
.text-lowercase bootstrap text transformChanges text to lowercaseTypography
.text-muted bootstrap text mutedChanges text color to grayTypography
.text-nowrapbootstrap text alignmentPrevents the text from wrappingTypography
.text-primary bootstrap text primaryChanges text color to your primary colorTypography
.text-rightbootstrap text alignmentApplies text-align:rightTypography
.text-success bootstrap text successChanges text color to green or your "success" variable colorTypography
.text-uppercase bootstrap text transformMakes text uppercaseTypography
.text-warning bootstrap text warningChanges a text color to your default "warning" colorTypography
.thumbnail bootstrap thumbnaildisplay grids of images, videos, text, and more.Thumbnails
.tooltip bootstrap This class is used by the tooltip javascript as the wrapper of the toolitpTooltip
.tooltip-arrow bootstrap This is the arrow pointer on tooltips that can be positionedTooltip
.tooltip-inner bootstrap The wrapper class of tooltip text. This is generated by the Bootstrap javascript
Some tooltip text!
Tooltip
.top bootstrap Used on popovers and tooltips to show position of arrowTooltip
.visible-*-* bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Responsive Utilities
.visible-print-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Responsive Utilities
.visible-print-inline bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Responsive Utilities
.visible-print-inline-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Responsive Utilities
.warning bootstrap Tables contextual class to change row colorTables
.well bootstrap wellWells are good for insetting some content. The default styling adds a border box and inner padding.Wells
.well-lg bootstrap well largeWells are good for insetting some content. The default styling adds a border box and inner padding. This class doubles the padding.Wells
.well-sm bootstrap well smallWells are good for insetting some content. The default styling adds a border box and inner padding. This class decreases the padding.Wells

Bootstrap List

Looking for a Bootstrap 4 Cheat Sheet?  Go Now
Sources: https://gist.github.com/geksilla/6543145

Finding it Hard to Remember All of the Classes?

bootstrap 4 cheat sheet pdf Get the Bootstrap Reference Guide