Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.
Make a group of buttons stretch at the same size to span the entire width of its parent.
+ +This only works with <a> elements as the <button> doesn't pick up these styles.
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.
This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
Wrap any text and an optional dismiss button in .alert for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button> element with the data-dismiss="alert" data attribute.
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
-Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.
@@ -520,7 +520,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." rendered as italicized text {% endhighlight %} -Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Easily realign text to components with text alignment classes.
@@ -788,10 +791,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." {% endhighlight %} -
- Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
-
Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.
<section> should be wrapped as inline.
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
<section> should be wrapped as inline.
Add .form-inline for left-aligned and inline-block controls for a compact layout.
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
<section> should be wrapped as inline.
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
-Inputs will only be fully styled if their type is properly declared.
<section> should be wrapped as inline.
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
<a> not impactedThis class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.
While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
<section> should be wrapped as inline.
Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .add-on to prepend or append elements to an <input>.
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
<section> should be wrapped as inline.
{% endhighlight %}
- If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
<section> should be wrapped as inline.
We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
<section> should be wrapped as inline.
{% endhighlight %}
- As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
<section> should be wrapped as inline.
Add classes to an <img> element to easily style images in any project.
Keep in mind that Internet Explorer 8 lacks support for rounded corners.
All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.
All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.
All plugins require the latest version of jQuery to be included.
Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.
If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.
This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template.
Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.
-Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.
Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.
-While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither options are documented here.
Plugins can be included individually, or all at once. Do not attempt to include both. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
-Plugins can be included individually (using bootstrap-*.js original files, or all at once (using bootstrap.js or the minified bootstrap.min.js.
Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the mailing list if you need help.
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.
-Popovers require the tooltip plugin to be included in your version of Bootstrap.
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Toggles push state. Gives the button the appearance that it has been activated.
-You can enable auto toggling of a button by using the data-toggle attribute.
Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
Get base styles and flexible support for collapsible components like accordions and navigation.
-Collapse requires the transitions plugin to be included in your version of Bootstrap.
Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.
Captions are hidden by default and will show up only with viewports greater than 768px wide.
You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.