Looking for a Bootstrap 4 Cheat Sheet?  Go Now

Complete List of All Bootstrap 3 CSS Classes

Click each column header to sort alphabetically.

Class NamePreviewDescriptionCategory
.affixBootstrap 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-dangerbootstrap 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-dismissiblebootstrap 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-infobootstrap 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-linkbootstrap alert linkWhen you add links inside alert this class matches the font color to the parent alert class.Alerts
.alert-successbootstrap 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-warningbootstrap 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
.activebootstrap activeTables contextual class to change row colorTables
.arrowbootstrap arrowpopover option - .arrow will become the popover's arrow.Popover
.dl-horizontalbootstrap horizontal definition listMakes terms and definitions line up with a center gutterLists
.badgebootstrap badgesUsed to show new or unread messages or items like the iOS red icon showing new messages or email.Badges
.bg-dangerbootstrap 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-infobootstrap 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-primarybootstrap 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-successbootstrap 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-warningbootstrap 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
.breadcrumbbootstrap breadcrumbsIndicate the current page's location within a navigational hierarchy.Breadcrumbs
.btnbootstrap btnThis class sets the spacing and size of the button.Buttons
.btn-blockbootstrap btn blockBy default buttons are inline this class makes it block to span the full width of its parent.Buttons
.btn-dangerbootstrap btn dangerDefaults to a red background buttonButtons
.btn-defaultbootstrap btn defaultDefaults to a white background button with dark border.Buttons
.btn-groupbootstrap btn groupSmushes multiple buttons together to make a pill shape. Each button is separated by a vertical line.Button groups
.btn-group-justifiedbootstrap 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-verticalbootstrap btn group verticalMake a set of buttons appear vertically stacked rather than horizontally.Button groups
.btn-infobootstrap btn infoButton for information on a topic like terms and conditions. Default is light blue.Buttons
.btn-linkbootstrap btn linkKeeps the spacing set with the .btn class but removes the outer border.Buttons
.btn-lgbootstrap btn lgFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-primarybootstrap btn primaryUse for the primary action in a set.Buttons
.btn-smbootstrap btn smFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-successbootstrap btn successDefaults to a green background button with dark border.Buttons
.btn-toolbarbootstrap btn toolbarUsed to create a row of buttons similar pagination rowButton groups
.btn-warningbootstrap btn warningDefaults to a yellow background button with dark border.Buttons
.btn-xsbootstrap 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
.caretbootstrap btn caretUsed in dropdown menus to show open and closed statesDropdowns
.carouselbootstrap carouselparent carousel class making it position relativeCarousel
.carousel-captionbootstrap carousel captionCaption for each slide itemCarousel
.carousel-controlbootstrap 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-innerbootstrap 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
.closebootstrap 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-responsivebootstrap responsive embed The default responsive iframe embed stylesResponsive embed
.embed-responsive-16by9bootstrap responsive embedDiv wrapper class to make child iframe responsiveResponsive embed
.embed-responsive-4by3bootstrap 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
.glyphiconbootstrap 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-circlebootstrap image circleCrops an image to be a circleImages
.img-roundedbootstrap image roundedAdds rounded corners to an imageImages
.img-thumbnailbootstrap 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
.initialismbootstrap innitialismAdd .initialism to an abbreviation for a slightly smaller font-size.Typography
.input-groupbootstrap 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-addonbootstrap input group addonThe class added to an icon or help text in an form .input-groupInput groups
.input-group-btnbootstrap 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
.jumbotronbootstrap jumbotronA content section that is used to showcase important content. Commonly used on home pages and category pages.Jumbotron
.labelbootstrap 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-groupbootstrap list groupWrapper ul class that contains li with bordersList group
.list-group-itembootstrap list group itemClass added to each li in a list-groupList group
.list-group-item-headingbootstrap list group headingClass added to an anchor or p for a .list-group-item headingList group
.list-group-item-textbootstrap 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-inlinebootstrap list inlineOverrides a lists default style to be inline and blockTypography
.list-unstyledbootstrap 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
.mediabootstrap media listMedia components are image heading and description text items. Blog comments, portfolio projects, album covers, etc.Media object
.media-bodybootstrap media bodyThe class added for the media description copy blockMedia object
.media-headingbootstrap media headingThe class applied to a heading in a media componentMedia object
.media-listbootstrap 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
.navbootstrap 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-tabsbootstrap tabsClass added to enable Bootstrap tabsTab
.navbarbootstrap navbarNavigation header classNavbar
.navbar-brandbootstrap navbar brandMost navbars contain a logo or brand. This class is added to the anchorNavbar
.navbar-btnbootstrap 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-bottombootstrap navbar fixed footerFixes the footer to the bottom of the windowNavbar
.navbar-fixed-topbootstrap navbar static topAffixes the navbar to the top of the windowNavbar
.navbar-formbootstrap 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-textbootstrap 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-headerbootstrap page headerUsed as a container for a page title and horizontal border for separation from the body content of a pagePage header
.pagerbootstrap pagerclass added to a ul which contains li's with anchors. Good for previous and next buttonsPagination
.paginationbootstrap paginationThe wrapper class that contains all of the page navigationPagination
.panelbootstrap panelBy default, all the .panel does is apply some basic border and padding to contain some content.Panels
.panel-bodybootstrap 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-footerbootstrap panel footerClass added to a panel footerPanels
.panel-groupbootstrap panel group Used to group many panels together. This removes the bottom margin below each panelPanels
.panel-headingbootstrap panel headingClass added to a panel heading areaPanels
.panel-titlebootstrap 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
.progressbootstrap progress barThe parent class wrapper of a progress barProgress bars
.progress-barbootstrap progress barThe class applied to the progress bar graphic that movesProgress bars
.progress-bar-dangerbootstrap progress dangerChanges color of progress bar to danger colorProgress bars
.progress-bar-infobootstrap progress infoChanges color of progress bar to info colorProgress bars
.progress-bar-stripedbootstrap progress bar stripedChanges progress to a striped versionProgress bars
.progress-bar-successbootstrap progress bar successChanges color of progress bar to success colorProgress bars
.progress-bar-warningbootstrap 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
.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
.tablebootstrap tableAdding this class to a HTML table applies the Bootstrap stylesTables
.table-condensedbootstrap 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
.text-capitalizebootstrap text transformCapitalize the text or title caseTypography
.text-centerbootstrap text alignmentAligns the text to the centerTypography
.text-dangerbootstrap 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-infobootstrap 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-lowercasebootstrap text transformChanges text to lowercaseTypography
.text-mutedbootstrap text mutedChanges text color to grayTypography
.text-nowrapbootstrap text alignmentPrevents the text from wrappingTypography
.text-primarybootstrap text primaryChanges text color to your primary colorTypography
.text-rightbootstrap text alignmentApplies text-align:rightTypography
.text-successbootstrap text successChanges text color to green or your "success" variable colorTypography
.text-uppercasebootstrap text transformMakes text uppercaseTypography
.text-warningbootstrap text warningChanges a text color to your default "warning" colorTypography
.thumbnailbootstrap 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
.wellbootstrap wellWells are good for insetting some content. The default styling adds a border box and inner padding.Wells
.well-lgbootstrap 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-smbootstrap well smallWells are good for insetting some content. The default styling adds a border box and inner padding. This class decreases the padding.Wells

Learn What's Missing from the Bootstrap 4 Documentation

Bootstrap 4 training course

Learn More

Bootstrap List

Download Cheat Sheet

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