Bootstrap Classes Reference

Complete List of All Bootstrap Classes

Complete list of all Bootstrap classes with description and examples:

Class	Description	Example	Category
`.active`	Adds a grey background color to the table row (`<tr>` or table cell (`<td>`) (same color used on hover)	Try it	Tables
`.active`	Adds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar.	Try it	Navbar
`.active`	Adds a blue background color to the active list item in a list group	Try it	List Groups
`.active`	Adds a blue background color to simulate a "pressed" button	Try it	Buttons
`.active`	Animates a striped progress bar	Try it	Progress Bars
`.active`	Adds a blue background color to the active dropdown item in a dropdown	Try it	Dropdowns
`.active`	Adds a blue background color to the active pagination link (to highlight the current page)	Try it	Pagination
`.affix`	The Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles `position:fixed` on and off	Try it	Affix
`.alert`	Creates an alert message box	Try it	Alerts
`.alert-danger`	Red alert box. Indicates a dangerous or potentially negative action	Try it	Alerts
`.alert-dismissible`	Together with the `.close` class, this class is used to close the alert	Try it	Alerts
`.alert-info`	Light-blue alert box. Indicates some information	Try it	Alerts
`.alert-link`	Used on links inside alerts to add matching colored links	Try it	Alerts
`.alert-success`	Green alert box. Indicates a successful or positive action	Try it	Alerts
`.alert-warning`	Yellow alert box. Indicates caution should be taken with this action	Try it	Alerts
`.badge`	Creates a circular badge (grey circle - often used as a numerical indicator)	Try it	Badges
`.bg-danger`	Adds a red background color to an element. Represents danger or a negative action	Try it	Helpers
`.bg-info`	Adds a light-blue background color to an element. Represents some information	Try it	Helpers
`.bg-primary`	Adds a blue background color to an element. Represents something important	Try it	Helpers
`.bg-success`	Adds a green background color to an element. Indicates success or a positive action	Try it	Helpers
`.bg-warning`	Adds a yellow background color to an element. Represents a warning or a negative action	Try it	Helpers
`.breadcrumb`	A pagination. Indicates the current page's location within a navigational hierarchy	Try it	Pagination
`.btn`	Creates a basic button (gray background and rounded corners)	Try it	Buttons
`.btn-block`	Creates a block level button that spans the entire width of the parent element	Try it	Buttons
`.btn-danger`	Red button. Indicates danger or a negative action	Try it	Buttons
`.btn-default`	Default button. White background and grey border	Try it	Buttons
`.btn-group`	Groups buttons together on a single line	Try it	Button Groups
`.btn-group-justified`	Makes a group of buttons span the entire width of the screen	Try it	Button Groups
`.btn-group-lg`	Large button group (makes all buttons in a button group larger - increased font-size and padding)	Try it	Button Groups
`.btn-group-sm`	Small button group (makes all buttons in a button group smaller)	Try it	Button Groups
`.btn-group-xs`	Extra small button group (makes all buttons in a button group extra small)	Try it	Button Groups
`.btn-group-vertical`	Makes a button group appear vertically stacked	Try it	Button Groups
`.btn-info`	Light-blue button. Represents information	Try it	Buttons
`.btn-link`	Makes a button look like a link (get button behavior)	Try it	Buttons
`.btn-lg`	Large button	Try it	Buttons
`.btn-primary`	Blue button.	Try it	Buttons
`.btn-sm`	Small button	Try it	Buttons
`.btn-success`	Green button. Indicates success or a positive action	Try it	Buttons
`.btn-warning`	Yellow button. Represents warning or a negative action	Try it	Buttons
`.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 that the button is a dropdown	Try it	Dropdowns
`.carousel`	Creates a carousel (slideshow)	Try it	Carousel
`.carousel-caption`	Creates a caption text for each slide in the carousel	Try it	Carousel
`.carousel-control`	Container for next and previous links	Try it	Carousel
`.carousel-indicators`	Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing)	Try it	Carousel
`.carousel-inner`	Container for slide items	Try it	Carousel
`.center-block`	Centers any element (Sets an element to `display:block` with `margin-right:auto` and `margin-left:auto`)	Try it	Helpers
`.checkbox`	Container for checkboxes	Try it	Inputs
`.checkbox-inline`	Makes multiple checkboxes appear on the same line	Try it	Inputs
`.clearfix`	Clears floats	Try it	Helpers
`.close`	Indicates a close icon	Try it	Helpers
`.col--`	Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12.	Try it	Grid
`.col--offset-`	Move columns to the right. These classes increase the left margin of a column by * columns	Try it	Grid
`.col--pull-`	Changes the order of the grid columns	Try it	Grid
`.col--push-`	Changes the order of the grid columns	Try it	Grid
`.collapse`	Indicates collapsible content - which can be hidden or shown on demand	Try it	Collapse
`.collapse in`	Show the collapsible content by default	Try it	Collapse
`.container`	Fixed width container with widths determined by screen sites. Equal margin on the left and right.	Try it	Containers
`.container-fluid`	A container that spans the full width of the screen	Try it	Containers
`.control-label`	Allows a label to be used for form validation	Try it	Forms
`.danger`	Adds a red background to the table row (`<tr>` or table cell (`<td>`). Indicates a dangerous or potentially negative action	Try it	Tables
`.disabled`	Disables a button (adds opacity and a "no-parking-sign" icon on hover)	Try it	Buttons
`.disabled`	Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover)	Try it	Dropdowns
`.disabled`	Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover)	Try it	Pagination
`.disabled`	Disables a list item in a list group (cannot be clicked - adds a grey background color and a "no-parking-sign" icon on hover)	Try it	List Groups
`.divider`	Used to separate links in the dropdown menu with a thin horizontal border	Try it	Dropdowns
`.dl-horizontal`	Lines up the terms `<dt>` and 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	Try it	Typography
`.dropdown`	Creates a toggleable menu that allows the user to choose one value from a predefined list	Try it	Dropdowns
`.dropdown-header`	Used to add headers inside the dropdown menu	Try it	Dropdowns
`.dropdown-menu`	Adds the default styles for the dropdown menu container	Try it	Dropdowns
`.dropdown-menu-right`	Right-aligns a dropdown menu	Try it	Dropdowns
`.dropdown-toggle`	Used on the button that should hide and show (toggle) the dropdown menu	Try it	Dropdowns
`.dropup`	Indicates a dropup menu (upwards instead of downwards)	Try it	Dropdowns
`.embed-responsive`	Container for embedded content. Makes videos or slideshows scale properly on any device	Try it	Images
`.embed-responsive-16by9`	Container for embedded content. Creates an 16:9 aspect ratio embedded content	Try it	Images
`.embed-responsive-4by3`	Container for embedded content. Creates an 4:3 aspect ratio embedded content	Try it	Images
`.embed-responsive-item`	Used inside `.embed-responsive`. Scales the video nicely to the parent element	Try it	Images
`.fade`	Adds a fading effect when closing an alert box	Try it	Alerts
`.form-control`	Used on input, textarea, and select elements to span the entire width of the page and make them responsive	Try it	Forms
`.form-control-feedback`	Form validation class	Try it	Inputs 2
`.form-control-static`	Adds plain text next to a form label within a horizontal form	Try it	Inputs 2
`.form-group`	Container for form input and label	Try it	Forms
`.form-inline`	Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide)	Try it	Forms
`.form-horizontal`	Aligns labels and groups of form controls in a horizontal layout	Try it	Forms
`.glyphicon`	Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set	Try it	Glyphicons
`.has-danger`	Adds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with `.has-feedback`)	Try it	Forms
`.has-feedback`	Adds feedback icons for inputs (checkmark, warning and error signs)	Try it	Forms
`.has-success`	Adds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with `.has-feedback`)	Try it	Forms
`.has-warning`	Adds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with `.has-feedback`)	Try it	Forms
`.help-block`	A block of help text that breaks onto a new line and may extend beyond one line.	Try it	Input Sizing
`.hidden`	Forces an element to be hidden (`display:none`)	Try it	Helpers
`.hidden-*`	Hides content depending on screen size	Try it	Helpers
`.hide`	Deprecated. Use `.hidden` instead	Try it	Helpers
`.h1 - .h6`	Makes an element look like a heading of the chosen class (h1-h6)	Try it	Typography
`.icon-bar`	Used in the navbar to create a hamburger menu (three horizontal bars)	Try it	Navbar
`.icon-next`	Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon	Try it	Carousel
`.icon-prev`	Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon	Try it	Carousel
`.img-circle`	Shapes an image to a circle (not supported in IE8 and earlier)	Try it	Images
`.img-responsive`	Makes an image responsive	Try it	Images
`.img-rounded`	Adds rounded corners to an image	Try it	Images
`.img-thumbnail`	Shapes an image to a thumbnail (borders)	Try it	Images
`.in`	Fades in tabs	Try it	Tabs
`.info`	Adds a light-blue background to the table row (`<tr>` or table cell (`<td>`). Indicates a neutral informative change or action	Try it	Tables
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size	Try it	Typography
`.input-group`	Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text"	Try it	Inputs
`.input-group-lg`	Large input group	Try it	Inputs
`.input-group-sm`	Small input group	Try it	Inputs
`.input-group-addon`	Together with the `.input-group` class, this class makes it possible to add an icon or help text next to the input field	Try it	Inputs
`.input-group-btn`	Together with the `.input-group` class, this class attaches a button next to an input. Often used as a search bar	Try it	Inputs
`.input-lg`	Large input field	Try it	Input Sizing
`.input-sm`	Small input field	Try it	Input Sizing
`.invisible`	Makes an element invisible (`visibility:hidden`). Note: Even though the element is invisible, it will take up space on the page	Try it	Helpers
`.item`	Class added to each carousel item. May be text or images	Try it	Carousel
`.jumbotron`	Creates a padded grey box with rounded 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	Try it	Jumbotron
`.label`	Adds a grey rounded box to an element. Provides additional information about something (e.g. "New")	Try it	Labels
`.label-danger`	Red label	Try it	Labels
`.label-info`	Light-blue label	Try it	Labels
`.label-success`	Green label	Try it	Labels
`.label-warning`	Yellow label	Try it	Labels
`.lead`	Increase the font size and line height of a paragraph	Try it	Typography
`.left`	Used to identify the left carousel control	Try it	Carousel
`.list-group`	Creates a bordered list group for `<li>` elements	Try it	List Group
`.list-group-item`	Added to each `<li>` element in the list group	Try it	List Group
`.list-group-item-heading`	Creates a list group heading (used on other elements besides `<li>`)	Try it	List Group
`.list-group-item-text`	Used for item text inside the list group (used on other elements besides `<li>`)	Try it	List Group
`.list-group-item-danger`	Red background color for a list item in a list group	Try it	List Group
`.list-group-item-info`	Light-blue background color for a list item in a list group	Try it	List Group
`.list-group-item-success`	Green background color for a list item in a list group	Try it	List Group
`.list-group-item-warning`	Yellow background color for a list item in a list group	Try it	List Group
`.list-inline`	Places all list items on a single line (horizontal menu)	Try it	Tabs
`.list-unstyled`	Removes all default list-style (bullets, left margin, etc.) styling from a `<ul>` or `<ol>` list	Try it	Typography
`.mark`	Highlights text: Highlighted text	Try it	Typography
`.media`	Aligns media objects (like images or videos - often used for comments in a blog post etc)	Try it	Media Objects
`.media-body`	Text that should appear next to a media object	Try it	Media Objects
`.media-heading`	Creates a heading inside the media object	Try it	Media Objects
`.media-list`	Nested media lists	Try it	Media Objects
`.media-object`	Indicates a media object (image or video)	Try it	Media Objects
`.modal`	Identifies the content as a modal and brings focus to it	Try it	Modals
`.modal-body`	Defines the style for the body of the modal. Add any HTML markup here (p, img, etc)	Try it	Modals
`.modal-content`	Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed	Try it	Modals
`.modal-dialog`	Sets the proper width and margin of the modal	Try it	Modals
`.modal-footer`	The footer of the modal (often contains an action button and a close button)	Try it	Modals
`.modal-header`	The header of the modal (often contains a title and a close button)	Try it	Modals
`.modal-lg`	Large modal (wider than default)	Try it	Modals
`.modal-open`	Used on the `<body>` element to prevent page scrolling (`overflow:hidden`)	Try it	Modals
`.modal-sm`	Small modal (less width)	Try it	Modals
`.modal-title`	The title of the modal	Try it	Modals
`.nav nav-tabs`	Indicates a tabbed menu	Try it	Tabs
`.nav nav-pills`	Indicates a pill menu	Try it	Tabs
`.nav .navbar-nav`	Used on a `<ul>` container that contains the list items with links inside a navigation bar	Try it	Navbar
`.nav-justified`	Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered)	Try it	Tabs
`.nav-stacked`	Vertically stack tabs or pills	Try it	Tabs
`.nav-tabs`	Creates a tabbed menu	Try it	Tabs
`.navbar`	Creates a navigation bar	Try it	Navbar
`.navbar-brand`	Added to a link or a header element inside the navbar to represent a logo or a header	Try it	Navbar
`.navbar-btn`	Vertically aligns a button inside a navbar	Try it	Navbar
`.navbar-collapse`	Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)	Try it	Navbar
`.navbar-default`	Creates a default navigation bar (light-grey background color)	Try it	Navbar
`.navbar-fixed-bottom`	Makes the navbar stay at the bottom of the screen (sticky/fixed)	Try it	Navbar
`.navbar-fixed-top`	Makes the navbar stay at the top of the screen (sticky/fixed)	Try it	Navbar
`.navbar-form`	Added to form elements inside the navbar to vertically center them (proper padding)	Try it	Navbar
`.navbar-header`	Added to a container element that contains the link/element that represent a logo or a header	Try it	Navbar
`.navbar-inverse`	Creates a black navigation bar (instead of light-grey)	Try it	Navbar
`.navbar-left`	Aligns nav links, forms, buttons, or text, in the navbar to the left	Try it	Navbar
`.navbar-link`	Styles an element to look like a link inside 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)	Try it	Navbar
`.navbar-nav`	Used on a `<ul>` container that contains the list items with links inside a navigation bar	Try it	Navbar
`.navbar-right`	Aligns nav links, forms, buttons, or text in the navbar to the right.	Try it	Navbar
`.navbar-static-top`	Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default)	Try it	Navbar
`.navbar-text`	Vertical align any elements inside the navbar that are not links (ensures proper padding)	Try it	Navbar
`.navbar-toggle`	Styles the button that should open the navbar on small screens. Often used together with three `.icon-bar` classes to indicate a toggleable menu icon (hamburger/bars)	Try it	Navbar
`.next`	Used in the carousel control to identity the next control	Try it	Carousel
`.next`	Used to align pager buttons to the right side of the page (next button)	Try it	Pager
`.page-header`	Adds a horizontal line under the heading (+ adds some extra space around the element)	Try it	Page Header
`.pager`	Creates previous/next buttons (used on `<ul>` elements)	Try it	Pager
`.pagination`	Creates a pagination (Useful when you have a web site with lots of pages. Used on `<ul>` elements)	Try it	Pagination
`.pagination-lg`	Large pagination (each pagination link gets a font-size of 18px. Default is 14px)	Try it	Pagination
`.pagination-sm`	Small pagination (each pagination link gets a font-size of 12px. Default is 14px)	Try it	Pagination
`.panel`	Creates a bordered box with some padding around its content	Try it	Panels
`.panel-body`	Container for content inside the panel	Try it	Panels
`.panel-collapse`	Collapsible panel (toggle between hiding and showing panel(s))	Try it	Collapse
`.panel-danger`	Red panel. Indicates danger	Try it	Panels
`.panel-info`	Light-blue panel. Indicates information	Try it	Panels
`.panel-success`	Green panel. Indicates success	Try it	Panels
`.panel-warning`	Yellow panel. Indicates warning	Try it	Panels
`.panel-footer`	Creates a panel footer (light background color)	Try it	Panels
`.panel-group`	Used to group many panels together. This removes the bottom margin below each panel	Try it	Panels
`.panel-heading`	Creates a panel header (light background color)	Try it	Panels
`.panel-title`	Used inside a `.panel-heading` to adjust the styling of the text (removes margins and adds a font-size of 16px)	Try it	Panels
`.popover`	Popup-box that appears when the user clicks on an element	Try it	Popover
`.pre-scrollable`	Makes a `<pre>` element scrollable (`max-height` of 350px and provide a y-axis scrollbar)	Try it	Helpers
`.prev`	Used in carousels to indicate a "previous" link	Try it	Carousel
`.previous`	Used to align pager buttons to the left side of the page (previous button)	Try it	Pager
`.progress`	Container for progress bars	Try it	Progress Bars
`.progress-bar`	Creates a progress bar	Try it	Progress Bars
`.progress-bar-danger`	Red progress bar. Indicates danger	Try it	Progress Bars
`.progress-bar-info`	Light-blue progress bar. Indicates information	Try it	Progress Bars
`.progress-bar-striped`	Creates a striped progress bar	Try it	Progress Bars
`.progress-bar-success`	Green progress bar. Indicates success	Try it	Progress Bars
`.progress-bar-warning`	Yellow progress bar. Indicates warning	Try it	Progress Bars
`.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
`.row-no-gutters`	Removes the gutters from a row and its columns	Try it	Grid
`.show`	Shows an element (`display:block)`	Try it	Helpers
`.small`	Creates a lighter, secondary text in any heading	Try it	Typography
`.sr-only`	Hides an element on all devices except for screen readers	Try it	Helpers
`.sr-only-focusable`	Hides an element on all devices except for screen readers	Try it	Helpers
`.success`	Adds a green background color to a table row (`<tr>` or table cell (`<td>`). Indicates success or a positive action	Try it	Tables
`.tab-content`	Used together with `.tab-pane` to creates toggleable/dynamic tabs/pills	Try it	Tabs
`.tab-pane`	Used together with `.tab-content` to creates toggleable/dynamic tabs/pills	Try it	Tabs
`.table`	Adds basic styling to a table (padding, bottom borders, etc)	Try it	Tables
`.table-bordered`	Adds borders on all sides of the table and cells	Try it	Tables
`.table-condensed`	Makes a table more compact by cutting cell padding in half	Try it	Tables
`.table-hover`	Creates a hoverable table (adds a grey background color on table rows on hover)	Try it	Tables
`.table-responsive`	Makes a table responsive (adds a horizontal scrollbar when needed)	Try it	Tables
`.text-capitalize`	Indicates capitalized text	Try it	Typography
`.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 content with a background image)	Try it	Typography
`.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-lowercase`	Changes text to lowercase	Try it	Typography
`.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
`.text-right`	Aligns text to the right	Try it	Typography
`.text-success`	Green text color. Indicates success	Try it	Typography
`.text-uppercase`	Makes text uppercase	Try it	Typography
`.text-warning`	Yellow/orange text color. Indicates warning	Try it	Typography
`.thumbnail`	Adds a border around an element (often images or videos) to make it look like a thumbnail	Try it	Images
`.tooltip`	Popup-box that appears when the user moves the mouse pointer over an element	Try it	Tooltip
`.visible-*`	Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use `.hidden-*` instead	Try it	Helpers
`.visible-print-block`	Displays the element (`display:block`) in print (pre)view		Helpers
`.visible-print-inline`	Displays the element (`display:inline`) in print (pre)view		Helpers
`.visible-print-inline-block`	Displays the element (`display:inline-block`) in print (pre)view		Helpers
`.hidden-print`	Hides the element (`display:none`) in print (pre)view		Helpers
`.warning`	Adds a yellow background color to the table row (`<tr>` or table cell (`<td>`). Indicates a warning	Try it	Tables
`.well`	Adds a rounded border around an element with a gray background color and some padding	Try it	Wells
`.well-lg`	Large well (more padding)	Try it	Wells
`.well-sm`	Small well (less padding)	Try it	Wells

The table above shows all available Bootstrap 3 classes.

Tip: To see the full list of all Bootstrap 4 classes, go to our All Bootstrap 4 CSS Classes Reference.

❮ Previous Next ❯