Components Bootstrap PDF

Components Bootstrap
http://getbootstrap.com/2.3.2/components.html[21/10/2014 14:51:41]
Bootstrap
Heads up! These docs are for v2.3.2, which is no longer officially supported. Check out the latest version of
Bootstrap!
Button groups
Button dropdowns
Navs
Navbar
Breadcrumbs
Pagination
Labels and badges
Typography
Thumbnails
Alerts
Progress bars
Media object
Components

Dozens of reusable components built to provide navigation, alerts,

popovers, and more.

Free Email Marketing Unlimited Contacts, Tracking & Custom Segmentation.

ads via Carbon
Dropdowns

Misc
Dropdown menus
Example
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown J avaScript plugin.
1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
2. <li><a tabindex="-1" href="#">Action</a></li>
3. <li><a tabindex="-1" href="#">Another action</a></li>
4. <li><a tabindex="-1" href="#">Something else here</a></li>
5. <li class="divider"></li>
6. <li><a tabindex="-1" href="#">Separated link</a></li>
7. </ul>
Markup
Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the
dropdown menu within .dropdown , or another element that declares position: relative; . Then just create the
menu.
1. <div class="dropdown">
2. 
3. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
4. <li><a tabindex="-1" href="#">Action</a></li>
5. <li><a tabindex="-1" href="#">Another action</a></li>
6. <li><a tabindex="-1" href="#">Something else here</a></li>
8. <li><a tabindex="-1" href="#">Separated link</a></li>
9. </ul>
10. </div>
Action
Another action
Something else here
Separated link
Example
Options
Align menus to the right and add include additional levels of dropdowns.
Aligning the menus
Add .pull-right to a .dropdown-menu to right align the dropdown menu.
1. <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
2. ...
3. </ul>
Disabled menu options
Add .disabled to a <li> in the dropdown to disable the link.
1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
2. <li><a tabindex="-1" href="#">Regular link</a></li>
3. <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
4. <li><a tabindex="-1" href="#">Another link</a></li>
5. </ul>
Sub menus on dropdowns
Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions.
Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.
1. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
2. ...
Regular link
Disabled link
Another link
Example
Default Dropup Left submenu
Action
Another action
Something else here
More options
Action
Another action
Something else here
More options
Action
Another action
Something else here
More options
Example
3. <li class="dropdown-submenu">
4. <a tabindex="-1" href="#">More options</a>
5. <ul class="dropdown-menu">
6. ...
7. </ul>
8. </li>
9. </ul>
Button groups
Examples
Two basic options, along with two more specific variations.
Single button group
Wrap a series of buttons with .btn in .btn-group .
1. <div class="btn-group">
2. <button class="btn">Left</button>
3. <button class="btn">Middle</button>
4. <button class="btn">Right</button>
5. </div>
Multiple button groups
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
1. <div class="btn-toolbar">
3. ...
4. </div>
5. </div>
Left Middle Right
Example
1 2 3 4 5 6 7 8
Example
Left Middle Right
1 2 3 4 5 6 7 8
Vertical button groups
Make a set of buttons appear vertically stacked rather than horizontally.
1. <div class="btn-group btn-group-vertical">
2. ...
3. </div>
Checkbox and radio favors
Button groups can also function as radios, where only one button may be active, or checkboxes, where any number
of buttons may be active. View the J avaScript docs for that.
Dropdowns in button groups
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for
proper rendering.
Button dropdown menus
Overview and examples
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu
markup.
2. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
3. Action
4. <span class="caret"></span>
5. </a>
Example
Action Action Danger Warning Success Info Inverse
Example
Action Action Danger Warning Success Info Inverse
7. 
8. </ul>
9. </div>
Works with all button sizes
Button dropdowns work at any size: .btn-large , .btn-small , or .btn-mini .
Requires JavaScript
Button dropdowns require the Bootstrap dropdown plugin to function.
In some caseslike mobiledropdown menus will extend outside the viewport. You need to resolve the alignment
manually or with custom J avaScript.
Split button dropdowns
Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard
action on the left and a dropdown toggle on the right with contextual links.
2. <button class="btn">Action</button>
3. <button class="btn dropdown-toggle" data-toggle="dropdown">
5. </button>
8. </ul>
9. </div>
Sizes
Utilize the extra button classes .btn-mini , .btn-small , or .btn-large for sizing.
Large button
Small button Mini button
Example
Action Action Danger Warning Success Info
Inverse
Example
Example
Large button
Small button Mini button
Action Action Danger Warning Success Info
Inverse
2. <button class="btn btn-mini">Action</button>
3. <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
5. </button>
8. </ul>
9. </div>
Dropup menus
Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of
.dropdown-menu . It will flip the direction of the .caret and reposition the menu itself to move from the bottom up
instead of top down.
1. <div class="btn-group dropup">
2. <button class="btn">Dropup</button>
3. <button class="btn dropdown-toggle" data-toggle="dropdown">
5. </button>
8. </ul>
9. </div>
Nav: tabs, pills, and lists
Lightweight defaults Same markup, different classes
All nav components heretabs, pills, and listsshare the same base markup and styles through the .nav class.
Large action
Small action
Mini action
Dropup Right dropup
Example
Large action
Small action
Mini action
Dropup Right dropup
Basic tabs
Take a regular <ul> of links and add .nav-tabs :
1. <ul class="nav nav-tabs">
2. <li class="active">
3. <a href="#">Home</a>
4. </li>
5. <li><a href="#">...</a></li>
6. <li><a href="#">...</a></li>
7. </ul>
Basic pills
Take that same HTML, but use .nav-pills instead:
1. <ul class="nav nav-pills">
4. </li>
5. <li><a href="#">...</a></li>
6. <li><a href="#">...</a></li>
7. </ul>
Disabled state
For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain
clickable, however, unless you remove the href attribute. Alternatively, you could implement custom J avaScript to
prevent those clicks.
2. ...
3. <li class="disabled"><a href="#">Home</a></li>
Home Profile Messages
Example
Home Profile Messages
Example
Clickable link Clickable link Disabled link
Example
4. ...
5. </ul>
Component alignment
To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the
specified direction.
Stackable
As tabs and pills are horizontal by default, just add a second class, .nav-stacked , to make them appear vertically
stacked.
Stacked tabs
1. <ul class="nav nav-tabs nav-stacked">
2. ...
3. </ul>
Stacked pills
1. <ul class="nav nav-pills nav-stacked">
2. ...
3. </ul>
Home
Profile
Messages
Example
Home
Profile
Messages
Example
Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns J avaScript plugin.
Tabs with dropdowns
2. <li class="dropdown">
3. <a class="dropdown-toggle"
4. data-toggle="dropdown"
5. href="#">
6. Dropdown
7. <b class="caret"></b>
8. </a>
10. 
11. </ul>
12. </li>
13. </ul>
Pills with dropdowns
3. <a class="dropdown-toggle"
4. data-toggle="dropdown"
5. href="#">
6. Dropdown
8. </a>
10. 
11. </ul>
12. </li>
13. </ul>
Home Help Dropdown
Example
Home Help Dropdown
Example
Nav lists
A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the
Finder in OS X.
Example nav list
Take a list of links and add class="nav nav-list" :
1. <ul class="nav nav-list">
2. <li class="nav-header">List header</li>
3. <li class="active"><a href="#">Home</a></li>
4. <li><a href="#">Library</a></li>
5. ...
6. </ul>
Note For nesting within a nav list, include class="nav nav-list" on any nested <ul> .
Horizontal dividers
Add a horizontal divider by creating an empty list item with the class .divider , like so:
1. <ul class="nav nav-list">
2. ...
4. ...
5. </ul>
LIST HEADER
Home
Library
Applications
ANOTHER LIST HEADER
Profile
Settings
Help
Example
Tabbable nav
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in
four styles: top (default), right, bottom, and left.
Tabbable example
To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content .
1. <div class="tabbable"> 
3. <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
4. <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
5. </ul>
6. <div class="tab-content">
7. <div class="tab-pane active" id="tab1">
8. <p>I'm in Section 1.</p>
9. </div>
10. <div class="tab-pane" id="tab2">
11. <p>Howdy, I'm in Section 2.</p>
12. </div>
13. </div>
14. </div>
Fade in tabs
To make tabs fade in, add .fade to each .tab-pane .
Requires jQuery plugin
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on
the J avaScript docs page.
Tabbable in any direction
Tabs on the bottom
Flip the order of the HTML and add a class to put tabs on the bottom.
Section 1 Section 2 Section 3
I'm in Section 1.
Example
I'm in Section A.
Example
1. <div class="tabbable tabs-below">
3. ...
4. </div>
6. ...
7. </ul>
8. </div>
Tabs on the left
Swap the class to put tabs on the left.
1. <div class="tabbable tabs-left">
3. ...
4. </ul>
6. ...
7. </div>
8. </div>
Tabs on the right
Swap the class to put tabs on the right.
Section 1 Section 2 Section 3
Section 1
Section 2
Section 3
I'm in Section A.
Example
Section 1
Section 2
Section 3
I'm in Section A.
Example
1. <div class="tabbable tabs-right">
3. ...
4. </ul>
6. ...
7. </div>
8. </div>
Navbar
Basic navbar
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place
one anywhere within a .container , which sets the width of your site and content.
1. <div class="navbar">
2. <div class="navbar-inner">
3. <a class="brand" href="#">Title</a>
4. <ul class="nav">
5. <li class="active"><a href="#">Home</a></li>
6. <li><a href="#">Link</a></li>
8. </ul>
9. </div>
10. </div>
Navbar components
Brand
A simple link to show your brand or project name only requires an anchor tag.
Title
Home Link Link
Example
Example
1. <a class="brand" href="#">Project name</a>
Nav links
Nav items are simple to add via unordered lists.
1. <ul class="nav">
4. </li>
7. </ul>
You can easily add dividers to your nav links with an empty list item and a simple class. J ust add this between links:
1. <ul class="nav">
2. ...
3. <li class="divider-vertical"></li>
4. ...
5. </ul>
Forms
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default
form, include .navbar-form and either .pull-left or .pull-right to properly align it.
Title
Home Link Link
Example
Home Link Link
Example
Submit
Example
Submit
1. <form class="navbar-form pull-left">
2. <input type="text" class="span2">
3. <button type="submit" class="btn">Submit</button>
4. </form>
Search form
For a more customized search form, add .navbar-search to the form and .search-query to the input for
specialized styles in the navbar.
1. <form class="navbar-search pull-left">
2. <input type="text" class="search-query" placeholder="Search">
3. </form>
Component alignment
Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS
float in the specified direction.
Using dropdowns
Add dropdowns and dropups to the nav with a bit of markup and the dropdowns J avaScript plugin.
1. <ul class="nav">
3. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
4. Account
6. </a>
8. ...
9. </ul>
10. </li>
11. </ul>
Visit the J avaScript dropdowns documentation for more markup and information on calling dropdowns.
Text
Wrap strings of text in an element with .navbar-text , usually on a <p> tag for proper leading and color.
Example
Search
Optional display variations
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar .
Fixed to top
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px
padding to the <body> . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
1. <div class="navbar navbar-fixed-top">
2. ...
3. </div>
Fixed to bottom
Add .navbar-fixed-bottom instead.
1. <div class="navbar navbar-fixed-bottom">
2. ...
3. </div>
Static top navbar
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top . Unlike the
.navbar-fixed-top class, you do not need to change any padding on the body .
1. <div class="navbar navbar-static-top">
2. ...
3. </div>
Example
Title
Home Link Link
Example
Title
Home Link Link
Title
Home Link Link
Example
Responsive navbar
To implement a collapsing responsive navbar, wrap your navbar content in a containing div,
.nav-collapse.collapse , and add the navbar toggle button, .btn-navbar .
1. <div class="navbar">
2. <div class="navbar-inner">
3. <div class="container">
4.
5. 
6. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
7. <span class="icon-bar"></span>
10. </a>
11.
12. 
13. <a class="brand" href="#">Project name</a>
14.
15. 
16. <div class="nav-collapse collapse">
17. 
18. </div>
19.
20. </div>
21. </div>
22. </div>
Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
Inverted variation
Modify the look of the navbar by adding .navbar-inverse .
Title
Example
Title
Example
1. <div class="navbar navbar-inverse">
2. ...
3. </div>
Breadcrumbs
Examples
A single example shown as it might be displayed across multiple pages.
1. <ul class="breadcrumb">
2. <li><a href="#">Home</a> <span class="divider">/</span></li>
3. <li><a href="#">Library</a> <span class="divider">/</span></li>
4. <li class="active">Data</li>
5. </ul>
Pagination Two options for paging through content
Standard pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily
scalable, and provides large click areas.
1. <div class="pagination">
Home
Home / Library
Home / Library / Data
Example
1 2 3 4 5
Example
2. <ul>
3. <li><a href="#">Prev</a></li>
4. <li><a href="#">1</a></li>
5. <li><a href="#">2</a></li>
6. <li><a href="#">3</a></li>
7. <li><a href="#">4</a></li>
8. <li><a href="#">5</a></li>
9. <li><a href="#">Next</a></li>
10. </ul>
11. </div>
Options
Disabled and active states
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the
current page.
2. <ul>
3. <li class="disabled"><a href="#">«</a></li>
4. <li class="active"><a href="#">1</a></li>
5. ...
6. </ul>
7. </div>
You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining
intended styles.
2. <ul>
3. <li class="disabled"><span>«</span></li>
4. <li class="active"><span>1</span></li>
5. ...
6. </ul>
7. </div>
Sizes
Fancy larger or smaller pagination? Add .pagination-large , .pagination-small , or .pagination-mini for
additional sizes.
1 2 3 4 5
Example
1. <div class="pagination pagination-large">
2. <ul>
3. ...
4. </ul>
5. </div>
7. <ul>
8. ...
9. </ul>
10. </div>
11. <div class="pagination pagination-small">
12. <ul>
13. ...
14. </ul>
15. </div>
16. <div class="pagination pagination-mini">
17. <ul>
18. ...
19. </ul>
20. </div>
Alignment
Add one of two optional classes to change the alignment of pagination links: .pagination-centered and
.pagination-right .
1. <div class="pagination pagination-centered">
2. ...
3. </div>
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
Example
1 2 3 4 5
Example
1 2 3 4 5
Example
1. <div class="pagination pagination-right">
2. ...
3. </div>
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple
sites like blogs or magazines.
Default example
By default, the pager centers links.
1. <ul class="pager">
2. <li><a href="#">Previous</a></li>
3. <li><a href="#">Next</a></li>
4. </ul>
Aligned links
Alternatively, you can align each link to the sides:
2. <li class="previous">
3. <a href="#">← Older</a>
4. </li>
5. <li class="next">
6. <a href="#">Newer →</a>
7. </li>
8. </ul>
Previous Next
Example
Older Newer
Example
Optional disabled state
Pager links also use the general .disabled utility class from the pagination.
2. <li class="previous disabled">
3. <a href="#">← Older</a>
4. </li>
5. ...
6. </ul>
Labels and badges
Labels
Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Badges
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Older Newer
Example
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
Easily collapsible
For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists
within.
Typographic components
Hero unit
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy
sites.
1. <div class="hero-unit">
2. <h1>Heading</h1>
3. <p>Tagline</p>
4. <p>
5. <a class="btn btn-primary btn-large">
6. Learn more
7. </a>
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
Learn more
Example
8. </p>
9. </div>
Page header
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the
h1 's default small , element as well most other components (with additional styles).
1. <div class="page-header">
2. <h1>Example page header <small>Subtext for header</small></h1>
3. </div>
Thumbnails Grids of images, videos, text, and more
Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Example page header Subtext for header
Example
Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into
thumbnails.
Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Action Action
Thumbnail label
Action Action
Thumbnail label
Action Action
Why use thumbnails
Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results,
retail products, portfolios, and much more. They can be links or static content.
Simple, fexible markup
Thumbnail markup is simplea ul with any number of li elements is all that is required. It's also super flexible,
allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
Lastly, the thumbnails component uses existing grid system classeslike .span2 or .span3 for control of
thumbnail dimensions.
Markup
As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default
setup for linked images:
1. <ul class="thumbnails">
2. <li class="span4">
3. <a href="#" class="thumbnail">
4. <img data-src="holder.js/300x200" alt="">
5. </a>
6. </li>
7. ...
8. </ul>
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we
swap the <a> for a <div> like so:
1. <ul class="thumbnails">
2. <li class="span4">
3. <div class="thumbnail">
4. <img data-src="holder.js/300x200" alt="">
5. <h3>Thumbnail label</h3>
6. <p>Thumbnail caption...</p>
7. </div>
8. </li>
9. ...
10. </ul>
More examples
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
Alerts Styles for success, warning, and error messages
Default alert
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
1. <div class="alert">
2. <button type="button" class="close" data-dismiss="alert">×</button>
3. <strong>Warning!</strong> Best check yo self, you're not looking too good.
4. </div>
Dismiss buttons
Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#"
for the dismissal of alerts when using an <a> tag.
1. <a href="#" class="close" data-dismiss="alert">×</a>
Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs.
When using <button> , you must include type="button" or your forms may not submit.
Dismiss alerts via JavaScript
Use the alerts jQuery plugin for quick and easy dismissal of alerts.
Options
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block .
1. <div class="alert alert-block">
3. <h4>Warning!</h4>
Warning! Best check yo self, you're not looking too good.
Example
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Example
4. Best check yo self, you're not...
5. </div>
Contextual alternatives
Add optional classes to change an alert's connotation.
Error or danger
1. <div class="alert alert-error">
2. ...
3. </div>
Success
1. <div class="alert alert-success">
2. ...
3. </div>
Information
1. <div class="alert alert-info">
2. ...
3. </div>
Oh snap! Change a few things up and try submitting again.
Example
Well done! You successfully read this important alert message.
Example
Heads up! This alert needs your attention, but it's not super important.
Example
Progress bars For loading, redirecting, or action status
Examples and markup
Basic
Default progress bar with a vertical gradient.
1. <div class="progress">
2. <div class="bar" style="width: 60%;"></div>
3. </div>
Striped
Uses a gradient to create a striped effect. Not available in IE7-8.
1. <div class="progress progress-striped">
3. </div>
Animated
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
1. <div class="progress progress-striped active">
3. </div>
Stacked
Place multiple bars into the same .progress to stack them.
Example
Example
Example
1. <div class="progress">
2. <div class="bar bar-success" style="width: 35%;"></div>
3. <div class="bar bar-warning" style="width: 20%;"></div>
4. <div class="bar bar-danger" style="width: 10%;"></div>
5. </div>
Options
Additional colors
Progress bars use some of the same button and alert classes for consistent styles.
1. <div class="progress progress-info">
2. <div class="bar" style="width: 20%"></div>
3. </div>
4. <div class="progress progress-success">
6. </div>
7. <div class="progress progress-warning">
9. </div>
10. <div class="progress progress-danger">
12. </div>
Striped bars
Similar to the solid colors, we have varied striped progress bars.
Example
Example
Example
1. <div class="progress progress-info progress-striped">
3. </div>
4. <div class="progress progress-success progress-striped">
6. </div>
7. <div class="progress progress-warning progress-striped">
9. </div>
10. <div class="progress progress-danger progress-striped">
12. </div>
Browser support
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not
supported in IE7-9 or older versions of Firefox.
Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
Media object
Abstract object styles for building various types of components (like blog
comments, Tweets, etc) that feature a left- or right-aligned image alongside
textual content.
Default example
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Example
1. <div class="media">
2. <a class="pull-left" href="#">
3. <img class="media-object" data-src="holder.js/64x64">
4. </a>
5. <div class="media-body">
6. <h4 class="media-heading">Media heading</h4>
7. ...
8.
9. 
11. ...
12. </div>
13. </div>
14. </div>
Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
tempus viverra turpis.
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Example
1. <ul class="media-list">
2. <li class="media">
3. <a class="pull-left" href="#">
4. <img class="media-object" data-src="holder.js/64x64">
5. </a>
6. <div class="media-body">
7. <h4 class="media-heading">Media heading</h4>
8. ...
9.
10. 
12. ...
13. </div>
14. </div>
15. </li>
16. </ul>
Miscellaneous Lightweight utility components
Wells
Use the well as a simple effect on an element to give it an inset effect.
1. <div class="well">
2. ...
3. </div>
Optional classes
Control padding and rounded corners with two optional modifier classes.
Media heading
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Look, I'm in a well!
Example
Example
1. <div class="well well-large">
2. ...
3. </div>
1. <div class="well well-small">
2. ...
3. </div>
Close icon
Use the generic close icon for dismissing content like modals and alerts.
1. <button class="close">×</button>
iOS devices require an href="#" for click events if you would rather use an anchor.
1. <a class="close" href="#">×</a>
Helper classes
Simple, focused classes for small display or behavior tweaks.
.pull-left
Float an element left
1. class="pull-left"
1. .pull-left {
2. float: left;
3. }
.pull-right
Float an element right
Example
Example
1. class="pull-right"
1. .pull-right {
2. float: right;
3. }
.muted
Change an element's color to #999
1. class="muted"
1. .muted {
2. color: #999;
3. }
.clearfx
Clear the float on any element
1. class="clearfix"
1. .clearfix {
2. *zoom: 1;
3. &:before,
4. &:after {
5. display: table;
6. content: "";
7. }
8. &:after {
9. clear: both;
10. }
11. }
Designed and built with all the love in the world by @mdo and @fat.
Code licensed under Apache License v2.0, documentation under CC BY 3.0.
Glyphicons Free licensed under CC BY 3.0.
Blog Issues Changelog

Components Bootstrap PDF

Uploaded by

Copyright:

Available Formats

Components Bootstrap PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Components Bootstrap PDF

Uploaded by

Copyright:

Available Formats

Components Bootstrap

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.