Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use!Try it Yourself Examples
This Bootstrap tutorial contains hundreds of Bootstrap examples. With our online editor, you can edit the code, and click on a button to view the result.![]()
Bootstrap Example
<div class="jumbotron text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor..</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor..</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor..</p> </div> </div> </div> Try it Yourself » Click on the "Try it Yourself" button to see how it works.Bootstrap Exercises
<meta> tag inside the
<head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded
by the browser.
3.
Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
.container class provides a responsive fixed width container.container-fluid class provides a full width container, spanning the entire width of the viewport| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
xs (for phones - screens less than 768px wide)sm (for tablets - screens equal to or greater than 768px wide)md (for small laptops - screens equal to or greater than 992px wide)lg (for laptops and desktops - screens equal to or greater than 1200px wide)<div
class="row">).
Then, add the desired number of columns (tags with appropriate
.col-*-* classes).
Note that numbers in .col-*-* should always add up to 12 for each row.
Below we have collected some examples of basic Bootstrap grid layouts.
<body> element and all paragraphs
(<p>).
In addition, all <p> elements have a bottom margin that equals half
their computed line-height (10px by default).
<h1> to
<h6>) in the following way:
<small> element is used to create a lighter, secondary text in any heading:
<mark> element in the following way:
<abbr> element in the following way:
<blockquote> element in the following way:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.Try it Yourself » To show the quote on the right, use the
.blockquote-reverse class:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.Try it Yourself »
<dl> element in the following way:
<code> element in the following way:
span, section, and div defines a section in a document.
Try it Yourself »
<kbd> element in the following way:
<pre> element in the following way:
.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, and .text-danger:
.bg-primary,
.bg-success, .bg-info, .bg-warning, and .bg-danger:
| Class | Description | Example |
|---|---|---|
.lead | Makes a paragraph stand out | Try it |
.small | Indicates smaller text (set to 85% of the size of the parent) | Try it |
.text-left | Indicates left-aligned text | Try it |
.text-center | Indicates center-aligned text | Try it |
.text-right | Indicates right-aligned text | Try it |
.text-justify | Indicates justified text | Try it |
.text-nowrap | Indicates no wrap text | Try it |
.text-lowercase | Indicates lowercased text | Try it |
.text-uppercase | Indicates uppercased text | Try it |
.text-capitalize | Indicates capitalized text | Try it |
.initialism | Displays the text inside an <abbr> element in a slightly smaller font size | Try it |
.list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>).
This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it |
.list-inline | Places all list items on a single line | Try it |
.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 |
.pre-scrollable | Makes a <pre> element scrollable | Try it |
.table class adds basic styling to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-striped class adds zebra-stripes to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-bordered class adds borders on all sides of the table and cells:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-hover class adds a hover effect (grey background color) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-condensed class makes a table more compact by cutting cell padding in half:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
<tr>) or table cells (<td>):
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
| Class | Description |
|---|---|
.active | Applies the hover color to the table row or table cell |
.success | Indicates a successful or positive action |
.info | Indicates a neutral informative change or action |
.warning | Indicates a warning that might need attention |
.danger | Indicates a dangerous or potentially negative action |
.table-responsive class creates a responsive table.
The table will then
scroll horizontally on small devices (under 768px).
When viewing on anything
larger than 768px wide, there is no difference:
Circle:
Thumbnail:
.img-rounded class adds rounded corners to an image (IE8 does
not support rounded corners):
.img-circle class shapes the image to a circle (IE8 does not
support rounded corners):
.img-thumbnail class shapes the image to a thumbnail:
.img-responsive class
to the <img> tag.
The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and
height: auto; to the image:
.thumbnail class
to create an image gallery.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Note: You will learn more about the Grid System later in this tutorial (how to create a layout with different amount of columns).
.embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:
<div> element with class .jumbotron to create a jumbotron:
<div class="container"> if you want the jumbotron to
NOT extend to the edge of the screen:
<div class="container"> if you want the jumbotron to extend to the screen edges:
.page-header class adds a horizontal line under the heading (+ adds some extra space around the element):
<div> element with class .page-header to create a page header:
.well class adds a rounded border around an element with a
gray background color and some padding:
Basic Well
.well-sm
class for
small wells or .well-lg class for large wells:
.alert class, followed by one of the
four contextual classes .alert-success, .alert-info, .alert-warning or
.alert-danger:
alert-link class to any links inside the alert box to create "matching colored links":
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
.alert-dismissible
class to the alert container.
Then add class="close" and data-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).
.fade and .in classes adds a fading effect when
closing the alert message:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link<a>, <button>, or
<input> element:
.btn-lg.btn-sm.btn-xs.btn-block to create a block level button:
.active makes a button appear pressed, and the class
.disabled
makes a button unclickable:
<div> element with class .btn-group to create a button group:
.btn-group-lg|sm|xs to size all buttons in the group:
.btn-group-vertical to create a vertical button group:
.btn-group-justified
class:
Example with <a> elements:
<button> elements, you must wrap each button in a .btn-group class:
.badge class within <span> elements to create badges:
.label class, followed by
one of the six contextual classes .label-default, .label-primary, .label-success,
.label-info, .label-warning or .label-danger, within
a <span> element to create
a label:
.progress class to a <div> element:
.sr-only class from the progress bar to show a visible percentage:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger.progress-bar-striped to add stripes to the progress bars:
.active to animate the progress bar:
<div class="progress">:
.pagination class to an <ul> element:
.active to let the user know which page he/she is on:
.disabled if a link for some reason is disabled:
.pagination-lg for larger blocks or .pagination-sm for smaller blocks:
.breadcrumb class indicates the current page's location within a
navigational hierarchy:
.pager class to an <ul> element:
.previous and .next classes to align each
button to the sides of the page:
<ul> element with class .list-group, and
<li> elements with class .list-group-item:
<span> element with class .badge
inside the list item:
<div> instead of <ul>
and <a> instead of <li>:
.active class to highlight the current item:
.disabled class:
.list-group-item-success, list-group-item-info,
list-group-item-warning, and .list-group-item-danger:
.list-group-item-heading and
.list-group-item-text which can be used as follows:
.panel class, and content inside the panel has a
.panel-body class:
.panel-default class is used to style the color of the
panel.
See the last example on this page for more contextual classes.
.panel-heading class adds a heading to the panel:
.panel-footer class adds a footer to the panel:
<div> with class
.panel-group around them.
The .panel-group class clears the bottom-margin of each panel:
.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger):
.dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and
the
data-toggle="dropdown" attribute.
The .caret class creates a caret arrow icon (), which indicates that the
button is a dropdown.
Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
.divider class is used to separate links inside the dropdown menu with a thin horizontal border:
.dropdown-header class is used to add headers inside the dropdown menu:
.disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):
.dropdown-menu-right class to the element
with .dropdown-menu:
"dropup":
role and aria-* attributes, when creating a dropdown menu:
.collapse class indicates a collapsible element (a <div> in our example);
this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Then add the data-target="#id" attribute to
connect the button with the collapsible content (<div id="demo">).
Note: For <a>
elements, you can use the href attribute instead of the data-target
attribute:
.in class to show the content by default:
data-parent attribute to make
sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
<ul> (and styled
afterwards), like this:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
If you want to create a horizontal menu of the list above, add the
.list-inline class to <ul>:
<ul class="list-inline">
Try it Yourself »
Or you can display the menu above with Bootstraps' Tabs and Pills (see
below).
Note: See the last example on this page to find out how to make tabs and pills toggleable/dynamic.
<ul class="nav nav-tabs">:
Tip: Also mark the current page with <li class="active">.
The following example creates navigation tabs:
<ul class="nav nav-pills">.
Also mark the current page with
<li class="active">:
.nav-stacked class:
.nav-justified class.
Note that on screens that are smaller than 768px, the list items are stacked
(content will remain centered):
data-toggle="tab" attribute to each link.
Then add a .tab-pane class with a unique ID for every tab and wrap them inside a
<div> element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add the
.fade class to .tab-pane:
data-toggle="pill":
<nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
.navbar-default class into .navbar-inverse:
.navbar-right class is used to right-align navigation bar buttons.
In the following example we insert a "Sign Up" button and a "Login" button to
the right in the navigation bar.
We also add a glyphicon on each of the two new
buttons:
.navbar-btn class on a Bootstrap
button:
.navbar-form class to a form element and add an input(s).
Note that we have added a .form-group class to the div container holding the input.
This adds proper padding if you have more than one inputs (you will learn more about this in the Forms chapter).
.input-group and .input-group-addon classes to attach an icon or help text next to the input field.
You will learn more about these classes in the Bootstrap Inputs chapter.
.navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding
and text color).
.navbar-fixed-top class makes the navigation bar fixed at
the top:
.navbar-fixed-bottom class makes the navigation bar stay at
the bottom:
<input>, <textarea>, and
<select> elements
with class .form-control have a width of 100%.
<div class="form-group"> (needed for optimum spacing).form-control to all textual <input>, <textarea>, and <select> elements.form-inline to the <form> element.sr-only class:
.form-horizontal to the <form> element.control-label to all <label> elements.checkbox-inline class if you want the checkboxes to appear on the
same line:
.radio-inline class if you want the radio buttons to appear on the same line:
.form-control-static class on a <p> element:
.input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
The .input-group-addon class attaches an icon or help text next to the input field.
Text
.input-group-btn attaches a button next to an input.
This is often used together with a search bar:
disabled attribute to disable an input fielddisabled attribute to a fieldset to disable all controls withinreadonly attribute to an input to prevent user input.has-warning, .has-error, or .has-success to the parent element.has-feedback class and an icon.sr-only class on non-visible labels.input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
.form-group-* to the <div class="form-group"> element:
.input-group with the .input-group-sm or .input-group-lg classes:
.col-xs-* classes:
.help-block class to add a block level help text in forms:
.media class to create a container for
media objects.
Use the .media-left class to align the media
object (image) to the left, or the .media-right class to align it to the right.
Text that should appear next to the image, is placed inside a container with class="media-body".
Additionally, you can use .media-heading for
headings.
media-top, media-middle or media-bottom class:
id="myCarousel") for carousel controls to
function properly.
The class="carousel"
specifies that this <div> contains a carousel.The .slide
class adds a CSS transition and animation effect, which makes the items slide
when showing a new item.
Omit this class if you do not want this effect.The data-ride="carousel"
attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
The "Indicators" part:
The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the
carousel, and which slide the user is currently viewing).
The indicators are specified in an ordered list with class .carousel-indicators.
The data-target attribute points to the id of the carousel.
The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.
The "Wrapper for slides" part:
The slides are specified in a <div> with class .carousel-inner.
The content of each slide is defined in a <div> with class .item.
This can be text or images.
The .active class needs to be added to one of the slides.
Otherwise, the carousel will not be visible.
The "Left and right controls" part:
This code adds "left" and "right" buttons that allows the user to go back and
forth between the slides manually.
The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position
relative to its current position.
<div class="carousel-caption"> within each <div
class="item"> to create a caption for each slide:
data-toggle="modal" opens the modal windowdata-target="#myModal" points to the id of the modal<div> of the modal must have an ID that is the
same as the value of the data-target attribute used to trigger the modal ("myModal").
The .modal class identifies the content of <div> as a modal and
brings focus to it.
The .fade class adds a transition effect which fades the modal in
and out.
Remove this class if you do not want this effect.
The attribute role="dialog" improves accessibility for
people using screen readers.
The .modal-dialog class sets the proper width and margin of the
modal.
The "Modal content" part:
The <div> with class="modal-content"
styles the modal (border, background-color, etc.).
Inside this <div>,
add
the modal's
header, body, and footer.
The .modal-header class is used to define the style for the header of the
modal.
The <button> inside the header has a data-dismiss="modal" attribute which
closes the modal if you click on it.
The .close class styles the close button,
and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of
the modal.
Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the
footer of the modal.
Note that this area is right aligned by default.
.modal-sm
class for
small modals or .modal-lg class for large modals.
Add the size class to the <div> element with class .modal-dialog:
data-toggle="tooltip"
attribute to an element.
Use the title attribute to specify the text that should be
displayed inside the tooltip:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Note: Tooltips must be initialized with jQuery: select the
specified element and call the tooltip() method.
The following code will enable all tooltips in the document:
data-placement attribute to set the position of the
tooltip on top, bottom, left or the right side of the element:
data-placement attribute with a
value of "auto", which will let the browser decide the position of the
tooltip.
For example, if the value is "auto left", the tooltip will display on
the left side when possible, otherwise on the right.
data-toggle="popover"
attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the
text that should be displayed inside the popover's body:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Note: Popovers must be initialized with jQuery: select the
specified element and call the popover() method.
The following code will enable all popovers in the document:
data-placement attribute to set the position of the
popover on top, bottom, left or the right side of the element:
data-trigger="focus" attribute which will close
the popover when clicking outside the element:
data-trigger attribute with a value of
"hover":
data-spy="scroll" to the element that should be used as the scrollable
area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name
of the navigation bar (.navbar).
This is to make sure that the navbar
is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
list items
(<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset
from top when calculating the position of scroll.
This is useful when you feel
that the links inside the navbar changes the active state too soon or too early
when jumping to the scrollable elements.
Default is 10 pixels.
Requires relative positioning: The element with
data-spy="scroll"
requires the CSS position property, with a value of "relative"
to work properly.
In this example, we use Bootstrap's vertical navigation pills as menu:
CSS position from static to fixed), depending on
scroll position.
Example 1) An affixed navbar:
Example 2) An affixed sidebar:
With Affix, when we scroll up and down the page, the menu is always visible and locked in its position.
data-spy="affix" to the element you want affixed.
Optionally, add the data-offset-top|bottom attribute to
calculate the position of the scroll.
.affix, .affix-top, and
.affix-bottom.
Each class represents a particular state.
You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.
.affix-top or .affix-bottom class to indicate the element is in its top-most or bottom-most position.
Positioning with CSS is not required at this point..affix-top or .affix-bottom class with the .affix class (sets position:fixed).
At this point, you must add the CSS top or bottom property to position the affixed element in the page..affix class with .affix-bottom.
Since offsets are optional, setting one requires you to set the appropriate CSS.
In this case, add position:absolute when necessary..affix class (position:fixed)
to the <nav> element when we have scrolled 197 pixels from the top.
If you open
the example, you will also see that we added the CSS top property with a value of 0
to the .affix class.
This is to make sure that the navbar stays at the top of the page at
all time, when we have scrolled 197 pixels from the top.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
toggle() method hides the row (display:none) that does not match the
search.
We use the toLowerCase() method to convert the text to lower case, which
makes the search case insensitive (allows "john", "John", and even "JOHN" on
search).
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
xs (for phones - screens less than 768px wide)sm (for tablets - screens equal to or greater than 768px wide)md (for small laptops - screens equal to or greater than 992px wide)lg (for laptops and desktops - screens equal to or greater than 1200px wide).container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.row and .col-sm-4 are available for quickly making grid layouts.rows.col-sm-4<div
class="container">).
Next, create a row (<div
class="row">).
Then, add the desired number of columns (tags with appropriate
.col-*-* classes).
Note that numbers in .col-*-* should always add up to 12 for each row.
| Extra small <768px | Small >=768px | Medium >=992px | Large >=1200px | |
|---|---|---|---|---|
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
.col-sm-* classes indicates how many columns the
div should
span (out of 12).
So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns,
.col-sm-6 spans 6 columns, etc.
Note: Make sure that the
sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing
the .container class to .container-fluid:
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm | .col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
.col-sm-* classes.
We will add the following classes to our two columns:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Now Bootstrap is going to say "at the small size, look for classes with
-sm- in them and use those".
The following example will result in a 25%/75% split on small (and medium and
large) devices.
On extra small devices, it will automatically stack (100%):
col-sm-3
col-sm-9
.col-sm-4 and .col-sm-8:
col-sm-4
col-sm-8
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs | .col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
.col-md-* classes.
Now we will add the column widths for medium devices:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Now Bootstrap is going to say "at the small size, look at classes with
-sm- in them and use those.
At the medium size, look at classes with
-md- in them and use those".
The following example will result in a 25%/75% split on small devices and a
50%/50% split on medium (and large) devices.
On extra small devices, it will
automatically stack (100%):
.col-md-6 class (without .col-sm-*).
This means that medium
and large devices will split 50%/50% - because the class scales up.
However,
for small devices, it will stack vertically (100% width):
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs | .col-sm | .col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
.col-lg-* classes.
So now we will add the column widths for large devices:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Now Bootstrap is going to say "at the small size, look at classes with
-sm- in them and use those.
At the medium size, look at classes with
-md- in them and use those.
At the large size, look at classes with the word -lg-
in them and use those".
The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and
a 33%/66% split on large devices:
.col-lg-6 class (without .col-md-* and/or .col-sm-*).
This means that large devices will split 50%/50%.
However,
for medium AND small devices, it will stack vertically (100% width):
.row-no-gutters class to remove the gutters from a row and its columns:
.clearfix class) at specific breakpoints to prevent strange wrapping with uneven
content:
.col-md-offset-* classes.
These
classes increase the left margin of a column by * columns:
.col-md-push-* and
.col-md-pull-* classes:
.text-center class to center the text inside the
container:
.img-circle class:
.col-sm-4):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Try it Yourself »
.img-responsive class to all images.
Add display:inline to the first image to force it to be centered
(the .img-responsive class adds display:block
to the image, which makes it jump to the left of the screen).
If you want the image to span the entire width of the screen
when it starts to stack, add width:100% to the image.
When opening the example, remember to resize the screen to see the responsive
effect:
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
<h3> and <img> element.
.jumbotron:
.text-center class to center the text inside the
jumbotron:
.container-fluid), and add a custom class to the second container (.bg-grey
- adds a gray background color):
.col-sm-8
and .col-sm-4)
3.
Add media queries to center the "logo column" on screens smaller than 768
pixels wide.
.col-sm-4):
.logo-small) to each glyphicon in the "Services" container.
Use CSS to style them:
.col-sm-4):
Inside each column, add an image.
Then, use the .img-thumbnail class to shape the image to a thumbnail.
Normally, you would add the .img-thumbnail class directly to the
<img> element.
In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.
.col-sm-4):
Inside each column, add a panel:
Try it Yourself »
navbar-right
class.
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Then you can use them in the page:
.slideanim class to the
element you want to slide in, and add the following to your CSS and jQuery (feel
free to modify the duration, opacity, where to start, when to slide in, and so
on):
.container):
.text-center class to center the text inside the
container, and use the <em> element to make the "We love music" text italic:
.col-sm-4), add text and
images, and put them inside the container:
Name
.img-circle class.
We have also added some CSS to make the images look good:
.list-group and .list-group-item) inside
of it.
Add a custom class (.bg-1) to the container (black background color) and some
styles to
its children:
.label) and a badge (.badge) to highlight available tickets/sold out:
.col-sm-4):
Inside each column, add an image.
Then, use the .img-thumbnail class to shape the image to a thumbnail.
Normally, you would add the .img-thumbnail class directly to the
<img> element.
In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.
.btn class, to a black button:
<button class="btn">Buy Tickets</button>
to <button class="btn" data-toggle="modal"
data-target="#myModal" >Buy Tickets</button>.
These
buttons are used to open the actual modal.
To create the modal, look at the following code:
.col-md-4 and .col-md-8).
Add informational icons with text inside the first column and form controls
in the second:
.nav nav-tabs) inside the contact container, with
"quotes" from the band members:
navbar-right
class.
If you want one of the links in the navbar to behave like a dropdown
menu, use the .dropdown class
<footer> element and add some text.
2.
Use CSS to style the footer.
3.
Add an "Up Arrow" icon, which will take the user to the top of the page
when clicked on.
4.
Use jQuery to initialize the tooltip plugin:
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Then you can use them in the page:
 |
W3Schools offers an Online Certification Program. The perfect solution for busy professionals who need to balance work, family, and career building. More than 25 000 certificates already issued! |
Document Your SkillsKnowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career, or help you to start a new one.Get a CertificateGetting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary. Get Your Certificate » |
|
| 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 |
| Element/Class | Description | Example |
|---|---|---|
| <h1> - <h6> or .h1 - .h6 | h1 - h6 headings | Try it |
| <small> | Creates a lighter, secondary text in any heading
Heading (secondary text) | Try it |
| .small | Indicates smaller text (set to 85% of the size of the parent): Smaller text | Try it |
| .lead | Makes a text stand out: Stand out text | Try it |
| <mark> or .mark | Highlights text: Highlighted text | Try it |
| <del> | Indicates deleted text: | Try it |
| <s> | Indicates no longer relevant text: | Try it |
| <ins> | Indicates inserted text: Inserted text | Try it |
| <u> | Indicates underlined text: Underlined text | Try it |
| <strong> | Indicates bold text: Bold text | Try it |
| <em> | Indicates italic text: Italic text | Try it |
| .text-left | Indicates left-aligned text | Try it |
| .text-center | Indicates center-aligned text | Try it |
| .text-right | Indicates right-aligned text | Try it |
| .text-justify | Indicates justified text | Try it |
| .text-nowrap | Indicates no wrap text | Try it |
| .text-lowercase | Indicates lowercased text: LOWERCASED TEXT | Try it |
| .text-uppercase | Indicates uppercased text: uppercased text | Try it |
| .text-capitalize | Indicates capitalized text: capitalized text | Try it |
| <abbr> | The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. | Try it |
| .initialism | Displays the text inside the <abbr> element in a slightly smaller font size | Try it |
| <address> | Presents contact information | Try it |
| <blockquote> | Indicates blocks of content from another source | Try it |
| .blockquote-reverse | Indicates a blockquote with right-aligned content | Try it |
| <ul> | Indicates an unordered list | Try it |
| <ol> | Indicates an ordered list | Try it |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it |
| .list-inline | Places all list items on a single line | Try it |
| <dl> | Indicates a description list | Try it |
| .dl-horizontal | Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side | Try it |
| Element/Class | Description | Example |
|---|---|---|
| <var> | Indicates variables: x = ab + y | Try it |
| <kbd> | Indicates input that is typically entered via the keyboard: CTRL + P | Try it |
| <pre> | Indicates multiple lines of code | Try it |
| <pre class="pre-scrollable"> | Indicates multiple lines of code with scrollbar | Try it |
| <samp> | Indicates sample output from a computer program: Sample output | Try it |
| <code> | Indicates inline snippets of code: span, div | Try it |
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | Try it |
| .btn-default | Indicates a default/standard button | Try it |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
| .btn-success | Indicates a successful or positive action | Try it |
| .btn-info | Contextual button for informational alert messages | Try it |
| .btn-warning | Indicates caution should be taken with this action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes a button look like a link (will still have button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
| .active | Makes the button appear pressed | Try it |
| .disabled | Makes the button disabled | Try it |
| .navbar-btn | Vertically aligns a button inside a navbar | Try it |
| Class | Description | Example |
|---|---|---|
| .btn-group | Groups buttons together on a single line | Try it |
| .btn-group-justified | Makes a group of buttons span the entire width of the screen | Try it |
| .btn-group-lg | Large button group (makes all buttons in a button group larger - increased font-size and padding) | Try it |
| .btn-group-sm | Small button group (makes all buttons in a button group smaller) | Try it |
| .btn-group-xs | Extra small button group (makes all buttons in a button group extra small) | Try it |
| .btn-group-vertical | Makes a button group appear vertically stacked | Try it |
<div class="form-group"> (needed for optimum spacing).form-control to all textual <input>, <textarea>, and <select> elements| Class | Description | Example |
|---|---|---|
| .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 |
| .form-horizontal | Aligns labels and groups of form controls in a horizontal layout | Try it |
| .form-control | Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it |
| .form-control-feedback | Form validation class | Try it |
| .form-control-static | Adds plain text next to a form label within a horizontal form | Try it |
| .form-group | Container for form input and label | Try it |
| Class | Description | Example |
|---|---|---|
| .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 |
| .input-group-lg | Large input group | Try it |
| .input-group-sm | Small input group | Try it |
| .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 |
| .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 |
| .input-lg | Large input field | Try it |
| .input-sm | Small input field | Try it |
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | Try it |
| .text-primary | Text styled with class "text-primary" | Try it |
| .text-success | Text styled with class "text-success" | Try it |
| .text-info | Text styled with class "text-info" | Try it |
| .text-warning | Text styled with class "text-warning" | Try it |
| .text-danger | Text styled with class "text-danger" | Try it |
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | Try it |
| .bg-success | Table cell is styled with class "bg-success" | Try it |
| .bg-info | Table cell is styled with class "bg-info" | Try it |
| .bg-warning | Table cell is styled with class "bg-warning" | Try it |
| .bg-danger | Table cell is styled with class "bg-danger" | Try it |
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | Try it |
| .pull-right | Floats an element to the right | Try it |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | Try it |
| .clearfix | Clears floats | Try it |
| .show | Forces an element to be shown (display:block) | Try it |
| .hidden | Forces an element to be hidden (display:none) | Try it |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | Try it |
| .sr-only | Hides an element to all devices except screen readers | Try it |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | Try it |
| .text-hide | Helps replace an element's text content with a background image | Try it |
| .close | Indicates a close icon | Try it |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | Try it |
| Classes | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
.visible-*-* classes for come in three variations, one for each CSS display
property value:
| Group of classes | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
sm) screens, the available .visible-*-* classes are: .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg are deprecated as of v3.2.0.
| Class | Description | Example |
|---|---|---|
| .img-rounded | Adds rounded corners to an image (not available in IE8) | Try it |
| .img-circle | Shapes the image to a circle (not available in IE8) | Try it |
| .img-thumbnail | Shapes the image to a thumbnail | Try it |
| .img-responsive | Makes an image responsive (will scale nicely to the parent element) | Try it |
Circle:
.img-responsive class
to the <img> tag.
The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%, height: auto,
and display:block to the image:
| Class | Description | Example |
|---|---|---|
| .table | Adds basic styling (light padding and only horizontal dividers) to any <table> | Try it |
| .table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | Try it |
| .table-bordered | Adds border on all sides of the table and cells | Try it |
| .table-hover | Enables a hover state on table rows within a <tbody> | Try it |
| .table-condensed | Makes table more compact by cutting cell padding in half | Try it |
| Combining all the table classes | Try it | |
| Class | Description | Example |
|---|---|---|
| .active | Applies the hover color (light-grey) to a particular row or cell | Try it |
| .success | Indicates a successful or positive action | Try it |
| .info | Indicates a neutral informative change or action | Try it |
| .warning | Indicates a warning that might need attention | Try it |
| .danger | Indicates a dangerous or potentially negative action | Try it |
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | Try it |
| .dropdown-menu | Builds the dropdown menu | Try it |
| .dropdown-menu-right | Right-aligns a dropdown menu | Try it |
| .dropdown-header | Adds a header inside the dropdown menu | Try it |
| .dropup | Indicates a dropup menu | Try it |
| .disabled | Disables an item in the dropdown menu | Try it |
| .divider | Separates items inside the dropdown menu with a horizontal line | Try it |
| Class | Description | Example |
|---|---|---|
| .collapse | Indicates collapsible content - which can be hidden or shown on demand | Try it |
| .collapse .in | Show the collapsible content by default | Try it |
| .panel-collapse | Collapsible panel (toggle between hiding and showing panel(s)) | Try it |
| Collapsible list group | Try it | |
| Accordion | Try it |
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav nav-pills | Creates navigation pills | Try it |
| .nav nav-pills nav-stacked | Creates vertical navigation pills | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked | Try it |
| .disabled | Indicates a disabled (unclickable) tab/pill | Try it |
| Navigation tabs with dropdown menu | Try it | |
| Navigation pills with dropdown menu | Try it | |
| .tab-content | Together with .tab-pane and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | Try it |
| Class | Description | Example |
|---|---|---|
| .navbar | Creates a navigation bar | Try it |
| .navbar-brand | Added to a link or a header element inside the navbar to represent a logo or a header | Try it |
| .navbar-btn | Vertically aligns a button inside a navbar | Try it |
| .navbar-collapse | Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | Try it |
| .navbar-default | Creates a default navigation bar (light-grey background color) | Try it |
| .navbar-fixed-bottom | Makes the navbar stay at the bottom of the screen (sticky/fixed) | Try it |
| .navbar-fixed-top | Makes the navbar stay at the top of the screen (sticky/fixed) | Try it |
| .navbar-form | Added to form elements inside the navbar to vertically center them (proper padding) | Try it |
| .navbar-header | Added to a container element that contains the link/element that represent a logo or a header | Try it |
| .navbar-inverse | Creates a black navigation bar (instead of light-grey) | Try it |
| .navbar-left | Aligns nav links, forms, buttons, or text, in the navbar to the left | Try it |
| .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-nav | Used on a <ul> container that contains the list items with links inside a navigation bar | Try it |
| .navbar-right | Aligns nav links, forms, buttons, or text in the navbar to the right. | Try it |
| .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-text | Vertical align any elements inside the navbar that are not links (ensures proper padding) | Try it |
| .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 |
| Class | Description | Example |
|---|---|---|
| .breadcrumb | Makes a breadcrumb | Try it |
| .pager | Provides simple pagination links (Previous/Next) | Try it |
| .previous | Aligns the .pager previous button to the left | Try it |
| .next | Aligns the .pager next button to the right | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .pagination | Provides pagination links | Try it |
| .pagination-lg | Used together with the .pagination class to provide larger pagination links | Try it |
| .pagination-sm | Used together with the .pagination class to provide smaller pagination links | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .active | Indicates the current page | Try it |
| Class | Description | Example |
|---|---|---|
| .label label-default | Indicates a default grey label | Try it |
| .label label-primary | Indicates a blue label of type "primary" | Try it |
| .label label-success | Indicates a green label of type "success" | Try it |
| .label label-info | Indicates a light blue label of type "info" | Try it |
| .label label-warning | Indicates a yellow label of type "warning" | Try it |
| .label label-danger | Indicates a red label of type "danger" | Try it |
| .badge | Indicates new or unread items | Try it |
| .jumbotron | Indicates a big box for calling extra attention to featured content or information | Try it |
| .jumbotron (extra) | To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class | Try it |
| Glyph | Description | Example |
|---|---|---|
| glyphicon glyphicon-asterisk | Try it | |
| glyphicon glyphicon-plus | Try it | |
| glyphicon glyphicon-minus | Try it | |
| glyphicon glyphicon-euro | Try it | |
| glyphicon glyphicon-cloud | Try it | |
| glyphicon glyphicon-envelope | Try it | |
| glyphicon glyphicon-pencil | Try it | |
| glyphicon glyphicon-glass | Try it | |
| glyphicon glyphicon-music | Try it | |
| glyphicon glyphicon-search | Try it | |
| glyphicon glyphicon-heart | Try it | |
| glyphicon glyphicon-star | Try it | |
| glyphicon glyphicon-star-empty | Try it | |
| glyphicon glyphicon-user | Try it | |
| glyphicon glyphicon-film | Try it | |
| glyphicon glyphicon-th-large | Try it | |
| glyphicon glyphicon-th | Try it | |
| glyphicon glyphicon-th-list | Try it | |
| glyphicon glyphicon-ok | Try it | |
| glyphicon glyphicon-remove | Try it | |
| glyphicon glyphicon-zoom-in | Try it | |
| glyphicon glyphicon-zoom-out | Try it | |
| glyphicon glyphicon-off | Try it | |
| glyphicon glyphicon-signal | Try it | |
| glyphicon glyphicon-cog | Try it | |
| glyphicon glyphicon-trash | Try it | |
| glyphicon glyphicon-home | Try it | |
| glyphicon glyphicon-file | Try it | |
| glyphicon glyphicon-time | Try it | |
| glyphicon glyphicon-road | Try it | |
| glyphicon glyphicon-download-alt | Try it | |
| glyphicon glyphicon-download | Try it | |
| glyphicon glyphicon-upload | Try it | |
| glyphicon glyphicon-inbox | Try it | |
| glyphicon glyphicon-play-circle | Try it | |
| glyphicon glyphicon-repeat | Try it | |
| glyphicon glyphicon-refresh | Try it | |
| glyphicon glyphicon-list-alt | Try it | |
| glyphicon glyphicon-lock | Try it | |
| glyphicon glyphicon-flag | Try it | |
| glyphicon glyphicon-headphones | Try it | |
| glyphicon glyphicon-volume-off | Try it | |
| glyphicon glyphicon-volume-down | Try it | |
| glyphicon glyphicon-volume-up | Try it | |
| glyphicon glyphicon-qrcode | Try it | |
| glyphicon glyphicon-barcode | Try it | |
| glyphicon glyphicon-tag | Try it | |
| glyphicon glyphicon-tags | Try it | |
| glyphicon glyphicon-book | Try it | |
| glyphicon glyphicon-bookmark | Try it | |
| glyphicon glyphicon-print | Try it | |
| glyphicon glyphicon-camera | Try it | |
| glyphicon glyphicon-font | Try it | |
| glyphicon glyphicon-bold | Try it | |
| glyphicon glyphicon-italic | Try it | |
| glyphicon glyphicon-text-height | Try it | |
| glyphicon glyphicon-text-width | Try it | |
| glyphicon glyphicon-align-left | Try it | |
| glyphicon glyphicon-align-center | Try it | |
| glyphicon glyphicon-align-right | Try it | |
| glyphicon glyphicon-align-justify | Try it | |
| glyphicon glyphicon-list | Try it | |
| glyphicon glyphicon-indent-left | Try it | |
| glyphicon glyphicon-indent-right | Try it | |
| glyphicon glyphicon-facetime-video | Try it | |
| glyphicon glyphicon-picture | Try it | |
| glyphicon glyphicon-map-marker | Try it | |
| glyphicon glyphicon-adjust | Try it | |
| glyphicon glyphicon-tint | Try it | |
| glyphicon glyphicon-edit | Try it | |
| glyphicon glyphicon-share | Try it | |
| glyphicon glyphicon-check | Try it | |
| glyphicon glyphicon-move | Try it | |
| glyphicon glyphicon-step-backward | Try it | |
| glyphicon glyphicon-fast-backward | Try it | |
| glyphicon glyphicon-backward | Try it | |
| glyphicon glyphicon-play | Try it | |
| glyphicon glyphicon-pause | Try it | |
| glyphicon glyphicon-stop | Try it | |
| glyphicon glyphicon-forward | Try it | |
| glyphicon glyphicon-fast-forward | Try it | |
| glyphicon glyphicon-step-forward | Try it | |
| glyphicon glyphicon-eject | Try it | |
| glyphicon glyphicon-chevron-left | Try it | |
| glyphicon glyphicon-chevron-right | Try it | |
| glyphicon glyphicon-plus-sign | Try it | |
| glyphicon glyphicon-minus-sign | Try it | |
| glyphicon glyphicon-remove-sign | Try it | |
| glyphicon glyphicon-ok-sign | Try it | |
| glyphicon glyphicon-question-sign | Try it | |
| glyphicon glyphicon-info-sign | Try it | |
| glyphicon glyphicon-screenshot | Try it | |
| glyphicon glyphicon-remove-circle | Try it | |
| glyphicon glyphicon-ok-circle | Try it | |
| glyphicon glyphicon-ban-circle | Try it | |
| glyphicon glyphicon-arrow-left | Try it | |
| glyphicon glyphicon-arrow-right | Try it | |
| glyphicon glyphicon-arrow-up | Try it | |
| glyphicon glyphicon-arrow-down | Try it | |
| glyphicon glyphicon-share-alt | Try it | |
| glyphicon glyphicon-resize-full | Try it | |
| glyphicon glyphicon-resize-small | Try it | |
| glyphicon glyphicon-exclamation-sign | Try it | |
| glyphicon glyphicon-gift | Try it | |
| glyphicon glyphicon-leaf | Try it | |
| glyphicon glyphicon-fire | Try it | |
| glyphicon glyphicon-eye-open | Try it | |
| glyphicon glyphicon-eye-close | Try it | |
| glyphicon glyphicon-warning-sign | Try it | |
| glyphicon glyphicon-plane | Try it | |
| glyphicon glyphicon-calendar | Try it | |
| glyphicon glyphicon-random | Try it | |
| glyphicon glyphicon-comment | Try it | |
| glyphicon glyphicon-magnet | Try it | |
| glyphicon glyphicon-chevron-up | Try it | |
| glyphicon glyphicon-chevron-down | Try it | |
| glyphicon glyphicon-retweet | Try it | |
| glyphicon glyphicon-shopping-cart | Try it | |
| glyphicon glyphicon-folder-close | Try it | |
| glyphicon glyphicon-folder-open | Try it | |
| glyphicon glyphicon-resize-vertical | Try it | |
| glyphicon glyphicon-resize-horizontal | Try it | |
| glyphicon glyphicon-hdd | Try it | |
| glyphicon glyphicon-bullhorn | Try it | |
| glyphicon glyphicon-bell | Try it | |
| glyphicon glyphicon-certificate | Try it | |
| glyphicon glyphicon-thumbs-up | Try it | |
| glyphicon glyphicon-thumbs-down | Try it | |
| glyphicon glyphicon-hand-right | Try it | |
| glyphicon glyphicon-hand-left | Try it | |
| glyphicon glyphicon-hand-up | Try it | |
| glyphicon glyphicon-hand-down | Try it | |
| glyphicon glyphicon-circle-arrow-right | Try it | |
| glyphicon glyphicon-circle-arrow-left | Try it | |
| glyphicon glyphicon-circle-arrow-up | Try it | |
| glyphicon glyphicon-circle-arrow-down | Try it | |
| glyphicon glyphicon-globe | Try it | |
| glyphicon glyphicon-wrench | Try it | |
| glyphicon glyphicon-tasks | Try it | |
| glyphicon glyphicon-filter | Try it | |
| glyphicon glyphicon-briefcase | Try it | |
| glyphicon glyphicon-fullscreen | Try it | |
| glyphicon glyphicon-dashboard | Try it | |
| glyphicon glyphicon-paperclip | Try it | |
| glyphicon glyphicon-heart-empty | Try it | |
| glyphicon glyphicon-link | Try it | |
| glyphicon glyphicon-phone | Try it | |
| glyphicon glyphicon-pushpin | Try it | |
| glyphicon glyphicon-usd | Try it | |
| glyphicon glyphicon-gbp | Try it | |
| glyphicon glyphicon-sort | Try it | |
| glyphicon glyphicon-sort-by-alphabet | Try it | |
| glyphicon glyphicon-sort-by-alphabet-alt | Try it | |
| glyphicon glyphicon-sort-by-order | Try it | |
| glyphicon glyphicon-sort-by-order-alt | Try it | |
| glyphicon glyphicon-sort-by-attributes | Try it | |
| glyphicon glyphicon-sort-by-attributes-alt | Try it | |
| glyphicon glyphicon-unchecked | Try it | |
| glyphicon glyphicon-expand | Try it | |
| glyphicon glyphicon-collapse-down | Try it | |
| glyphicon glyphicon-collapse-up | Try it | |
| glyphicon glyphicon-log-in | Try it | |
| glyphicon glyphicon-flash | Try it | |
| glyphicon glyphicon-log-out | Try it | |
| glyphicon glyphicon-new-window | Try it | |
| glyphicon glyphicon-record | Try it | |
| glyphicon glyphicon-save | Try it | |
| glyphicon glyphicon-open | Try it | |
| glyphicon glyphicon-saved | Try it | |
| glyphicon glyphicon-import | Try it | |
| glyphicon glyphicon-export | Try it | |
| glyphicon glyphicon-send | Try it | |
| glyphicon glyphicon-floppy-disk | Try it | |
| glyphicon glyphicon-floppy-saved | Try it | |
| glyphicon glyphicon-floppy-remove | Try it | |
| glyphicon glyphicon-floppy-save | Try it | |
| glyphicon glyphicon-floppy-open | Try it | |
| glyphicon glyphicon-credit-card | Try it | |
| glyphicon glyphicon-transfer | Try it | |
| glyphicon glyphicon-cutlery | Try it | |
| glyphicon glyphicon-header | Try it | |
| glyphicon glyphicon-compressed | Try it | |
| glyphicon glyphicon-earphone | Try it | |
| glyphicon glyphicon-phone-alt | Try it | |
| glyphicon glyphicon-tower | Try it | |
| glyphicon glyphicon-stats | Try it | |
| glyphicon glyphicon-sd-video | Try it | |
| glyphicon glyphicon-hd-video | Try it | |
| glyphicon glyphicon-subtitles | Try it | |
| glyphicon glyphicon-sound-stereo | Try it | |
| glyphicon glyphicon-sound-dolby | Try it | |
| glyphicon glyphicon-sound-5-1 | Try it | |
| glyphicon glyphicon-sound-6-1 | Try it | |
| glyphicon glyphicon-sound-7-1 | Try it | |
| glyphicon glyphicon-copyright-mark | Try it | |
| glyphicon glyphicon-registration-mark | Try it | |
| glyphicon glyphicon-cloud-download | Try it | |
| glyphicon glyphicon-cloud-upload | Try it | |
| glyphicon glyphicon-tree-conifer | Try it | |
| glyphicon glyphicon-tree-deciduous | Try it | |
| glyphicon glyphicon-cd | Try it | |
| glyphicon glyphicon-save-file | Try it | |
| glyphicon glyphicon-open-file | Try it | |
| glyphicon glyphicon-level-up | Try it | |
| glyphicon glyphicon-copy | Try it | |
| glyphicon glyphicon-paste | Try it | |
| glyphicon glyphicon-alert | Try it | |
| glyphicon glyphicon-equalizer | Try it | |
| glyphicon glyphicon-king | Try it | |
| glyphicon glyphicon-queen | Try it | |
| glyphicon glyphicon-pawn | Try it | |
| glyphicon glyphicon-bishop | Try it | |
| glyphicon glyphicon-knight | Try it | |
| glyphicon glyphicon-baby-formula | Try it | |
| glyphicon glyphicon-tent | Try it | |
| glyphicon glyphicon-blackboard | Try it | |
| glyphicon glyphicon-bed | Try it | |
| glyphicon glyphicon-apple | Try it | |
| glyphicon glyphicon-erase | Try it | |
| glyphicon glyphicon-hourglass | Try it | |
| glyphicon glyphicon-lamp | Try it | |
| glyphicon glyphicon-duplicate | Try it | |
| glyphicon glyphicon-piggy-bank | Try it | |
| glyphicon glyphicon-scissors | Try it | |
| glyphicon glyphicon-bitcoin | Try it | |
| glyphicon glyphicon-yen | Try it | |
| glyphicon glyphicon-ruble | Try it | |
| glyphicon glyphicon-scale | Try it | |
| glyphicon glyphicon-ice-lolly | Try it | |
| glyphicon glyphicon-ice-lolly-tasted | Try it | |
| glyphicon glyphicon-education | Try it | |
| glyphicon glyphicon-option-horizontal | Try it | |
| glyphicon glyphicon-option-vertical | Try it | |
| glyphicon glyphicon-menu-hamburger | Try it | |
| glyphicon glyphicon-modal-window | Try it | |
| glyphicon glyphicon-oil | Try it | |
| glyphicon glyphicon-grain | Try it | |
| glyphicon glyphicon-sunglasses | Try it | |
| glyphicon glyphicon-text-size | Try it | |
| glyphicon glyphicon-text-color | Try it | |
| glyphicon glyphicon-text-background | Try it | |
| glyphicon glyphicon-object-align-top | Try it | |
| glyphicon glyphicon-object-align-bottom | Try it | |
| glyphicon glyphicon-object-align-horizontal | Try it | |
| glyphicon glyphicon-object-align-left | Try it | |
| glyphicon glyphicon-object-align-vertical | Try it | |
| glyphicon glyphicon-object-align-right | Try it | |
| glyphicon glyphicon-triangle-right | Try it | |
| glyphicon glyphicon-triangle-left | Try it | |
| glyphicon glyphicon-triangle-bottom | Try it | |
| glyphicon glyphicon-triangle-top | Try it | |
| glyphicon glyphicon-superscript | Try it | |
| glyphicon glyphicon-subscript | Try it | |
| glyphicon glyphicon-menu-left | Try it | |
| glyphicon glyphicon-menu-right | Try it | |
| glyphicon glyphicon-menu-down | Try it | |
| glyphicon glyphicon-menu-up | Try it |
.affix, .affix-top, and
.affix-bottom.
Each class represents a particular state.
You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.
For more information, read our Bootstrap
Affix Tutorial.
Tip: The Affix plugin is often used together with the
Scrollspy plugin.
data-spy="affix" to the element you want to spy on,
and the data-offset-top|bottom="number"
attribute to calculate the position of the scroll.
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll.
When using a single number, the offset is added to both top and bottom directions.
If you only want to control the top or the bottom, use an object, like offset: {top:25}
For multiple offsets, use offset: {top:25, bottom:50}
Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) | Try it |
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) | Try it |
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) | Try it |
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) | Try it |
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) | Try it |
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) | Try it |
| Class | Description | Example |
|---|---|---|
| .alert | Creates an alert message box | Try it |
| .alert-danger | Red alert. Indicates a dangerous or potentially negative action | Try it |
| .alert-dismissible | Indicates a closable alert box.
Together with the .close class, this class is used to close the alert (adds extra padding) | Try it |
| .alert-info | Light-blue alert.Indicates a neutral informative change or action | Try it |
| .alert-link | Used on links inside alerts to provide matching colored links | Try it |
| .alert-success | Green alert. Indicates a successful or positive action | Try it |
| .alert-warning | Yellow alert. Indicates caution should be taken with this action | Try it |
| .close | Styles the close button for the alert message (floats right with a specified font-size, color, etc.) | Try it |
data-dismiss="alert" to a link or a button element to close the
alert message.
| None |
| Method | Description | Try it |
|---|---|---|
| .alert("close") | Closes the alert message | Try it |
| Event | Description | Try it |
|---|---|---|
| close.bs.alert | Occurs when the alert message is about to be closed | Try it |
| closed.bs.alert | Occurs when the alert message has been closed | Try it |
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | Try it |
| .btn-default | Indicates a default/standard button | Try it |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
| .btn-success | Indicates a successful or positive action | Try it |
| .btn-info | Contextual button for informational alert messages | Try it |
| .btn-warning | Indicates caution should be taken with this action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes a button look like a link (will still have button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
| .active | Makes the button appear pressed | Try it |
| .disabled | Makes the button disabled | Try it |
| None |
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | Try it |
| .button("loading") | Disables the button and changes the button text to "loading..." | Try it |
| .button("reset") | Changes the button text to original text (if changed) | Try it |
| .button("string") | Specifies a new button text | Try it |
 |
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect). |
|---|
| Class | Description |
|---|---|
| .carousel | Creates a carousel |
| .slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
| .carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
| .carousel-inner | Adds slides to the carousel |
| .icon-next | Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon |
| .icon-prev | Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon |
| .item | Specifies the content of each slide |
| .left carousel-control | Adds a left button to the carousel, which allows the user to go back between the slides |
| .right carousel-control | Adds a right button to the carousel, which allows the user to go forward between the slides |
| .carousel-caption | Specifies a caption for the carousel |
data-ride="carousel" attribute activates the carousel.
The data-slide and data-slide-to attributes specifies which slide to go to.
The data-slide attribute accepts two values: prev or
next, while
data-slide-to accept numbers.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding | Using JS Using data |
| pause | string, or the boolean false | "hover" | Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover | Using JS Using data |
| wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
| Using JS Using data |
| Method | Description | Try it |
|---|---|---|
| .carousel(options) | Activates the carousel with an option. See options above for valid values | Try it |
| .carousel("cycle") | Goes through the carousel items from left to right | Try it |
| .carousel("pause") | Stops the carousel from going through items | Try it |
| .carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | Try it |
| .carousel("prev") | Goes to the previous item | Try it |
| .carousel("next") | Goes to the next item | Try it |
| Event | Description | Try it |
|---|---|---|
| slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | Try it |
| slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another | Try it |
<div class="carousel-caption"> within each <div
class="item"> to create a caption for each slide:
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | Try it |
| .collapse in | Shows the content | Try it |
| .collapsing | Added when the transition starts, and removed when it finishes | Try it |
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | Try it |
| .collapse("show") | Shows the collapsible element | Try it |
| .collapse("hide") | Hides the collapsible element | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | Try it |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | Try it |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) | Try it |
data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | Try it |
| .dropdown-menu | Builds the dropdown menu | Try it |
| .dropdown-menu-right | Right-aligns a dropdown menu | Try it |
| .dropdown-header | Adds a header inside the dropdown menu | Try it |
| .dropup | Indicates a dropup menu | Try it |
| .disabled | Disables an item in the dropdown menu | Try it |
| .divider | Separates items inside the dropdown menu with a horizontal line | Try it |
data-toggle="dropdown" to a link or a button to toggle a dropdown menu.
| None |
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | Try it |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | Try it |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) | Try it |
.dropdown-submenu class for multi-level dropdowns:
| Class | Description |
|---|---|
| .modal | Creates a modal |
| .modal-content | Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer. |
| .modal-header | Defines the style for the header of the modal |
| .modal-body | Defines the style for the body of the modal |
| .modal-footer | Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center |
| .modal-sm | Specifies a small modal |
| .modal-lg | Specifies a large modal |
| .fade | Adds an animation/transition effect which fades the modal in and out |
data-toggle="modal" and data-target="#modalID" to
any element.
Note: For <a> elements, omit data-target, and use
href="#modalID" instead:
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true |
Specifies whether the modal should have a dark overlay:
| Using JS Using data |
| keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
| Using JS Using data |
| show | boolean | true | Specifies whether to show the modal when initialized | Using JS Using data |
| Method | Description | Try it |
|---|---|---|
| .modal(options) | Activates the content as a modal. See options above for valid values | Try it |
| .modal("toggle") | Toggles the modal | Try it |
| .modal("show") | Opens the modal | Try it |
| .modal("hide") | Hides the modal | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.modal | Occurs when the modal is about to be shown | Try it |
| shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.modal | Occurs when the modal is about to be hidden | Try it |
| hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) | Try it |
data-toggle="popover" activates the popover.
The title attribute specifies the header text of the popover.
The data-content attribute specifies the text that should be displayed inside
the popover's body.
popover() method.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
| Try it |
| container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' | Try it |
| content | string | " | Specifies the text inside the popover's body | Try it |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it | Try it |
| html | boolean | false | Specifies whether to accept HTML tags in the popover:
| Try it |
| placement | string | "right" | Specifies the popover position.
Possible values:
| Try it |
| selector | string, or the boolean false | false | Adds the popover to a specified selector | Try it |
| template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-title. The popover's content will be injected into the .popover-content. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. | ||
| title | string | " | Specifies the header text of the popover | Try it |
| trigger | string | "click" | Specifies how the popover is triggered.
Possible values:
| Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
| Method | Description | Try it |
|---|---|---|
| .popover(options) | Activates the popover with an option. See options above for valid values | Try it |
| .popover("show") | Shows the popover | Try it |
| .popover("hide") | Hides the popover | Try it |
| .popover("toggle") | Toggles the popover | Try it |
| .popover("destroy") | Hides and destroys the popover | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.popover | Occurs when the popover is about to be shown | Try it |
| shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.popover | Occurs when the popover is about to be hidden | Try it |
| hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | Try it |
data-spy="scroll" to the element that should be used as the scrollable
area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name
of the navigation bar (.navbar).
This is to make sure that the navbar
is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
list items
(<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset
from top when calculating the position of scroll.
This is useful when you feel
that the links inside the navbar changes the active state too soon or too early
when jumping to the scrollable elements.
Default is 10 pixels.
Requires relative positioning: The element with
data-spy="scroll"
requires the CSS position property, with a value of "relative"
to work properly.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll | Try it |
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document | Try it |
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy | Try it |
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | Try it |
| .tab-content | Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab", it makes the tab toggleable | Try it |
data-toggle="tab" to each tab, and add a .tab-pane class with a unique ID
for every tab and wrap them in a .tab-content class.
| None |
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.tab | Occurs when the tab is about to be shown. | Try it |
| shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tab | Occurs when the tab is about to be hidden | Try it |
| hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) | Try it |
data-toggle="tooltip" activates the tooltip.
The title attribute specifies the text that should be displayed
inside the tooltip.
tooltip() method.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
| Try it |
| container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' | Try it |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it | Try it |
| html | boolean | false | Specifies whether to accept HTML tags in the tooltip:
| Try it |
| placement | string | "top" | Specifies the tooltip position.
Possible values:
| Try it |
| selector | string, or the boolean false | false | Adds the tooltip to a specified selector | Try it |
| template | string | Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. | ||
| title | string | "" | Specifies the text that should be displayed inside the tooltip | Try it |
| trigger | string | "hover focus" | Specifies how the tooltip is triggered.
Possible values:
| Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
| Method | Description | Try it |
|---|---|---|
| .tooltip(options) | Activates the tooltip with an option. See options above for valid values | Try it |
| .tooltip("show") | Shows the tooltip | Try it |
| .tooltip("hide") | Hides the tooltip | Try it |
| .tooltip("toggle") | Toggles the tooltip | Try it |
| .tooltip("destroy") | Hides and destroys the tooltip | Try it |
| Event | Description | Try it |
|---|---|---|
| show.bs.tooltip | Occurs when the tooltip is about to be shown | Try it |
| shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tooltip | Occurs when the tooltip is about to be hidden | Try it |
| hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) | Try it |