bOOTSTRAP AND ITS ATTRIBUTES

bOOTSTRAP AND ITS ATTRIBUTES

Complete List of All Bootstrap Classes

Complete list of all Bootstrap classes with description and examples:

Description	Example

.active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)

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.

Navbar
`.active`	Adds a blue background color to the active list item in a list group

List Groups
`.active`	Adds a blue background color to simulate a "pressed" button

Buttons
`.active`	Animates a striped progress bar

Progress Bars
`.active`	Adds a blue background color to the active dropdown item in a dropdown

Dropdowns
`.active`	Adds a blue background color to the active pagination link (to highlight the current page)

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

Affix
`.alert`	Creates an alert message box

Alerts
`.alert-danger`	Red alert box. Indicates a dangerous or potentially negative action

Alerts
`.alert-dismissible`	Together with the `.close` class, this class is used to close the alert

Alerts
`.alert-info`	Light-blue alert box. Indicates some information

Alerts
`.alert-link`	Used on links inside alerts to add matching colored links

Alerts
`.alert-success`	Green alert box. Indicates a successful or positive action

Alerts
`.alert-warning`	Yellow alert box. Indicates caution should be taken with this action

Alerts
`.badge`	Creates a circular badge (grey circle - often used as a numerical indicator)

Badges
`.bg-danger`	Adds a red background color to an element. Represents danger or a negative action

Helpers
`.bg-info`	Adds a light-blue background color to an element. Represents some information

Helpers
`.bg-primary`	Adds a blue background color to an element. Represents something important

Helpers
`.bg-success`	Adds a green background color to an element. Indicates success or a positive action

Helpers
`.bg-warning`	Adds a yellow background color to an element. Represents a warning or a negative action

Helpers
`.breadcrumb`	A pagination. Indicates the current page's location within a navigational hierarchy

Pagination
`.btn`	Creates a basic button (gray background and rounded corners)

Buttons
`.btn-block`	Creates a block level button that spans the entire width of the parent element

Buttons
`.btn-danger`	Red button. Indicates danger or a negative action

Buttons
`.btn-default`	Default button. White background and grey border

Buttons
`.btn-group`	Groups buttons together on a single line

Button Groups
`.btn-group-justified`	Makes a group of buttons span the entire width of the screen

Button Groups
`.btn-group-lg`	Large button group (makes all buttons in a button group larger - increased font-size and padding)

Button Groups
`.btn-group-sm`	Small button group (makes all buttons in a button group smaller)

Button Groups
`.btn-group-xs`	Extra small button group (makes all buttons in a button group extra small)

Button Groups
`.btn-group-vertical`	Makes a button group appear vertically stacked

Button Groups
`.btn-info`	Light-blue button. Represents information

Buttons
`.btn-link`	Makes a button look like a link (get button behavior)

Buttons
`.btn-lg`	Large button

Buttons
`.btn-primary`	Blue button.

Buttons
`.btn-sm`	Small button

Buttons
`.btn-success`	Green button. Indicates success or a positive action

Buttons
`.btn-warning`	Yellow button. Represents warning or a negative action

Buttons
`.btn-xs`	Extra small button

Buttons
`.caption`	Adds a caption text inside a `.thumbnail`

Images
`.caret`	Creates a caret arrow icon , which indicates that the button is a dropdown

Dropdowns
`.carousel`	Creates a carousel (slideshow)

Carousel
`.carousel-caption`	Creates a caption text for each slide in the carousel

Carousel
`.carousel-control`	Container for next and previous links

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)

Carousel
`.carousel-inner`	Container for slide items

Carousel
`.center-block`	Centers any element (Sets an element to `display:block` with `margin-right:auto` and `margin-left:auto`)

Helpers
`.checkbox`	Container for checkboxes

Inputs
`.checkbox-inline`	Makes multiple checkboxes appear on the same line

Inputs
`.clearfix`	Clears floats

Helpers
`.close`	Indicates a close icon

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.

Grid
`.col--offset-`	Move columns to the right. These classes increase the left margin of a column by * columns

Grid
`.col--pull-`	Changes the order of the grid columns

Grid
`.col--push-`	Changes the order of the grid columns

Grid
`.collapse`	Indicates collapsible content - which can be hidden or shown on demand

Collapse
`.collapse in`	Show the collapsible content by default

Collapse
`.container`	Fixed width container with widths determined by screen sites. Equal margin on the left and right.

Containers
`.container-fluid`	A container that spans the full width of the screen

Containers
`.control-label`	Allows a label to be used for form validation

Forms
`.danger`	Adds a red background to the table row (`<tr>` or table cell (`<td>`). Indicates a dangerous or potentially negative action

Tables
`.disabled`	Disables a button (adds opacity and a "no-parking-sign" icon on hover)

Buttons
`.disabled`	Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover)

Dropdowns
`.disabled`	Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover)

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)

List Groups
`.divider`	Used to separate links in the dropdown menu with a thin horizontal border

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

Typography
`.dropdown`	Creates a toggleable menu that allows the user to choose one value from a predefined list

Dropdowns
`.dropdown-header`	Used to add headers inside the dropdown menu

Dropdowns
`.dropdown-menu`	Adds the default styles for the dropdown menu container

Dropdowns
`.dropdown-menu-right`	Right-aligns a dropdown menu

Dropdowns
`.dropdown-toggle`	Used on the button that should hide and show (toggle) the dropdown menu

Dropdowns
`.dropup`	Indicates a dropup menu (upwards instead of downwards)

Dropdowns
`.embed-responsive`	Container for embedded content. Makes videos or slideshows scale properly on any device

Images
`.embed-responsive-16by9`	Container for embedded content. Creates an 16:9 aspect ratio embedded content

Images
`.embed-responsive-4by3`	Container for embedded content. Creates an 4:3 aspect ratio embedded content

Images
`.embed-responsive-item`	Used inside `.embed-responsive`. Scales the video nicely to the parent element

Images
`.fade`	Adds a fading effect when closing an alert box

Alerts
`.form-control`	Used on input, textarea, and select elements to span the entire width of the page and make them responsive

Forms
`.form-control-feedback`	Form validation class

Inputs 2
`.form-control-static`	Adds plain text next to a form label within a horizontal form

Inputs 2
`.form-group`	Container for form input and label

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)

Forms
`.form-horizontal`	Aligns labels and groups of form controls in a horizontal layout

Forms
`.glyphicon`	Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set

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`)

Forms
`.has-feedback`	Adds feedback icons for inputs (checkmark, warning and error signs)

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`)

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`)

Forms
`.help-block`	A block of help text that breaks onto a new line and may extend beyond one line.

Input Sizing
`.hidden`	Forces an element to be hidden (`display:none`)

Helpers
`.hidden-*`	Hides content depending on screen size

Helpers
`.hide`	Deprecated. Use `.hidden` instead

Helpers
`.h1 - .h6`	Makes an element look like a heading of the chosen class (h1-h6)

Typography
`.icon-bar`	Used in the navbar to create a hamburger menu (three horizontal bars)

Navbar
`.icon-next`	Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon

Carousel
`.icon-prev`	Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon

Carousel
`.img-circle`	Shapes an image to a circle (not supported in IE8 and earlier)

Images
`.img-responsive`	Makes an image responsive

Images
`.img-rounded`	Adds rounded corners to an image

Images
`.img-thumbnail`	Shapes an image to a thumbnail (borders)

Images
`.in`	Fades in tabs

Tabs
`.info`	Adds a light-blue background to the table row (`<tr>` or table cell (`<td>`). Indicates a neutral informative change or action

Tables
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size

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"

Inputs
`.input-group-lg`	Large input group

Inputs
`.input-group-sm`	Small input group

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

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

Inputs
`.input-lg`	Large input field

Input Sizing
`.input-sm`	Small input field

Input Sizing
`.invisible`	Makes an element invisible (`visibility:hidden`). Note: Even though the element is invisible, it will take up space on the page

Helpers
`.item`	Class added to each carousel item. May be text or images

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

Jumbotron
`.label`	Adds a grey rounded box to an element. Provides additional information about something (e.g. "New")

Labels
`.label-danger`	Red label

Labels
`.label-info`	Light-blue label

Labels
`.label-success`	Green label

Labels
`.label-warning`	Yellow label

Labels
`.lead`	Increase the font size and line height of a paragraph

Typography
`.left`	Used to identify the left carousel control

Carousel
`.list-group`	Creates a bordered list group for `<li>` elements

List Group
`.list-group-item`	Added to each `<li>` element in the list group

List Group
`.list-group-item-heading`	Creates a list group heading (used on other elements besides `<li>`)

List Group
`.list-group-item-text`	Used for item text inside the list group (used on other elements besides `<li>`)

List Group
`.list-group-item-danger`	Red background color for a list item in a list group

List Group
`.list-group-item-info`	Light-blue background color for a list item in a list group

List Group
`.list-group-item-success`	Green background color for a list item in a list group

List Group
`.list-group-item-warning`	Yellow background color for a list item in a list group

List Group
`.list-inline`	Places all list items on a single line (horizontal menu)

Tabs
`.list-unstyled`	Removes all default list-style (bullets, left margin, etc.) styling from a `<ul>` or `<ol>` list

Typography
`.mark`	Highlights text: Highlighted text

Typography
`.media`	Aligns media objects (like images or videos - often used for comments in a blog post etc)

Media Objects
`.media-body`	Text that should appear next to a media object

Media Objects
`.media-heading`	Creates a heading inside the media object

Media Objects
`.media-list`	Nested media lists

Media Objects
`.media-object`	Indicates a media object (image or video)

Media Objects
`.modal`	Identifies the content as a modal and brings focus to it

Modals
`.modal-body`	Defines the style for the body of the modal. Add any HTML markup here (p, img, etc)

Modals
`.modal-content`	Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed

Modals
`.modal-dialog`	Sets the proper width and margin of the modal

Modals
`.modal-footer`	The footer of the modal (often contains an action button and a close button)

Modals
`.modal-header`	The header of the modal (often contains a title and a close button)

Modals
`.modal-lg`	Large modal (wider than default)

Modals
`.modal-open`	Used on the `<body>` element to prevent page scrolling (`overflow:hidden`)

Modals
`.modal-sm`	Small modal (less width)

Modals
`.modal-title`	The title of the modal

Modals
`.nav nav-tabs`	Indicates a tabbed menu

Tabs
`.nav nav-pills`	Indicates a pill menu

Tabs
`.nav .navbar-nav`	Used on a `<ul>` container that contains the list items with links inside a navigation bar

Navbar
`.nav-justified`	Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered)

Tabs
`.nav-stacked`	Vertically stack tabs or pills

Tabs
`.nav-tabs`	Creates a tabbed menu

Tabs
`.navbar`	Creates a navigation bar

Navbar
`.navbar-brand`	Added to a link or a header element inside the navbar to represent a logo or a header

Navbar
`.navbar-btn`	Vertically aligns a button inside a navbar

Navbar
`.navbar-collapse`	Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)

Navbar
`.navbar-default`	Creates a default navigation bar (light-grey background color)

Navbar
`.navbar-fixed-bottom`	Makes the navbar stay at the bottom of the screen (sticky/fixed)

Navbar
`.navbar-fixed-top`	Makes the navbar stay at the top of the screen (sticky/fixed)

Navbar
`.navbar-form`	Added to form elements inside the navbar to vertically center them (proper padding)

Navbar
`.navbar-header`	Added to a container element that contains the link/element that represent a logo or a header

Navbar
`.navbar-inverse`	Creates a black navigation bar (instead of light-grey)

Navbar
`.navbar-left`	Aligns nav links, forms, buttons, or text, in the navbar to the left

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)

Navbar
`.navbar-nav`	Used on a `<ul>` container that contains the list items with links inside a navigation bar

Navbar
`.navbar-right`	Aligns nav links, forms, buttons, or text in the navbar to the right.

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)

Navbar
`.navbar-text`	Vertical align any elements inside the navbar that are not links (ensures proper padding)

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)

Navbar
`.next`	Used in the carousel control to identity the next control

Carousel
`.next`	Used to align pager buttons to the right side of the page (next button)

Pager
`.page-header`	Adds a horizontal line under the heading (+ adds some extra space around the element)

Page Header
`.pager`	Creates previous/next buttons (used on `<ul>` elements)

Pager
`.pagination`	Creates a pagination (Useful when you have a web site with lots of pages. Used on `<ul>` elements)

Pagination
`.pagination-lg`	Large pagination (each pagination link gets a font-size of 18px. Default is 14px)

Pagination
`.pagination-sm`	Small pagination (each pagination link gets a font-size of 12px. Default is 14px)

Pagination
`.panel`	Creates a bordered box with some padding around its content

Panels
`.panel-body`	Container for content inside the panel

Panels
`.panel-collapse`	Collapsible panel (toggle between hiding and showing panel(s))

Collapse
`.panel-danger`	Red panel. Indicates danger

Panels
`.panel-info`	Light-blue panel. Indicates information

Panels
`.panel-success`	Green panel. Indicates success

Panels
`.panel-warning`	Yellow panel. Indicates warning

Panels
`.panel-footer`	Creates a panel footer (light background color)

Panels
`.panel-group`	Used to group many panels together. This removes the bottom margin below each panel

Panels
`.panel-heading`	Creates a panel header (light background color)

Panels
`.panel-title`	Used inside a `.panel-heading` to adjust the styling of the text (removes margins and adds a font-size of 16px)

Panels
`.popover`	Popup-box that appears when the user clicks on an element

Popover
`.pre-scrollable`	Makes a `<pre>` element scrollable (`max-height` of 350px and provide a y-axis scrollbar)

Helpers
`.prev`	Used in carousels to indicate a "previous" link

Carousel
`.previous`	Used to align pager buttons to the left side of the page (previous button)

Pager
`.progress`	Container for progress bars

Progress Bars
`.progress-bar`	Creates a progress bar

Progress Bars
`.progress-bar-danger`	Red progress bar. Indicates danger

Progress Bars
`.progress-bar-info`	Light-blue progress bar. Indicates information

Progress Bars
`.progress-bar-striped`	Creates a striped progress bar

Progress Bars
`.progress-bar-success`	Green progress bar. Indicates success

Progress Bars
`.progress-bar-warning`	Yellow progress bar. Indicates warning

Progress Bars
`.pull-left`	Float an element to the left

Helpers
`.pull-right`	Float an element to the right

Helpers
`.right`	Used to identify the right carousel control

Carousel
`.row`	Container for responsive columns

Grid
`.row-no-gutters`	Removes the gutters from a row and its columns

Grid
`.show`	Shows an element (`display:block)`

Helpers
`.small`	Creates a lighter, secondary text in any heading

Typography
`.sr-only`	Hides an element on all devices except for screen readers

Helpers
`.sr-only-focusable`	Hides an element on all devices except for screen readers

Helpers
`.success`	Adds a green background color to a table row (`<tr>` or table cell (`<td>`). Indicates success or a positive action

Tables
`.tab-content`	Used together with `.tab-pane` to creates toggleable/dynamic tabs/pills

Tabs
`.tab-pane`	Used together with `.tab-content` to creates toggleable/dynamic tabs/pills

Tabs
`.table`	Adds basic styling to a table (padding, bottom borders, etc)

Tables
`.table-bordered`	Adds borders on all sides of the table and cells

Tables
`.table-condensed`	Makes a table more compact by cutting cell padding in half

Tables
`.table-hover`	Creates a hoverable table (adds a grey background color on table rows on hover)

Tables
`.table-responsive`	Makes a table responsive (adds a horizontal scrollbar when needed)

Tables
`.text-capitalize`	Indicates capitalized text

Typography
`.text-center`	Center-aligns text

Typography
`.text-danger`	Red text color. Indicates danger

Typography
`.text-hide`	Hides text (helps replace an element's text content with a background image)

Typography
`.text-info`	Light-blue text color. Indicates information

Typography
`.text-justify`	Indicates justified text

Typography
`.text-left`	Aligns the text to the left

Typography
`.text-lowercase`	Changes text to lowercase

Typography
`.text-muted`	Grey text color

Typography
`.text-nowrap`	Prevents the text from wrapping

Typography
`.text-primary`	Blue text color

Typography
`.text-right`	Aligns text to the right

Typography
`.text-success`	Green text color. Indicates success

Typography
`.text-uppercase`	Makes text uppercase

Typography
`.text-warning`	Yellow/orange text color. Indicates warning

Typography
`.thumbnail`	Adds a border around an element (often images or videos) to make it look like a thumbnail

Images
`.tooltip`	Popup-box that appears when the user moves the mouse pointer over an element

Tooltip
`.visible-*`	Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use `.hidden-*` instead

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

Tables
`.well`	Adds a rounded border around an element with a gray background color and some padding

Wells
`.well-lg`	Large well (more padding)

Wells
`.well-sm`	Small well (less padding)

Comments