Wrap inline snippets of code with <code>
.
<section>
should be wrapped as inline.Use <pre>
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
Heads up! Be sure to keep code within <pre>
tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable
class which will set a max-height of 350px and provide a y-axis scrollbar.
Wrap inline snippets of code with <code>
.
<section>
should be wrapped as inline.Use <pre>
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
Heads up! Be sure to keep code within <pre>
tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable
class which will set a max-height of 350px and provide a y-axis scrollbar.
Individual form controls receive styling, but without any required base class on the <form>
or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
Included with Bootstrap are three optional form layouts for common use cases.
Add .form-search
to the form and .search-query
to the <input>
for an extra-rounded text input.
Add .form-inline
for left-aligned labels and inline-block controls for a compact layout.
Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
.form-horizontal
to the form.control-group
.control-label
to the label.controls
for proper alignmentExamples of standard form controls supported in an example form layout.
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.
Requires the use of a specified type
at all times.
Form control which supports multiple lines of text. Change rows
attribute as necessary.
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Add the .inline
class to a series of checkboxes or radios for controls appear on the same line.
Use the default option or specify a multiple="multiple"
to show multiple options at once.
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Add text or buttons before or after any text-based input. Do note that select
elements are not supported here.
Wrap an .add-on
and an input
with one of two classes to prepend or append text to an input.
Use both classes and two instances of .add-on
to prepend and append an input.
Instead of a <span>
with text, use a .btn
to attach a button (or two) to an input.
Use relative sizing classes like .input-large
or match your inputs to the grid column sizes using .span*
classes.
Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large
will increase the padding and font-size of an input.
Use .span1
to .span12
for inputs that match the same sizes of the grid columns.
For multiple grid inputs per line, use the .controls-row
modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.
Present data in a form that's not editable without using actual form markup.
End a form with a group of actions (buttons). When placed within a .form-horizontal
, the buttons will automatically indent to line up with the form controls.
Inline and block level support for help text that appears around form controls.
Provide feedback to users or visitors with basic feedback states on form controls and labels.
We remove the default outline
styles on some form controls and apply a box-shadow
in its place for :focus
.
Add the disabled
attribute on an input to prevent user input and trigger a slightly different look.
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group
.
Get base styles and flexible support for collapsible components like accordions and navigation.
* Requires the Transitions plugin to be included.
Using the collapse plugin, we built a simple accordion style widget:
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
Just add data-toggle="collapse"
and a data-target
to element to automatically assign control of a collapsible element. The data-target
attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse
to the collapsible element. If you'd like it to default open, add the additional class in
.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector"
. Refer to the demo to see this in action.
Enable manually with:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-parent=""
.
Name | type | default | description |
---|---|---|---|
parent | selector | false | If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) |
toggle | boolean | true | Toggles the collapsible element on invocation |
Activates your content as a collapsible element. Accepts an optional options object
.
Toggles a collapsible element to shown or hidden.
Shows a collapsible element.
Hides a collapsible element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Event | Description |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). |
hide | This event is fired immediately when the hide method has been called. |
hidden | This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). |
Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
You can activate individual tabs in several ways:
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab"
or data-toggle="pill"
on an element. Adding the nav
and nav-tabs
classes to the tab ul
will apply the Bootstrap tab styling.
Activates a tab element and content container. Tab should have either a data-target
or an href
targeting a container node in the DOM.
Event | Description |
---|---|
show | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |