Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
col-sm-4
col-sm-8
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Use the mark element to highlight text.
Abbreviations
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
Blockquotes
The blockquote element is used to present content from another source:
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.
Description Lists
The dl element indicates a description list:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div
defines a section in a document.
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
Multiple Code Lines
For multiple lines of code, use the pre element:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Contextual Colors
Use the contextual classes to provide "meaning through colors":
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Contextual Backgrounds
Use the contextual background classes to provide "meaning through colors":
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
This paragraph stands out.
This paragraph is smaller.
Left-aligned text.
Right-aligned text.
Center-aligned text.
Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.
No wrap text. No wrap text. No wrap text. No wrap text.
Tip: Try to resize the browser window to see the behaviour of justify and nowrap.
Lowercased text.
Uppercased text.
Capitalized text.
Typography
The WHO was founded in 1948. (normal abbr)
The WHO was founded in 1948. (slightly smaller abbr)
Typography
The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Typography
The class .list-inline places all list items on a single line:
- Coffee
- Tea
- Milk
Typography
Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Tip: Try to resize the browser window to see the behaviour of the description list.
Code
For multiple lines of code, use the pre element:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Basic Table
The .table class adds basic styling (light padding and only horizontal dividers) to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Striped Rows
The .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 |
Bordered Table
The .table-bordered class adds borders to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Rows
The .table-hover class enables a hover state on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Condensed Table
The .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 |
Contextual Classes
Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.
| 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 |
Table
The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
| # | Firstname | Lastname | Age | City | Country |
|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA |
Rounded Corners
The .img-rounded class adds rounded corners to an image (not available in IE8):
Circle
The .img-circle class shapes the image to a circle (not available in IE8):
Thumbnail
The .img-thumbnail class creates a thumbnail of the image:
Image
The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):
Image Gallery
The .thumbnail class can be used to display an image gallery.
The .caption class adds proper padding and a dark grey color to text inside thumbnails.
Click on the images to enlarge them.
Responsive Embed
Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio
Responsive Embed
Create a responsive video and scale it nicely to the parent element.
Aspect ratio 4:3
Aspect ratio 16:9
Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
This is some text.
This is another text.
Well Size
Alerts
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links".
Alerts
The a element with class="close" and data-dismiss="alert" is used to close the alert box.
The alert-dismissible class adds some extra padding to the close button.
Animated Alerts
The .fade and .in classes adds a fading effect when closing the alert message.
Button Styles
Button Tags
Link ButtonButton Sizes
Block Level Buttons
Large Block Level Buttons
Small Block Level Buttons
Button States
Button Group
The .btn-group class creates a button group:
Button Groups - Set Sizes
Add class .btn-group-* to size all buttons in a button group.
Large Buttons:
Default Buttons:
Small Buttons:
Extra Small Buttons:
Vertical Button Group
Use the .btn-group-vertical class to create a vertical button group:
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class:
Justified Button Groups
Nesting Button Groups
Nest button groups to create drop down menus:
Split Buttons
Glyphicon Examples
Envelope icon:
Search icon:
Search icon on a button:
Search icon on a styled button:
Print icon:
Print icon on a styled link button: Print
Badges
News 5Comments 10
Updates 2
Badges on Buttons
Labels
Example New
Example New
Example New
Example New
Example New
Example New
Contextual Label Classes
Contextual classes can be used to color the label.
Default Label Primary Label Success Label Info Label Warning Label Danger LabelBasic Progress Bar
Progress Bar With Label
Colored Progress Bars
The contextual classes colors the progress bars:
Striped Progress Bars
The .progress-bar-striped class adds stripes to the progress bars:
Animated Progress Bar
The .active class animates the progress bar:
Stacked Progress Bars
Create a stacked progress bar by placing multiple bars into the same div with class .progress:
Pagination
The .pagination class provides pagination links:
Pagination - Active State
Add class .active to let the user know which page he/she is on:
Pagination - Disabled State
Add class .disabled if a page for some reason is disabled:
Pagination - Sizing
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
Large:
Default:
Small:
Breadcrumbs
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
Pager
The .pager class provides previous and next buttons (links):
Pager
The .previous and .next classes align each link to the sides of the page:
Basic List Group
- First item
- Second item
- Third item
List Group With Badges
- New 12
- Deleted 5
- Warnings 3
List Group With Linked Items
Active Item in a List Group
List Group With a Disabled Item
List Group With Contextual Classes
- First item
- Second item
- Third item
- Fourth item
Linked Items With Contextual Classes
Move the mouse over the linked items to see the hover effect:
List Group With Custom Content
First List Group Item Heading
List Group Item Text
Second List Group Item Heading
List Group Item Text
Third List Group Item Heading
List Group Item Text
Basic Panel
Panel Heading
Panel Footer
Panel Group
The panel-group class clears the bottom-margin. Try to remove the class and see what happens.
Panels with Contextual Classes
Dropdowns
The .dropdown class is used to indicate a dropdown menu.
Use the .dropdown-menu class to actually build the dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".
Dropdowns
The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:
Dropdowns
The .dropdown-header class is used to add headers inside the dropdown menu:
Dropdowns
The .dropdown-header class is used to add headers inside the dropdown menu:
Dropdowns
Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:
Dropdowns
The .dropup class makes the dropdown menu expand upwards instead of downwards:
Dropdowns
The .dropdown class is used to indicate a dropdown menu.
Use the .dropdown-menu class to actually build the dropdown menu.
Simple Collapsible
Click on the button to toggle between showing and hiding content.
Simple Collapsible
Simple collapsibleSimple Collapsible
Click on the button to toggle between showing and hiding content.
Collapsible Panel
Click on the collapsible panel to open and close it.
Collapsible List Group
Click on the collapsible panel to open and close it.
- One
- Two
- Three
Accordion Example
Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
Inline List
Tabs
Note: This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.
Tabs With Dropdown Menu
Pills
Vertical Pills
Use the .nav-stacked class to vertically stack pills:
Vertical Pills
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Pills With Dropdown Menu
Centered Tabs
To center/justify the tabs and pills, use the .nav-justified class. Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered).
Centered Pills
Dynamic Tabs
To make the tabs toggleable, add the 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.
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Dynamic Pills
To make the tabs toggleable, add the data-toggle="pill" 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.
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Menu 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Menu 3
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.