Bootstrap Classes Reference







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Bootstrap Classes Reference



❮ Previous
Next ❯



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
.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




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




function sortTable(table, col, reverse) {
var tb = table.tBodies[0],
tr = Array.prototype.slice.call(tb.rows, 0),
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) {
return reverse
* (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()));
});
for(i = 0; i = 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}

function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

❮ Previous
Next ❯

Popular posts from this blog

Colors HSL

W3.CSS Downloads

W3.CSS Tables