Ruby Admin Documentation
The Ruby Admin 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 Ruby Admin 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. Full understanding of Bootstrap and 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 to default Bootstrap Grid system.
The Ruby Admin 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 Ruby Admin.
Three additional colors have been added to the contextual system
.btn-alert .btn-system .btn-dark The Ruby Admin 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 Ruby Admin.
New elements, inputs, navigations, and more have been added
.btn-alert .btn-system .btn-dark The Ruby Admin 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 Ruby Admin.
Ruby Admin Color System
Ruby Admin has taken everything you love about bootstraps contextual system and extended it. Adding additional colors and extending their use to many new elements.
Ruby Admin - Folder Structure
Folder Explanation
Ruby Admin/theme/
- assets/ - jade/ - plugins/| Directory Folder | File Overview |
|---|---|
assets/ |
The Assets directory folder contains Core resources specifically created for the Ruby Admin theme. This includes the themes primary stylesheet/less, fonts, images, and custom plugins. |
jade/ |
The Jade directory folder contains the source files of all html pages of Ruby Admin theme. For more convenience and in order to reduce time for changing common elements of the pages, skeleton.jade, footer.jade and header.jade files, which keep the default structure for all pages, have been added. |
plugins/ |
The Plugins directory folder contains all of the third party resources which the Ruby Admin theme uses. This includes the jQuery/jQuery UI libraries and all plugins except those which are considered "Core". You can read more about the files which are not included and reside in the utility.js(Core) in the javascript section of documentation. |
Folder Details - theme/assets/
Ruby Admin/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.
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.
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 Ruby Admin 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/plugins/
Ruby Admin/theme/plugins/
- css/ - img/ - core.min.js| Directory Folder | File Overview |
|---|---|
css/ |
The "css" folder contains styles that modify the default plugin styles on different pages. Styles located in this folder are assigned in html files.
Key Points
|
img/ |
The "img" folder contains images that are used as examples. All images have been properly compressed, analyzed for bloat, and are required for theme demonstration purposes. The images inside this folder should not be removed.
Key Points
|
core.min.js |
The core.min.js file contains jQuery/jQuery UI libraries, Bootstrap javascript library (containing all bootstrap plugins) and all 3rd party plugins used throughout the theme. Many of the plugins are required for demonstration purposes. Documentation and examples of use can be found in the plugins section of the documentation.
Key Points
|
Ruby Admin - Javascript Structure
Important Javascript Folders
Ruby Admin/theme/
- assets/utility - plugins| Directory Folder | File Overview |
|---|---|
assets/ |
The Assets directory folder contains Core resources specifically created for the Ruby Admin theme. This includes the themes primary stylesheet/less, fonts, images, and custom plugins. |
plugins/ |
The Plugins directory folder contains all of the third party resources which the Ruby Admin 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/
Ruby Admin/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.
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 Ruby Admin 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/plugins
Ruby Admin/theme/plugins
- core.min.js| Directory Folder | File Overview |
|---|---|
core.min.js |
The core.min.js file contains jQuery/jQuery UI libraries, Bootstrap javascript library (containing all bootstrap plugins) and all 3rd party plugins used throughout the theme. Many of the plugins are required for demonstration purposes. Documentation and examples of use can be found in the plugins section of the documentation.
Key Points
|
Ruby Admin 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>Ruby Admin 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.
Ruby Admin 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>Ruby Admin 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>Ruby Admin 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"
Ruby Admin 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>Ruby Admin 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.
Ruby Admin - 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>Ruby Admin - 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>Ruby Admin 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>Ruby Admin 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>Ruby Admin - 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>Ruby Admin - 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>Ruby Admin - 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>Ruby Admin 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>Ruby Admin 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>Ruby Admin 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>Ruby Admin 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>Ruby Admin 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…
})Ruby Admin - 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 TemplateRuby Admin - 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 TemplateRuby Admin - 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="dashboard.html">Dashboard</a>
</li>
<li class="crumb-icon">
<a href="dashboard.html">
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="crumb-link">
<a href="index.html">Home</a>
</li>
<li class="crumb-trail">Dashboard</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 Ruby Admin 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. Ruby Admin includes Six separate font-icon libraries.
Available Icon Libraries
Bootstrap 3 Library of choice
Most Ruby Admin 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
Colors
.text-warning .text-success .text-alert .text-primary etc
An example of how to use Ruby Admin 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 Ruby Admin. 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 Ruby Admin 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 Ruby Admin 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 Ruby Admin 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 Ruby Admin 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.
Ruby Admin 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.