Class |
Type |
Use |
Usage Example |
.hide-text |
Miscellaneous |
Hide div text. A great hack for embedding invisible data in a webpage. |
——- |
.input-block-level |
Forms (Base CSS) |
Create a elongated block shaped input field |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.img-rounded |
Images (Base CSS) |
This creates an image element in which the image is displayed with rounded corners |
http://getbootstrap.com/2.3.2/base-css.html#images |
.img-polaroid |
Images (Base CSS) |
This creates an image element with a broad border that gives the feel of a poloroid image |
http://getbootstrap.com/2.3.2/base-css.html#images |
.img-circle |
Images (Base CSS) |
This creates an image element in which the image is dispaled in a circle. The image is cropped accordingly. |
http://getbootstrap.com/2.3.2/base-css.html#images |
.row |
Grid System (Scaffolding) |
Create a basic row for displaying content. Default length of the row is full 12 colums i.e. 940 px, but it can be chanaged using span classes. Alos with responsive classes added, the grid can adapt to 724px and 1170px length depending upon viewport. In responsive the columns become fulid and stack vertically. |
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem |
.container |
Layout (Scaffolding) |
Provides a fixed layout for the content. You can add rows with different spans inside it to create multi columned layout. |
http://getbootstrap.com/2.3.2/scaffolding.html#layouts |
.span1 – .span12 |
Grid System (Scaffolding) |
This class can be used to define the length of a component. This length is represented in number of columns for example for a conatiner spanning 4 columns use class span4. There are 12 lenth classes span1 to span12. The default lenth of each span is 60 px with 5px border on all sides. |
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem |
.offset1 – .offset12 |
Grid System (Scaffolding) |
This class allows you to move the content by a desired amount of space. Here this spae is counted in terns of number of columns. Thus if you you use offset2 class you will skip 2 colums and display in the third one. |
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem |
.row-fluid |
Fluid Grid System (Scaffolding) |
The same as row class, with the only difference being that row-fluid creates responsive rows with fluid layout |
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem |
.container-fluid |
Fluid Grid System (Scaffolding) |
The same as container class, with the only difference being that container-fluid creates responsive rows with fluid layout |
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem |
.lead |
Typography (Base CSS) |
Make a paragraph stand out by adding .lead |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.muted |
Typography (Base CSS) |
an emphasis class that changes the value of text color to #999999. Gives a subtle emaphis to the text. |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-warning |
Typography (Base CSS) |
This class changes the text color to bright orange, the standard color of warning text |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-error |
Typography (Base CSS) |
This class changes the text color to bright red, the standard color of error text |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-info |
Typography (Base CSS) |
This class changes the text color to Blue color. This is specially use ful when depicting some technical information or in typography in general. |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-success |
Typography (Base CSS) |
This class changes the text color to Green, the standard programming color to denote successful operation. Very useful in creating user driven websites and websites that require user inputs. |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-left |
Typography (Base CSS) |
This class changes alignement of the text from default to left alingned |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-right |
Typography (Base CSS) |
This class changes alignement of the text from default to left alingned |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.text-center |
Typography (Base CSS) |
This class changes alignement of the text from default to center aligned alingned |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.page-header |
Typography (Components) |
This class will give the div a bottom padding of 9px, top and bottom margin of 20 px and 30 px respectively, and a grey colored (#eeeeee) solid 1 px bottom border |
http://getbootstrap.com/2.3.2/components.html#typography |
.dl-horizontal |
Typography (Base CSS) |
The go-to class for styling horizontal datalists. It also styles nestesd <dd> and <dl> HTML 5 tags |
http://getbootstrap.com/2.3.2/base-css.html#typography |
.pre-scrollable |
Code (Base CSS) |
This class will set a maximum height of 350px of a content box and provide a y axis scroll bar on the div |
</tr><br /><br /><br />
<tr><br /><br /><br />
<td>.label</td><br /><br /><br />
<td>Labels and badges (Component)</td><br /><br /><br />
<td>A basic component of Bootstrap that allow you to create volored labels that can highlight content. By default the color is light grey (#999999)</td><br /><br /><br />
<td><a rel=” rel=”nofollow”>http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge |
Labels and badges (Component) |
It is nearly the same as lable class but has some subtel diffrences such as a little broader left and right padding padding and a little larger border radius |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.label-important |
Labels and badges (Component) |
Same as lable class but with back ground color #953b39 (Red) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge-important |
Labels and badges (Component) |
Same as badge class but with back ground color #953b39 (Red) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.label-warning |
Labels and badges (Component) |
Same as badge class but with back ground color #f89406 (Orange) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge-warning |
Labels and badges (Component) |
Same as badge class but with back ground color #f89406 (Orange) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.label-success |
Labels and badges (Component) |
Same as lable class but with back ground color #468847 (Green) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge-success |
Labels and badges (Component) |
Same as badge class but with back ground color #468847 (Green) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.label-info |
Labels and badges (Component) |
Same as lable class but with back ground color #3a87ad (Blue) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge-info |
Labels and badges (Component) |
Same as badge class but with back ground color #3a87ad (Blue) |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.label-inverse |
Labels and badges (Component) |
Same as lable class but with back ground color as Black and text color as white |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.badge-inverse |
Labels and badges (Component) |
Same as badge class but with back ground color as Black and text color as white |
http://getbootstrap.com/2.3.2/components.html#labels-badges |
.table |
Tables (Base CSS) |
Basic bootstrap class to create a table. Mostly used in conjunction with <table> tag |
http://getbootstrap.com/2.3.2/base-css.html#tables |
.table-bordered |
Tables (Base CSS) |
A basic Bootstap table class that will create a table with visible solid border |
http://getbootstrap.com/2.3.2/base-css.html#tables |
.table-striped |
Tables (Base CSS) |
An interesting bootstrap table class that will style a table into a zebra-stripe pattern i.e. the first row would be of light grey color the next white the next grey and so on. |
http://getbootstrap.com/2.3.2/base-css.html#tables |
.table-hover |
Tables (Base CSS) |
Another intresting table class in which the row will change color whenever you will hover your mouse over it. A great and useful effect. |
http://getbootstrap.com/2.3.2/base-css.html#tables |
<code> |
Bottstrap specific Tag |
A tag unique to bootstrap that can be used to style programming code that has to be displayed in a page. A very useful tag for technical blogs and websites. |
http://getbootstrap.com/2.3.2/base-css.html#typography |
<pre> |
Bottstrap specific Tag |
a tag for representing multiple lines of code |
http://getbootstrap.com/2.3.2/base-css.html#typography |
<section> |
Bottstrap specific Tag |
A tag for presenting small sections of code |
http://getbootstrap.com/2.3.2/base-css.html#typography |
<Address> |
Bottstrap specific Tag |
A useful tag for styling Addresses that have to be displayed. |
http://getbootstrap.com/2.3.2/base-css.html#typography |
<blockquote> |
Bottstrap specific Tag |
This tag can be used to embed quotes in a stylized block. |
http://getbootstrap.com/2.3.2/bootstrap/base-css.html#typography |
.input-mini |
Forms (Base CSS) |
Creates a very small input area the size of 60px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.input-small |
Forms (Base CSS) |
Create a small input area of the size of 90 px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.input-medium |
Forms (Base CSS) |
Create a medium sized input area of the size of 150px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.input-large |
Forms (Base CSS) |
Create a large input area of the size of 210px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
input-xlarge |
Forms (Base CSS) |
Create a extra large input area of the size of 270px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.input-xxlarge |
Forms (Base CSS) |
Create a extra extra large input area of the size of 530 px |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.controls-row |
Forms (Base CSS) |
A modifier class used for controlling proper spacing between input boxes. Most used for creating multiple input forms. |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.contol-group.warning |
Forms (Base CSS) |
A bootstrap validation class that shows warning message in orange color around the input |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.contol-group.error |
Forms (Base CSS) |
A bootstrap validation class that shows error message in red color around the input |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.contol-group.info |
Forms (Base CSS) |
A bootstrap validation class that shows special information message in blue color around the input |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.contol-group.success |
Forms (Base CSS) |
A bootstrap validation class that shows success message in green color around the input |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.form-actions |
Forms (Base CSS) |
This class will automatically line up the indentation of the buttons in the div with the form controls |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.help-block |
Forms (Base CSS) |
This class can be used to create a block type text class. Its best suited to display help text beside input boxes |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.help-inline |
Forms (Base CSS) |
Same as help-block class with diffrence being that is mostly used to display help text in the same line as the input |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.form-search |
Forms (Base CSS) |
A class dedicated for craeting search input boxes |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.form-inline |
Forms (Base CSS) |
A class used for creting multiple input boxes in a same line. Mostly used by websites that have space constraints |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.form-horizontal |
Forms (Base CSS) |
The basic form class used for creating horizontal input boxes. |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.control-group |
Forms (Base CSS) |
A control class for taking common types of inputs such as emails, passwords and useer ids, especially in horizontal forms |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.uneditable-input |
Forms (Base CSS) |
As the name it self suggest this class creates a input form that is not editable without accessing the actual form markup |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.uneditable-textarea |
Forms (Base CSS) |
Same as the uneditable-input but a instead an uneditable text area. |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.radio |
Forms (Base CSS) |
Bootstrap’s radio Input Button |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.checkbox |
Forms (Base CSS) |
Bootstrap’s checkbox input button |
http://getbootstrap.com/2.3.2/base-css.html#forms |
.btn |
Buttons (Base CSS) |
Standard white colored Bootstrap button. It has dedicated hover, focus, active, and disabled pseudo calsses |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-large |
Buttons (Base CSS) |
A large button with padding size of 11px by 19px |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-small |
Buttons (Base CSS) |
A relatively smaller button with padding size of 2px by 10px |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-mini |
Buttons (Base CSS) |
A very small button with padding size of 0px by 6px |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-block |
Buttons (Base CSS) |
A very large button that spans the whole lenth of its parent class |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-primary |
Buttons (Base CSS) |
Creates a Dark blue colored button that gives extra weight to to the button, complete with borders, white font and shadows. |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-warning |
Buttons (Base CSS) |
This class creates an onange colored warning button |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-danger |
Buttons (Base CSS) |
This class is used to create a red colored danger button |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-inverse |
Buttons (Base CSS) |
This class inverses the color of button and text, i.e. it creates a dark greay colored button with white font |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-success |
Buttons (Base CSS) |
Create a green colored button that signifies success |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-info |
Buttons (Base CSS) |
Used to create a light blue colored button that is best used for displaying information |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-link |
Buttons (Base CSS) |
A very clever class that makes a button that has no border or clor just blue text. Makes the text looks like a hyperlink which instead acts like a button. |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.icon-white |
Icons (Base CSS) |
This class is used to diplay permanent hover or clicked state of an element. Mostly used for showing parent and child tabs |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.dropdown-menu |
Dropdown Menu (Components) |
The basic class for creating drop down menues. Its used as an unordered list |
http://getbootstrap.com/2.3.2/components.html#dropdowns |
.dropdown-submenu |
Dropdown Menu (Components) |
A class that is used to create nested dropdown menues or second level dropdown menues |
http://getbootstrap.com/2.3.2/components.html#navs |
.icon-glass |
140 icons |
one of the 140 icons that comes with bootstrap. |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.icon-music |
140 icons |
one of the 140 icons that comes with bootstrap. |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.icon-search |
140 icons |
one of the 140 icons that comes with bootstrap. |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.icon-envelope |
140 icons |
one of the 140 icons that comes with bootstrap |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.icon-heart |
140 icons |
one of the 140 icons that comes with bootstrap |
http://getbootstrap.com/2.3.2/base-css.html#icons |
.btn-group |
Buttons (Base CSS) |
This class is used to create groups of buttons |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.btn-toolbar |
Buttons (Base CSS) |
This class is used to create a group of button-groups or in other words button tool bars |
http://getbootstrap.com/2.3.2/base-css.html#buttons |
.nav |
Navigational buttons (Components) |
The parent class of types of navigational button classes |
http://getbootstrap.com/2.3.2/components.html#navs |
.nav-header |
Navigational buttons (Components) |
This class is used to create a navigational list in the header. It can also be used for creating table of
content |
http://getbootstrap.com/2.3.2/components.html#navs |
.nav-pills |
Navigational buttons (Components) |
A sub class of .nav, this class is used to create a list of pill shaped navigational buttons. |
http://getbootstrap.com/2.3.2/components.html#navs |
.nav-list |
Navigational buttons (Components) |
A basic sub class used for creating navigational lists |
http://getbootstrap.com/2.3.2/components.html#navs |
.nav-tabs |
Navigational buttons (Components) |
A sub class of .nav, this class is used to create tab shaped navigational buttons. Each tab takes to a
different page |
http://getbootstrap.com/2.3.2/components.html#navs |
.tabbable |
Navigational buttons (Components) |
A creative plugin class that allows you to switch from one content piece to another through tabs. It hasfour different styles for tabs up (default), down, right, and left. |
http://getbootstrap.com/2.3.2/components.html#navs |
.tab-pane |
Navigational buttons (Components) |
this class is used for creating content panes that are switched through tabballe class |
http://getbootstrap.com/2.3.2/components.html#navs |
.tabs-below |
Navigational buttons (Components) |
This is subclass that is used in conjunction with tabbable and nav-tabs. This class changes the stle of thetabs. The tab hangs down as opposed to up (the default syle) |
http://getbootstrap.com/2.3.2/components.html#navs |
.tabs-left |
Navigational buttons (Components) |
This is subclass that is used in conjunction with tabbable and nav-tabs. This class changes the stle of thetabs. The tab are pulled to left as opposed to up (the default syle) |
http://getbootstrap.com/2.3.2/components.html#navs |
.tabs-right |
Navigational buttons (Components) |
This is subclass that is used in conjunction with tabbable and nav-tabs. This class changes the stle of thetabs. The tabs are pulled to right as opposed to up (the default syle) |
http://getbootstrap.com/2.3.2/components.html#navs |
.tab-content |
Navigational buttons (Components) |
This is the class that is used to embed switchable content in the website. This class is used inconjunction with tabbable and nav-tabs |
http://getbootstrap.com/2.3.2/components.html#navs |
.nav-stacked |
Navigational buttons (Components) |
A sub class that is used to create stacked navigational buttons. When combined with nav-pills and nav-tabsclass it create stacked nav tabs and nav pills |
http://getbootstrap.com/2.3.2/components.html#navs |
.navbar |
Navigational buttons (Components) |
The main class used for creating a navbar, which is usually used in conjuncture with secondary navbarclasses to get desired effects |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-inverse |
Navigational buttons (Components) |
Create a nav bar with inverted colors, i.e. black background with white font |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-form |
Navigational buttons (Components) |
This is the class that is used to integrate form elements in the navbar, like submit input boxes, userid-pass etc. You can align the form using pull-left or pull-right classes |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-search |
Navigational buttons (Components) |
This class is used to specifiacally embed search forms |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-static-top |
Navigational buttons (Components) |
Use this class to create a navbar that sticks to the top of the page and scrolls with the page. |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-fixed-top |
Navigational buttons (Components) |
Use this class to create navbar that sticks to the top of the viewport |
http://getbootstrap.com/2.3.2/components.html#navbar |
.navbar-fixed-bottom |
Navigational buttons (Components) |
Use this class to create navbars that sticks to the bottom ov the viewport |
http://getbootstrap.com/2.3.2/components.html#navbar |
.breadcrumb |
breadcrumb trail navigation |
The main classed used to implement breadcrumb navigation |
http://getbootstrap.com/2.3.2/components.html#breadcrumbs |
.pagination |
Pagination (Component) |
Standard bootstrap class to create page-number style navigation buttons |
http://getbootstrap.com/2.3.2/components.html#pagination |
.thumbnail |
Thumbnail (Component) |
Bootstrap class to style images in different thumbnail sizes. |
http://getbootstrap.com/2.3.2/components.html#thumbnails |
.alert |
Alerts (Components) |
This class creates a inpage closable alert box. Its mostly used for displaying alert messages orerrors. |
http://getbootstrap.com/2.3.2/components.html#alerts |
.alert-success |
Alerts (Components) |
A alert message box with green colored styling that coud be used to confirm successful actions |
http://getbootstrap.com/2.3.2/components.html#alerts |
.alert-danger |
Alerts (Components) |
A alert message box with red colored styling that coud be used to depict errors or unauthorisedactions. |
http://getbootstrap.com/2.3.2/components.html#alerts |
.alert-error |
Alerts (Components) |
Same as alert-danger class |
http://getbootstrap.com/2.3.2/components.html#alerts |
.alert-info |
Alerts (Components) |
A alert message box with blue colored styling that coud be used display relevant information in-pagepopups |
http://getbootstrap.com/2.3.2/components.html#alerts |
.alert-block |
Alerts (Components) |
this creats a block sized alert message box. |
http://getbootstrap.com/2.3.2/components.html#alerts |
.progress |
miscellaneous |
Use this class to implement progress bars in webpages. |
http://getbootstrap.com/2.3.2/components.html#progress |
.tooltip |
Tooltip (JavaScript) |
the main bootstrap class to implement tooltip effect |
http://getbootstrap.com/2.3.2/javascript.html#tooltips |
.hero-unit |
Typography (Component) |
A unique Bootstrap class that especially highlights a content element with large font, differentbackground, and borders. |
http://getbootstrap.com/2.3.2/components.html#typography |
.media |
Media (Components) |
The main bootstrap class to style media elements of a webpage. |
http://getbootstrap.com/2.3.2/components.html#media |
.popover |
Popovers (JavaScript) |
Main bootstrap class to create popovers |
http://getbootstrap.com/2.3.2/javascript.html#popovers |
.modal |
Modal (JavaScript) |
A unique feature of bootstrap. This class allows you to create streamlined and flexible dialouge prompts |
http://getbootstrap.com/2.3.2/javascript.html#modals |
.modal |
Modal (JavaScript) |
A unique feature of bootstrap. This class allows you to create streamlined and flexible dialouge prompts |
http://getbootstrap.com/2.3.2/javascript.html#modals |
.dropup, |
Dropdowns (Components) |
Same effect as dropdowns with only difference being that this class gives the effect of content popping up. |
http://getbootstrap.com/2.3.2/components.html#dropdowns |
.dropdown |
Dropdowns (Components) |
The main bootstrap class that is used to create dropdown menues or dropdown contents |
http://getbootstrap.com/2.3.2/components.html#dropdowns |
.dropdown-toggle |
Buttons (Base CSS) |
Bootstrap class to create dropdown buttons. |
http://getbootstrap.com/2.3.2/components.html#buttonDropdowns |
.typeahead |
Typehead (JavaScript) |
The main bootstrap class to handle typehead functionality in the website. |
http://getbootstrap.com/2.3.2/javascript.html#typeahead |
.accordion |
Accordion (JavaScript) |
Basic bootstrap class to create Accordian effects |
http://getbootstrap.com/2.3.2/javascript.html#collapse |
.carousel |
Carousel (JavaScript) |
Main bootstrap class that is used to create carousel type content or image sliders |
http://getbootstrap.com/2.3.2/javascript.html#collapse |
.well |
Miscellaneous (Components) |
This class is used to give a simple effect on any element. The element will appear as it is inserted inside the page. |
http://getbootstrap.com/2.3.2/components.html#misc |
.hidden |
Miscellaneous (Components) |
A simple class that will hide the contents of the div. |
http://getbootstrap.com/2.3.2/components.html#misc |
.pull-right |
Miscellaneous (Components) |
Change the indentation of the element to to right side. In other words the element floats to the right. |
http://getbootstrap.com/2.3.2/components.html#misc |
.pull-left |
Miscellaneous (Components) |
Change the indentation of the element to to left side. In other words the element floats to the left. |
http://getbootstrap.com/2.3.2/components.html#misc |
.clearfix |
Miscellaneous (Components) |
Clears the floating of the element and restors the default indentation. |
http://getbootstrap.com/2.3.2/components.html#misc |
.hide |
Miscellaneous (Components) |
Sets the Display characteristic of the div to none. It hides the entire div in normal viewport so that you can use media queries to make it visible in custom viewport sizes. |
Miscellaneous |
.show |
Miscellaneous (Components) |
Bake the div visible in the desired viewport size. |
Miscellaneous |
.invisible |
Miscellaneous (Components) |
Sets the visibility of the div to hidden for the desired viewport size |
Miscellaneous |
.fade.in |
Miscellaneous (Components) |
this class give the animation effect of fading out. Mostly used with elements like alerts or warnings. |
Miscellaneous |
.fade |
Miscellaneous (Components) |
This class decreases the opacity of the div to give it a faded effect |
http://getbootstrap.com/2.3.2/components.html#navs |
.collapse |
Miscellaneous (Components) |
This class hides the div container into a collapsable box when the div is viewd through a viewport lesser than the size of desktop. Mainly used for creating responsive website. |
http://getbootstrap.com/2.3.2/components.html#navbar |
.visible-phone |
Mobile Device compatiblity |
This class hides the div when viewed form devices having viewport size greater than 786px |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |
.hidden-phone |
Mobile Device compatiblity |
This class hides the div when viewd in phones (viewports having size than 786px) |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |
.visible-tablet |
Mobile Device compatiblity |
This class hides the div when viewed form devices having viewport size other than between 979px and 786px |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |
.hidden-tablet |
Mobile Device compatiblity |
This class hides the div when viewed in tablets (viewports having size greater than 786px but less than 979px) |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |
.visible-desktop |
Mobile Device compatiblity |
This class hides the div when viewed form devices having viewport size less than 979px |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |
.hidden-desktop |
Mobile Device compatiblity |
This class hides the div when viewed in desktops (viewports having size greater than 979px) |
http://getbootstrap.com/2.3.2/scaffolding.html#responsive |