ChadCollins.com Documentation
The ChadCollins.com Framework was designed to be one of the most balanced, well structured, and ideal solutions available to developers. Please feel free to contact as if you have any further questions regarding this theme. We're here to help!
Don't forget to rate us Five Stars!
If you like our theme and appreciate our hard work please rate us Five Stars! Feel the need to rate us lower? Please contact us first and we will do absolutely everything we can to solve the problem. Happy customers are our number one priority!
Mastering the Basics
The ChadCollins.com theme was developed using several libraries and platforms. It's vital that you understand a great deal about these technologies as it will allow you to fully understand the techniques, methodologies, and structures found in this theme. Fully understanding Bootstrap and the other platforms listed below is vital.
JQuery API Documentation
http://api.jquery.com/Bootstrap Documentation
http://getbootstrap.com/css/LESS Documentation
http://lesscss.org/#Important Bootstrap Modifications
A new "XL" column has been added default Bootstrap Grid system.
The ChadCollins.com theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within ChadCollins.com.
Three additional colors have been added to the contextual system
.btn-alert .btn-system .btn-dark The ChadCollins.com theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within ChadCollins.com.
New elements, inputs, navigations, and more have been added
.btn-alert .btn-system .btn-dark The ChadCollins.com theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within ChadCollins.com.
ChadCollins.com has taken everything you love about bootstraps contextual system and extended it. Adding additional colors and extending its use to many new elements.
The Cliff Notes:
- Color system based on Bootstraps beloved "contextual" color system
- Three new contextual classes have been added - Alert System Dark
- These contextual classes have been extended to nearly all elements, inputs, and widgets.
-
Each contextual has an additional two shades to select from
.light .dark - To reduce CSS bloat individual contextuals can be easily disabled (see LESS section of Docs)
The Colors/Contextuals:
Primary
Success
Info
Warning
Danger
Alert
System
Dark
ChadCollins.com - Folder Structure
Folder Explanation
ChadCollins.com/theme/
- assets/ - email-templates/ - landing-page/ - vendor/| Directory Folder | File Overview |
|---|---|
assets/ |
The Assets directory folder contains Core resources specifically created for the ChadCollins.com theme. This includes the themes primary stylesheet/less, fonts, images, and custom plugins. |
email-templates/ |
The email templates directory folder contains a series of premade email templates which do not require theme resources outside of its own folder. It also contains a series of PSDS to help customize the email templates to your needs. A demonstration can be seen here |
landing-page/ |
The Landing page directory folder contains all of the resources required to generate the home-page seen here. We plan to implement more landing pages in the future. |
vendor/ |
The Vendor directory folder contains all of the third party resources which the ChadCollins.com theme uses. This includes the jQuery/jQuery UI libraries and all plugins except those which are considered "Core". You can read more about what files are not included and reside in the utility.js(Core) in the javascript section of the documentation. |
Folder Details - theme/assets/
ChadCollins.com/theme/assets
- admin-tools/ - fonts/ - img/ - js/ - skin/| Directory Folder | File Overview |
|---|---|
admin-tools/ |
The Admin Tools folder contains custom made plugins too large to be included in the themes core. After all no one likes excessive bloat. Currently this folder only contains the "Admin Forms" plugin and its related styles. However, we have plans to add additional custom plugins in the future. All other currently implemented plugins (adminpanels, dock,etc) have been moved into the themes Core(utility.js) as their overall file size is very small. Key Points
|
fonts/ |
The "fonts" folder contains a COPY of all fonts and font icon libraries used through out the theme. By default the theme includes Glyphicons Halflings, and Font Awesome libraries in theme.css. The only time you will utilize the fonts in this folder is if you wish to use one of the included(but not activated) font libraries. They have not been included by default to prevent massive css bloat. An overview of what font libraries can be viewed here
Key Points
|
img/ |
The "img" folder is pretty self explanatory. It contains an organized directory of avatars, sprites, and stock images that are used through out the theme. All images have been properly compressed, analyzed for bloat, and are required for theme demonstrative purposes. The images found inside of plugins/ should not be removed.
Key Points
|
js/ |
The "js" folder contains all of the demo and core javascript files required for theme functionality. This includes demo javascript which you may not need. It's a good idea to read more about this folder in the javascript tutorial.
Key Points
|
skin/ |
The "skin" folder contains all of the Less files required to generate the themes primary stylesheet. The Less structure follows a "Parent/Child" inheritance pattern which allows for endless customization and modularity. To get the most out of the ChadCollins.com theme it is Highly recommended that you learn more about the themes Less structure and ways to manipulate/optimize it. Learn more in the tutorials section of this documentation.
Key Points
|
Folder Details - theme/vendor/
ChadCollins.com/theme/assets
- bootstrap/ - jquery/ - plugins/| Directory Folder | File Overview |
|---|---|
bootstrap/ |
The "bootstrap" folder is not used, and is for reference only. It contains all of the uncompressed javascript files which have been minified and merged into the themes core. The folder remains simply to preserve the original, and in use javascript files which can be found minified in utility.js
Key Points
|
jquery/ |
The "jquery" folder contains a local copy of the jQuery and jQuery UI libraries. Nearly every computer will have these files already cached making them virtually weightless. For that reason it is recommended that you serve these files via Googles CDN services and not via your own server. These libraries are required for proper theme functionality.
Key Points
|
plugins/ |
The "plugins" folder contains all 3rd party plugins used throughout the theme. While many of the plugins are required for demonstrative use, none of them are required for core theme functionality. Documentation and use examples can be found in the plugins section of the documentation.
Key Points
|
ChadCollins.com - Javascript Structure
Important Javascript Folders
ChadCollins.com/theme/
- assets/utility - vendor/plugins - landing-page/ - vendor/| Directory Folder | File Overview |
|---|---|
assets/ |
The Assets directory folder contains Core resources specifically created for the ChadCollins.com theme. This includes the themes primary stylesheet/less, fonts, images, and custom plugins. |
email-templates/ |
The email templates directory folder contains a series of premade email templates which do not require theme resources outside of its own folder. It also contains a series of PSDS to help customize the email templates to your needs. A demonstration can be seen here |
landing-page/ |
The Landing page directory folder contains all of the resources required to generate the home-page seen here. We plan to implement more landing pages in the future. |
vendor/ |
The Vendor directory folder contains all of the third party resources which the ChadCollins.com theme uses. This includes the jQuery/jQuery UI libraries and all plugins except those which are considered "Core". You can read more about what files are not included and reside in the utility.js(Core) in the javascript section of the documentation. |
Folder Details - theme/assets/
ChadCollins.com/theme/assets
- admin-tools/ - fonts/ - img/ - js/ - skin/| Directory Folder | File Overview |
|---|---|
admin-tools/ |
The Admin Tools folder contains custom made plugins too large to be included in the themes core. After all no one likes excessive bloat. Currently this folder only contains the "Admin Forms" plugin and its related styles. However, we have plans to add additional custom plugins in the future. All other currently implemented plugins (adminpanels, dock,etc) have been moved into the themes Core(utility.js) as their overall file size is very small. Key Points
|
fonts/ |
The "fonts" folder contains a COPY of all fonts and font icon libraries used through out the theme. By default the theme includes Glyphicons Halflings, and Font Awesome libraries in theme.css. The only time you will utilize the fonts in this folder is if you wish to use one of the included(but not activated) font libraries. They have not been included by default to prevent massive css bloat. An overview of what font libraries can be viewed here
Key Points
|
img/ |
The "img" folder is pretty self explanatory. It contains an organized directory of avatars, sprites, and stock images that are used through out the theme. All images have been properly compressed, analyzed for bloat, and are required for theme demonstrative purposes. The images found inside of plugins/ should not be removed.
Key Points
|
js/ |
The "js" folder contains all of the demo and core javascript files required for theme functionality. This includes demo javascript which you may not need. It's a good idea to read more about this folder in the javascript tutorial.
Key Points
|
skin/ |
The "skin" folder contains all of the Less files required to generate the themes primary stylesheet. The Less structure follows a "Parent/Child" inheritance pattern which allows for endless customization and modularity. To get the most out of the ChadCollins.com theme it is Highly recommended that you learn more about the themes Less structure and ways to manipulate/optimize it. Learn more in the tutorials section of this documentation.
Key Points
|
Folder Details - theme/vendor/
ChadCollins.com/theme/assets
- jquery/ - plugins/| Directory Folder | File Overview |
|---|---|
jquery/ |
The "jquery" folder contains a local copy of the jQuery and jQuery UI libraries. Nearly every computer will have these files already cached making them virtually weightless. For that reason it is recommended that you serve these files via Googles CDN services and not via your own server. These libraries are required for proper theme functionality.
Key Points
|
plugins/ |
The "plugins" folder contains all 3rd party plugins used throughout the theme. While many of the plugins are required for demonstrative use, none of them are required for core theme functionality. Documentation and use examples can be found in the plugins section of the documentation.
Key Points
|
ChadCollins.com Typography - General
Text Contextuals
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles. All base contextual colors available. Does Not use light or dark contextual shades.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non.
Etiam porta sem malesuada magna mollis euismod risus.
Donec ullamcorper nulla non metus auctor fringilla.
Etiam porta sem malesuada magna mollis euismod blandit.
Donec ullamcorper nulla non metus auctor fringilla malesuada.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
<p class="text-alert">...</p>
<p class="text-system">...</p>
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
h1. Bootstrap heading Secondary text |
h2. Bootstrap heading Secondary text |
h3. Bootstrap heading Secondary text |
h4. Bootstrap heading Secondary text |
h5. Bootstrap heading Secondary text |
h6. Bootstrap heading Secondary text |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
Inline
Wrap inline snippets of code with <code>.
<section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
User input
Use the <kbd> to indicate input that is typically entered via keyboard.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Basic block
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>
<pre><p>Sample text here...</p></pre>
You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.
Variables
For indicating variables use the <var> tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Sample output
For indicating blocks sample output from a program use the <samp> tag.
This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>ChadCollins.com Typography - Lists
Unordered
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Unstyled
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Inline
Place all list items on a single line with display: inline-block; and some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Description
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Horizontal description
Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Auto-truncating
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.
ChadCollins.com Typography - Labels
Available variations
Add any of the below mentioned modifier classes to change the appearance of a label.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-alert">Alert</span>
<span class="label label-system">System</span>
Labels in Headers
Example heading Label
Example heading Label
Example heading Label
Example heading Label
<h3>Example heading <span class="label label-primary">Label</span></h3>Have tons of labels?
Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.
Badge Variations
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
Cross-browser compatibility
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
Adapts to active nav states
Built-in styles are included for placing badges in active states in pill navigations.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>ChadCollins.com Typography - Dropcaps
Default DropCap
For an attention getting text style which will help divide your content text.
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
<p class="dropcap dropcap-default dropcap-fill">Lorem ipsum</p>
<p class="dropcap dropcap-muted dropcap-fill">Lorem ipsum</p>
DropCap Contextuals
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
<p class="dropcap dropcap-default">Lorem ipsum</p>
<p class="dropcap dropcap-primary">Lorem ipsum</p>
<p class="dropcap dropcap-success">Lorem ipsum</p>
<p class="dropcap dropcap-info">Lorem ipsum</p>
<p class="dropcap dropcap-warning">Lorem ipsum</p>
<p class="dropcap dropcap-danger">Lorem ipsum</p>
<p class="dropcap dropcap-alert">Lorem ipsum</p>
<p class="dropcap dropcap-system">Lorem ipsum</p>
<p class="dropcap dropcap-dark">Lorem ipsum</p>DropCap Fill
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
<p class="dropcap dropcap-default dropcap-fill">Lorem ipsum</p>
<p class="dropcap dropcap-muted dropcap-fill">Lorem ipsum</p>
Fill Contextuals
Testibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.felis euismod semper eget lacinia odio sem nec elit.
<p class="dropcap dropcap-default dropcap-fill">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-primary">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-success">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-info">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-warning">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-danger">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-alert">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-system">Lorem ipsum</p>
<p class="dropcap dropcap-fill dropcap-dark">Lorem ipsum</p>ChadCollins.com Typography - BlockQuotes
Default blockquote
For quoting blocks of content from another source within your document. Wrap <blockquote> around any
HTML as the quote. For straight quotes, we recommend a <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Blockquote Source
Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Blockquote Reverse
Add .blockquote-reverse for a blockquote with right-aligned content.
<blockquote class="blockquote-reverse">
...
</blockquote>Blockquote Options
Note: All base contextual colors available. Does not use light or dark contextual shades.
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-primary"
BlockQuote Thin:
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-primary blockquote-thin"
BlockQuote Rounded:
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-primary blockquote-rounded"
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-alert blockquote-reverse"
BlockQuote Thin:
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-thin blockquote-reverse"
BlockQuote Rounded:
Lorem ipsum dolor sit amet, consectetur adipisci.
Someone famous
class="blockquote-rounded blockquote-reverse"
ChadCollins.com Typography - Media Objects
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 media
The default media displays 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.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.Nested 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.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.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.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.
Media alignment
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Top aligned media
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.
Middle aligned media
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.
Bottom aligned media
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.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
-
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.
Nested 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.Nested 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.Nested 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.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>ChadCollins.com Elements - Buttons
Button tags
Use the button classes on an <a>, <button>, or <input> element.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Navbar-specific usage
While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.
Links acting as buttons
If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".
Cross-browser rendering
As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.
Button Contextuals
Use any of the available button classes to quickly create a styled button.
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-alert">Alert</button>
<button type="button" class="btn btn-system">System</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>Conveying meaning to assistive technologies
Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.
Contextual Shades
Use with any of the available button contextual classes to quickly create a slightly different shaded contextual button.
<button type="button" class="btn btn-primary light">Light</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary dark">Dark</button>Button Options
Use any of the available button classes to quickly create a styled button.
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default btn-rounded">Round</button>
<button type="button" class="btn btn-success btn-gradient">Gradient</button>Sizes
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
<button type="button" class="btn btn-primary btn-xs">Tiny button</button>
<button type="button" class="btn btn-default btn-xs">Tiny button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>Block Style Buttons
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Button Active
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.
Button element
No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Anchor element
Add the .active class to <a> buttons.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Button disabled
Make buttons look unclickable by fading them back with opacity.
Button element
Add the disabled attribute to <button> buttons.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Cross-browser compatibility
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.
Anchor element
Add the .disabled class to <a> buttons.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
Link functionality caveat
This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
ChadCollins.com - Button Dropdowns
Plugin dependency
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Split button dropdowns
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Sizing
Button dropdowns work with buttons of all sizes.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>Dropup variation
Trigger dropdown menus above elements by adding .dropup to the parent.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>ChadCollins.com - Dropdowns
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>Alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>Headers
Add a header to label sections of actions in any dropdown menu.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
</ul>Divider
Add a divider to separate series of links in a dropdown menu.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
<li role="presentation" class="divider"></li>
</ul>Disabled menu items
Add .disabled to a <li> in the dropdown to disable the link.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>Button dropdowns
Turn a button into a dropdown toggle with some basic markup changes. Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Split Button dropdowns
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Button Sizing
Button dropdowns work with buttons of all sizes.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>Dropup variation
Trigger dropdown menus above elements by adding .dropup to the parent.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>ChadCollins.com Elements - Alerts
Contextual Class Required
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
Wrap any text and an optional dismiss button in .alert and any one of the contextual classes (e.g., .alert-success) for basic alert messages.
<div class="alert alert-primary" role="alert">...</div>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-alert" role="alert">...</div>
<div class="alert alert-system" role="alert">...</div>
<div class="alert alert-dark" role="alert">...</div>
<div class="alert alert-default" role="alert">...</div>Contextual Shades
Use the .pastel .light .dark utility classes to change the shade of an alerts contextual color.
<div class="alert alert-primary dark" role="alert">
<div class="alert alert-primary" role="alert">
<div class="alert alert-primary light" role="alert">
<div class="alert alert-primary pastel" role="alert">Gradient Alert
Use the .bg-gradient utility class to quickly change an alerts contextual class to a gradient variation.
<div class="alert alert-primary dark bg-gradient" role="alert">Bordered Alert
Use the .alert-border-* utility class to quickly add a border to one side of the alert.
<div class="alert alert-primary alert-border-left" role="alert">
<div class="alert alert-primary alert-border-right" role="alert">
<div class="alert alert-primary alert-border-top" role="alert">
<div class="alert alert-primary alert-border-bottom" role="alert">Alert Sizes
Use the .alert-sm or any other utility sizing class to quickly modify the dimensions of an alert dialog.
<div class="alert alert-info alert-micro" role="alert">
<div class="alert alert-info alert-small" role="alert">
<div class="alert alert-info" role="alert">
Dismissible Alert
Build on any alert by adding an optional .alert-dismissible and close button. Requires alerts JavaScript plugin
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Ensure proper behavior across all devices
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
Alerts with Links
Use the .alert-link utility class to quickly provide matching colored links within any alert.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>ChadCollins.com Elements - Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Cross-browser compatibility
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.
Basic example
Default progress bar.
Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70%
</div>
</div>Bar Contextuals
Progress bars use some of the same button and alert classes for consistent styles.
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-alert" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-system" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Bar Sizes
Adding one of the classes below will transform the progress bar to a more desired size.
Note: progress bar sizes should be applied to the wrapper .progress, not .progress-bar
<div class="progress progress-bar-xxs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-bar-xs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-bar-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-bar-lg">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Striped Bar
Uses a gradient to create a striped effect. Not available in IE8.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>Animated Bar
Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Stacked Bars
Place multiple bars into the same .progress to stack them.
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-info" style="width: 20%">
<span class="sr-only">25% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-success" style="width: 10%">
<span class="sr-only">15% Complete (danger)</span>
</div>
</div>ChadCollins.com - Tables
Basic example
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
...
</table>Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>Contextual Rows
Use contextual classes to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="primary">...</tr>
<tr class="success">...</tr>
<tr class="info">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="alert">...</tr>
<tr class="system">...</tr>
<tr class="dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="primary">...</td>
<td class="success">...</td>
<td class="info">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="alert">...</td>
<td class="system">...</td>
<td class="dark">...</td>
</tr>Bordered table
Add .table-bordered for borders on all sides of the table and cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>Hover rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-hover">
...
</table>Condensed table
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed">
...
</table>Responsive table
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>ChadCollins.com - 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.
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Disabled and active states
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
<nav><ul class="pagination pagination-sm">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-lg">...</ul></nav>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.
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Aligned links
Alternatively, you can align each link to the sides:
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Optional disabled state
Pager links also use the general .disabled utility class from the pagination.
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>ChadCollins.com - Listgroups
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Basic Example
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Badges
Add the badges component to any list group item and it will automatically be positioned on the right.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Linked items
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Disabled items
Add .disabled to a .list-group-item to gray it out to appear disabled.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Contextual classes
Use contextual classes to style list items, default or linked. Also includes .active state.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Basic Panels
Basic example
By default, all the .panel does is apply some basic border and padding to contain some content.
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>Panel with heading
Easily add a heading container to your panel with .panel-heading.
<div class="panel">
<div class="panel-heading">
<span class="panel-title">Panel title</span>
</div>
<div class="panel-body">
Panel content
</div>
</div>Panel with footer
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
<div class="panel">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Panel with All Addons
Easily add a content container to your panel with .panel-menu.
<div class="panel">
<div class="panel-heading">
<span class="panel-icon"><i class="fa fa-pencil"></i></span>
<span class="panel-title">Panel title</span>
</div>
<div class="panel-menu">
<button class="btn btn-default">Menu Button</button>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Panel with Table
Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="panel">
<!-- Panel Heading -->
<div class="panel-heading">Panel heading</div>
<!-- Panel Body with text -->
<div class="panel-body">
<p>...</p>
</div>
<!-- Panel Body with Table (no padding) -->
<div class="panel-body pn">
<table class="table">
</div>
...
</table>
</div>Panel with List Group
Easily include full-width list groups within any panel.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div class="panel">
<!-- Panel Heading -->
<div class="panel-heading">Panel heading</div>
<!-- Panel Body -->
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Contextual Headings
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual border classes.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
<div class="panel panel-alert">...</div>
<div class="panel panel-system">...</div>
<div class="panel panel-dark">...</div>Contextual Styles
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Border Top Style
<div class="panel panel-primary panel-border top">
<div class="panel-body">
Panel Content
</div>
</div>Body Border Style
<div class="panel panel-primary">
<div class="panel-body border">
Panel Content
</div>
</div>Body Fill Style
<div class="panel panel-primary">
<div class="panel-body fill">
Panel Content
</div>
</div>Body Fill+Border Style
<div class="panel panel-primary">
<div class="panel-body border fill">
Panel Content
</div>
</div>Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding. - Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like
.rowand.col-xs-4are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. - Columns create gutters (gaps between column content) via
padding. That padding is offset in rows for the first and last column via negative margin on.rows. - The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4. - If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any
.col-md-*class to an element will not only affect its styling on medium devices but also on large devices if a.col-lg-*class is not present.
Look to the examples for applying these principles to your code.
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
Example: Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Example: Fluid container
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Example: Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Example: Mobile, tablet, desktop
Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Example: Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Responsive column resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
Resize your viewport or check it out on your phone for an example.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Offsetting columns
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Nesting columns
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>ChadCollins.com Forms - Inputs
Horizontal form
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Inline form
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Supported controls
Examples of standard form controls supported in an example form layout.
Inputs
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.
Type declaration required
Inputs will only be fully styled if their type is properly declared.
<input type="text" class="form-control" placeholder="Text input">Input groups
To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.
Textarea
Form control which supports multiple lines of text. Change rows attribute as necessary.
<textarea class="form-control" rows="3"></textarea>Checkboxes and radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.
Default (stacked)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Inline checkboxes and radios
Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Selects
Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>For <select> controls with the multiple attribute, multiple options are shown by default.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Static control
When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Control sizing
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
Height sizing
Create taller or shorter form controls that match button sizes.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Horizontal form group sizes
Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Help text
Block level help text for form controls.
Associating help text with form controls
Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>ChadCollins.com Forms - Input Groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
Textual <input>s only
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
Tooltips & popovers in input groups require special setting
When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
Always add labels
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
Basic example
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>Sizing
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Buttons with dropdowns
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Segmented buttons
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>ChadCollins.com Forms - States
Focus state
We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.
Disabled state
Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Disabled fieldsets
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
Caveat about link functionality of <a>
By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser compatibility
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Readonly state
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Validation states
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
Conveying validation state to assistive technologies
Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using aria-describedby (see the example in the following section). In the case of an error, you could also use the aria-invalid="true" attribute on the form control.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>With optional icons
You can also add optional feedback icons with the addition of .has-feedback and the right icon.
Feedback icons only work with textual <input class="form-control"> elements.
Icons, labels, and input groups
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
Conveying the icon's meaning to assistive technologies
To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.
Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using .sr-only text and aria-describedby) has been included for illustrative purposes.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Optional icons in horizontal and inline forms
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Optional icons with hidden .sr-only labels
If you use the .sr-only class to hide a form control's <label> (rather than using other labelling options, such as the aria-label attribute), Bootstrap will automatically adjust the position of the icon once it's been added.
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>ChadCollins.com Forms - Checkboxes
Basic Checkbox
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="checkbox-custom">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>
<div class="checkbox-custom fill">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Checkbox Contextuals
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="checkbox-custom checkbox-primary"></div>
<div class="checkbox-custom checkbox-success"></div>
<div class="checkbox-custom checkbox-info"></div>
<div class="checkbox-custom checkbox-warning"></div>
<div class="checkbox-custom checkbox-danger"></div>
<div class="checkbox-custom checkbox-alert"></div>
<div class="checkbox-custom checkbox-system"></div>
<div class="checkbox-custom checkbox-dark"></div>Disabled Checkbox
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="checkbox-custom checkbox-disabled">
<input disabled type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>
<div class="checkbox-custom checkbox-disabled fill">
<input disabled type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Basic Radio
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="radio-custom">
<input type="radio" id="UniqueID">
<label for="UniqueID">Label</label>
</div>
<div class="radio-custom fill">
<input type="radio" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Radio Contextuals
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="radio-custom radio-primary"></div>
<div class="radio-custom radio-success"></div>
<div class="radio-custom radio-info"></div>
<div class="radio-custom radio-warning"></div>
<div class="radio-custom radio-danger"></div>
<div class="radio-custom radio-alert"></div>
<div class="radio-custom radio-system"></div>
<div class="radio-custom radio-dark"></div>Disabled Radio
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
<div class="radio-custom radio-disabled">
<input disabled type="radio" id="UniqueID">
<label for="UniqueID">Label</label>
</div>
<div class="radio-custom radio-disabled fill">
<input disabled type="radio" id="UniqueID">
<label for="UniqueID">Label</label>
</div>ChadCollins.com Forms - Switches
Basic Switch
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form.
<div class="switch">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Switch Contextuals
Use Bootstrap's predefined grid classes to align labels and groups..
<div class="switch switch-inline">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Round Switch
<div class="switch round">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Round Contextuals
Use Bootstrap's predefined grid classes to align labels and groups..
<div class="switch round switch-inline">
<input type="checkbox" id="UniqueID">
<label for="UniqueID">Label</label>
</div>Bootstrap Modal
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Modal Example
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Make modals accessible
Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal's DOM elements. Additionally, you may give a description of your modal dialog with aria-describedby on .modal.
Modal sizes
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Via data attributes
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>Via JavaScript
Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean or the string 'static'
|
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false |
This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself. If a remote URL is provided, content will be loaded one time via jQuery's Copy
|
Methods
.modal(options)
Activates your content as a modal. Accepts an optional options object.
$('#myModal').modal({
keyboard: false
}).modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
$('#myModal').modal('toggle').modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
$('#myModal').modal('show').modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
$('#myModal').modal('hide')Events
Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event Type | Description |
|---|---|
| show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| loaded.bs.modal | This event is fired when the modal has loaded content using the remote option. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})Bootstrap Tabs
Markup
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, while adding the nav and nav-pills classes will apply pill styling.
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.
<div role="tab-block">
<!-- Tabs Navigation -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab Content Panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>Usage
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})You can activate individual tabs in several ways:
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)Fade effect
To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>Methods
$().tab
Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
})
</script>Events
When showing a new tab, the events fire in the following order:
hide.bs.tab(on the current active tab)show.bs.tab(on the to-be-shown tab)hidden.bs.tab(on the previous active tab, the same one as for thehide.bs.tabevent)shown.bs.tab(on the newly-active just-shown tab, the same one as for theshow.bs.tabevent)
If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.
| Event Type | Description |
|---|---|
| show.bs.tab | 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.bs.tab | 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. |
| hide.bs.tab | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
| hidden.bs.tab | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})Bootstrap Accordian (collapse.js)
Accordion Example
Extend the default collapse behavior to create an accordion with the panel component.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<span class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</span>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit...
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<span class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</span>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit...
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingThree">
<span class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</span>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit...
</div>
</div>
</div>
</div>Collapse Example
Click the buttons below to show and hide another element via class changes:
.collapsehides content.collapsingis applied during transitions.collapse.inshows content
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>Usage
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapsehides the content.collapse.inshows the content.collapsingis added when the transition starts, and removed when it finishes
These classes can be found in component-animations.less.
Via data attributes
Just add data-toggle="collapse" and a data-target to the 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.
Via JavaScript
Enable manually with:
$('.collapse').collapse()Options
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 a selector is provided, then 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) |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Methods
.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object.
$('#myCollapsible').collapse({
toggle: false
}).collapse('toggle')
Toggles a collapsible element to shown or hidden.
.collapse('show')
Shows a collapsible element.
.collapse('hide')
Hides a collapsible element.
Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
| Event Type | Description |
|---|---|
| show.bs.collapse | This event fires immediately when the show instance method is called. |
| shown.bs.collapse | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.collapse |
This event is fired immediately when the hide method has been called.
|
| hidden.bs.collapse | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})Bootstrap Popovers
Basic Popover
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>Popover Directions
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>Dismiss on Next Click
Use the focus trigger to dismiss popovers on the next click that the user makes.
Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>Usage
Enable popovers via JavaScript:
$('#example').popover(options)Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the popover |
| container | string | false | false |
Appends the popover to a specific element. Example: |
| content | string | function | '' |
Default content value if |
| delay | number | object | 0 |
Delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: |
| html | boolean | false |
Insert HTML into the popover. If false, jQuery's |
| placement | string | function | 'right' |
How to position the popover - top | bottom | left | right | auto.
When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The |
| selector | string | false |
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example |
| template | string | template right |
'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
Base HTML to use when creating the popover. The popover's |
| title | string | function | '' |
Default title value if |
| trigger | string | 'click' |
How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
| viewport | string | object | { selector: 'body', padding: 0 } |
Keeps the popover within the bounds of this element. Example: |
Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Methods
$().popover(options)
Initializes popovers for an element collection.
.popover('show')
Reveals an element's popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
$('#element').popover('show').popover('hide')
Hides an element's popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a "manual" triggering of the popover.
$('#element').popover('hide').popover('toggle')
Toggles an element's popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a "manual" triggering of the popover.
$('#element').popover('toggle').popover('destroy')
Hides and destroys an element's popover.
$('#element').popover('destroy')Events
| Event Type | Description |
|---|---|
| show.bs.popover | This event fires immediately when the show instance method is called. |
| shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.popover | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})Popover Guidelines
Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed.
Opt-in functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all popovers on a page would be to select them by their data-toggle attribute:
$(function () {
$('[data-toggle="popover"]').popover()
})Popovers on disabled elements require wrapper elements
To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.
Multiple-line links
Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.
Bootstrap Tooltips
Markup
The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Title">Tooltip</button>
Paragraph Example
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim.</p>
Directional Example
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip |
| container | string | false | false |
Appends the tooltip to a specific element. Example: |
| delay | number | object | 0 |
Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
| html | boolean | false | Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
| placement | string | function | 'top' |
How to position the tooltip - top | bottom | left | right | auto. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example. |
| template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML to use when creating the tooltip. The tooltip's
The outermost wrapper element should have the |
| title | string | function | '' |
Default title value if If a function is given, it will be called with its |
| trigger | string | 'hover focus' | How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
| viewport | string | object | { selector: 'body', padding: 0 } |
Keeps the tooltip within the bounds of this element. Example: |
Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
Methods
$().tooltip(options)
Attaches a tooltip handler to an element collection.
.tooltip('show')
Reveals an element's tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
$('#element').tooltip('show').tooltip('hide')
Hides an element's tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.
$('#element').tooltip('hide').tooltip('toggle')
Toggles an element's tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.
$('#element').tooltip('toggle').tooltip('destroy')
Hides and destroys an element's tooltip.
$('#element').tooltip('destroy')Events
| Event Type | Description |
|---|---|
| show.bs.tooltip | This event fires immediately when the show instance method is called. |
| shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
Misc
Opt-in functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. See the Usage section for javascript code required to initilize tooltips..
Tooltips on disabled elements require wrapper elements
To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.
Tooltips in button groups and input groups require special setting
When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).
Bootstrap Carousel
A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Accessibility issue
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
Transition animations not supported in Internet Explorer 8 & 9
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
Initial active element required
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
Optional captions
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.
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>Usage
Multiple carousels
Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.
Via data attributes
Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
Via JavaScript
Call carousel manually with:
$('.carousel').carousel()Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
| Name | type | default | description |
|---|---|---|---|
| interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
| wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
| keyboard | boolean | true | Whether the carousel should react to keyboard events. |
Methods
.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.
$('.carousel').carousel({
interval: 2000
}).carousel('cycle')
Cycles through the carousel items from left to right.
.carousel('pause')
Stops the carousel from cycling through items.
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
.carousel('prev')
Cycles to the previous item.
.carousel('next')
Cycles to the next item.
Events
Bootstrap's carousel class exposes two events for hooking into carousel functionality.
Both events have the following additional properties:
direction: The direction in which the carousel is sliding (either"left"or"right").relatedTarget: The DOM element that is being slid into place as the active item.
| Event Type | Description |
|---|---|
| slide.bs.carousel | This event fires immediately when the slide instance method is invoked. |
| slid.bs.carousel | This event is fired when the carousel has completed its slide transition. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})ChadCollins.com - Navbar
Navbar Position
The primary navbar always requires the default .navbar class.
| Class | Description |
|---|---|
| Static: | <header class="navbar">..</header> |
| Fixed: | <header class="navbar navbar-fixed-top">..</header> |
Navbar Skins
The navbar accepts all of the same contextual classes that any other element does. Which makes switching colors simple and easy.
<!-- Navbar Default Skin -->
<header class="navbar bg-light">..</header>
| Class | Description |
|---|---|
| Primary: | <header class="navbar bg-primary">..</header> |
| Success: | <header class="navbar bg-success">..</header> |
| Info: | <header class="navbar bg-info">..</header> |
| Warning: | <header class="navbar bg-warning">..</header> |
| Danger: | <header class="navbar bg-danger">..</header> |
| Alert: | <header class="navbar bg-alert">..</header> |
| System: | <header class="navbar bg-system">..</header> |
| Dark: | <header class="navbar bg-dark">..</header> |
Navbar HTML
Go To Full HTML TemplateChadCollins.com - Sidebar
Sidebar Positioning
The sidebar does not require any additional markup unless a fixed position is desired. Static is default positioning is the default.
| Class | Description |
|---|---|
| Static: | <aside id="sidebar_left" class="">..</aside> |
| Fixed: | <aside id="sidebar_left" class="affix">..</aside> |
Sidebar Class States
The sidebar can have its state set by adding additional classes to the body tag or by javascript options.
| Class | Description | |
|---|---|---|
| .sb-l-o (default) | This class sets the left sidebar to be full open/expanded | <body class="sb-l-o"> |
| .sb-l-m | This class sets the left sidebar to be open/minified | <body class="sb-l-m"> |
| .sb-l-c | This class sets the left sidebar to be closed/hidden | <body class="sb-l-c"> |
| .sb-r-o | This class sets the right sidebar to be open/expanded | <body class="sb-r-o"> |
| .sb-r-c (default) | This class sets the right sidebar to be closed/hidden | <body class="sb-r-c"> |
Sidebar Skins
The sidebar has one additional light/white skin. The dark skin is default and requires no other markup. More sidebar skins will be added in the future.
<!-- Sidebar Default Skin (no extra classes required) -->
<aside id="sidebar_left" class="">..</aside>
| Class | Description |
|---|---|
| Dark Skin: | <aside id="sidebar_left" class="">..</aside> |
| Light Skin: | <aside id="sidebar_left" class="sidebar-light">..</aside> |
| Lighter Skin: | <aside id="sidebar_left" class="sidebar-light light">..</aside> |
Sidebar HTML
Go To Full HTML TemplateChadCollins.com - Topbar
Topbar Positioning
The Topbar does not require any additional markup unless a fixed position is desired. Static is default positioning is the default.
| Class | Description |
|---|---|
| Static: | <header id="topbar" class=""> </header> |
| Fixed: | <header id="topbar" class="affix"> </header> |
| Hidden: | <header id="topbar" class="hidden"> </header> |
Topbar Breadcrumbs
<!-- Start: Topbar -->
<header id="topbar">
<!-- Topbar Left: Breadcrumbs Area -->
<div class="topbar-left">
<ol class="breadcrumb">
<li class="crumb-active">
<a href="home.html">Home</a>
</li>
<li class="crumb-icon">
<a href="home.html">
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="crumb-link">
<a href="index.html">Home</a>
</li>
<li class="crumb-trail">Home</li>
</ol>
</div>
<!-- Topbar Right: Misc Area, great for nav buttons -->
<div class="topbar-right"> ... </div>
</header>
<!-- End: Topbar -->
Topbar Navigation
<!-- Start: Topbar -->
<header id="topbar" class="ph10">
<!-- Topbar Left: Navigation Area -->
<div class="topbar-left">
<ul class="nav nav-list nav-list-topbar pull-left">
<li class="active">
<a href="example.html">Nav Item 1</a>
</li>
<li>
<a href="example.html">Nav Item 2</a>
</li>
<li>
<a href="example.html">Nav Item 3</a>
</li>
<li>
<a href="example.html">Nav Item 4</a>
</li>
<li>
<a href="example.html">Nav Item 5</a>
</li>
</ul>
</div>
<!-- Topbar Right: Misc Area, great for nav buttons -->
<div class="topbar-right"> ... </div>
</header>
<!-- End: Topbar -->
Header Options
Header - Fixed
<nav class="navbar navbar-fixed-top">..</header>
- Requires class "navbar-fixed-top"
Header - Static
<nav class="navbar">..</header>
- Remove class "navbar-fixed-top"
Header Skins
The navbar accepts all of the same contextual classes that any other element does. Which makes switching colors simple and easy.
<nav class="navbar bg-light">..</header>
<nav class="navbar bg-primary">..</header>
<nav class="navbar bg-success">..</header>
<nav class="navbar bg-info">..</header>
<nav class="navbar bg-warning">..</header>
<nav class="navbar bg-danger">..</header>
<nav class="navbar bg-alert">..</header>
<nav class="navbar bg-system">..</header>
<nav class="navbar bg-dark">..</header>
<nav class="navbar bg-light">..</header>
Refer to color system or header templates for an example of available colors
Header Templates
Topbar Options
Topbar - Hidden
<div id="topbar" class="hidden">..</div>
- Requires "hidden" class
Note: To hide this element you can also remove all of its HTML, or grant it the style "display: none" in custom.css
Topbar - Fixed
<div id="topbar" class="affix">..</div>
- Requires "affix" class
Topbar - Static
<div id="topbar" class="">..</div>
- Default Topbar setting. No class needed.
HTML Helper Classes
Helper classes can assist you in changing the appearance of an element quickly and easily directly through its HTML, rather than CSS. This prevents having to create endless custom classes when making routine changes such as Padding, Margin, or Borders.
Examples of common Helper Classes:
.pn{padding:0 !important}
.p5{padding: 5px !important}
.p10{padding: 10px !important}
.pl5{padding-left: 5px !important}
.pr5{padding-right: 5px !important}
.pt5{padding-top: 5px !important}
.pb5{padding-bottom: 5px !important}
.mn{margin: 0 !important}
.m5{margin: 5px !important}
.m10{margin: 10px !important}
.ml5{margin-left: 5px !important}
.mr5{margin-right: 5px !important}
.mt5{margin-top: 5px !important}
.mb5{margin-bottom: 5px !important}
For a complete list of helper HTML Helper Classes please visit the themes primary CSS file
Icons
Understanding Font Based Icons
All of the icons used in ChadCollins.com were created using font based icon libraries. The icons are created with small html snippets rather than with the use of an <img> tag. This allows you to select from hundreds of icons by simply changing a class name. Another great feature of font icons is that you can style the icons using common text based styling. Such as color, font-size, etc. ChadCollins.com includes Six separate font-icon libraries.
Available Icon Libraries
A Generous Library Free of Charge
The ChadCollins.com theme includes the entire Glyphicon PRO icon set, a $59 value, free of charge! The Glyphicon PRO icon set expands on the popular Halfling set by including over 500 detailed icons. However, one must consider the large file size before commiting them to a project.
Note: If you choose this library as your primary icon set you should consider removing the Glyphicons Halfling set included in Bootstrap 3.
Stylesheet Requirements
<link href="assets/fonts/glyphicons-pro/glyphicons-pro.css" type="text/css">
Usage
<span class="glyphicons glypicons-pencil></span>- Basic
<span class="glyphicons glypicons-pencil text-success></span>- With text color
Helper Classes
Sizes.glyphicon-2x .glyphicon-3x .glyphicon-4x .glyphicon-5x
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use ChadCollins.com Color System. Any color can be used, not just the ones above.
http://www.glyphicons.com/
Bootstrap 3 Library of choice
Most ChadCollins.com icon styling was done specifically for Glyphicons Pro and Glyphicons Hafling(Bootstraps icon set). The primary reason for this is because Glyphicon icons were created in 1:1 proportions. Meaning that if an icon has a width of 32px it will always have a length of 32px, and vica-versa. This makes them the ideal icon when creating size sensitive items because there values can be so easily predicted.
Stylesheet Requirements
The Glyphicon Icon library is included in Bootstrap 3 which helps maintain fast loading times as less file request are having to be made.
Usage
<span class="glyphicon glyphicon-pencil></span>- Basic
<span class="glyphicon glyphicon-pencil text-success></span>- With text color
Helper Classes
Sizes.glyphicons-2x .glyphicons-3x .glyphicons-4x .glyphicons-5x
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use ChadCollins.com Color System. Any color can be used, not just the ones above.
http://getbootstrap.com/components/#glyphicons-glyphs
Great Icon Library
You will find Font Awesome Icons used through out the ChadCollins.com. They are found in abundance in buttons and panel titles as they are lightweight, flexible, and offer a great selection of icons to choose from. However, for vital theme elements Glyphicons were used. An explanation can be found in the Glyphicon Tab.
Note: To quicken page loading times the Font Awesome Icon Library is pulled from Bootstraps CDN. This means less page requests and a high cached chance. If you prefer to host these files yourself you will need to alter alter the file urls in your pages header (CSS option #2 below).
Stylesheet Requirements
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> - CDN
<link href="assets/fonts/font-awesome/font-awesome.css" type="text/css"> - Only use one
Usage
<i class="fa fa-pencil></i>- Basic
<i class="fa fa-pencil fa-3x text-success></i>- With Helper Classes
Helper Classes
Sizes.fa-2x .fa-3x .fa-4x .fa-5x
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use ChadCollins.com Color System. Any color can be used, not just the ones above.
http://fortawesome.github.io/Font-Awesome/
Beautiful Icon Library
IconSweets2 is a premium icon library that boast some of the most beautiful icons on the internet. The ChadCollins.com theme includes this icon set free of charge. However, if you wish to use this icon set on a production website you must purchase an exclusive license fee from the author.
Stylesheet Requirements
<link href="assets/fonts/iconsweets/iconsweets.css" type="text/css">
Usage
<span class="iconsweets icon-chart-graph></span>- Basic
<span class="iconsweets icon-chart-graph text-success></span>- With Helper Classes
Helper Classes
Sizes.iconsweets-2x .iconsweets-3x .iconsweets-4x .iconsweets-5x
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use ChadCollins.com Color System. Any color can be used, not just the ones above.
http://iconsweets2.com/
Large But Fantastic Library
Icomoon is another fantastic library for admin icons. They were created using pixel perfect 1:1 ratios and contain great detail. The files required are a little large and have no public CDN method of delivery. For this reason they are used rarely, and included more as a convenience.
Stylesheet Requirements
<link href="assets/fonts/icomoon/icomoon.css" type="text/css">
Usage
<span class="imoon icon-pencil></span>- Basic
<span class="imoon icon-pencil text-success></span>- With text color
Helper Classes
Sizes.imoon-2x .imoon-3x .imoon-4x .imoon-5x
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use ChadCollins.com Color System. Any color can be used, not just the ones above.
http://icomoon.io/
Social Media Icons Done Right!
Zocail is a Font Icon set which provides us with a great, and very complete set of social media buttons and icons. You can find a full example of their included icons on the buttons.html page
Stylesheet Requirements
<link href="assets/fonts/zocial/zocial.css" type="text/css">
Usage
<button class="zocial twitter> Twitter </button>- Full Text Button
<button class="zocial icon twitter> Twitter </button>- Just Icon Button
http://www.zocial.smcllns.com/
Animations
Everything you need to get things moving.
ChadCollins.com includes a CSS based animation library which allows a developer to easily add transitions and effects to virtually any html element. Simply include the required CSS stylesheet on the page you desire animations and then follow some incredibly simple and frustration-free syntax.
Developers Website
https://daneden.me/animate/Animations are fired immeditiely when the page loads and are a great way to introduce new content. Javascript will be required for dynamic animations, such as on hover or click.
Adding an Animation to an Element
<div class="panel animated fadeIn">..</div>
What The Classes Mean
"panel" - Is an example of the type of element you wish to animate. It can be virtually anything!
"animated" - Is required on all elements which you choose to animate on load.
"fadeIn" - Is an example of the type of animation you wish to see performed on the element. Click Here for a full list of animations.
Animations by default are fired immeditiely when the page loads. You can add a delay to an animation by following the syntas below. This is a great way to introduce content in a specific order, or to create a unique and fun visual effect.
Adding a Delayed Animation to an Element
<div class="panel animated-delay" data-animate='["1500","fadeIn"]'>..</div>
Note: delayed animations require main.js to properly function
What The Classes Mean
panel - Is an example of the type of element you wish to animate. It can be virtually anything!
animated-delay - Is always required. Take note this uses "animated-delay" NOT "animated"
data-animate='["1500","fadeIn"]' - A data attribute which holds an array for two settings. The first is used to set the length of the duray(in miliseconds). The second is used to set the style of animation used on the element. Both options are required. Click Here for a full list of animations.
Animations can easily be added dynamically via Javascript. However, this requires the formulation of code which means it's up to the developer to create these events. The code below is simply an example of how one could dynamically add an animation to an element.
Animation on Click
What do the classes used in the example above mean?
"animated" - Is required on all elements which you choose to animate.
"fadeIn" - Is an example of the type of animation you wish to see performed on the element. Click Here for a full list of animations.
Why do you remove the classes after the animation?
To be able to re-run the animation you must remove the classes as the animation does not loop. Therefor it must be reinitiated each time by re-adding the classes.