PSD to HTML Blog

A Complete Reference Library of Bootstrap Classes

Bootstrap is currently the most used pre-fabricated CSS style sheet framework in existence today. It is used by millions of webpages and can be used to create any type of website using any type of content management system. Using Bootstrap reduces chances of errors and frees the developer from menial CSS coding to focus on more important stuff. Seosematicxhtml is the only PSD to HTML and PSD to CMS conversion service provider available on the internet that specializes in Bootstrap Framework and thus highly recommends using Bootstrap for every project. Therefore to make the Bootstrap more easily accessible and understandable, here we are giving a comprehensive reference library of all the major Bootstrap classes and sub classes that can be used to create any type of design element. But before that let’s see what exactly Bootstrap framework is.

What is Bootstrap Framework

If you ask an experienced web developer what is the most boring and strenuous portion of their job, they will most probably have the same reply, CSS. Don’t get me wrong here, CSS is an extremely important aspect of any website and is responsible for how the website will look. But most of the elements of a website have nearly similar features. They may have different color scheme, or different fonts, or different background colors, but they will have same padding, margins, buttons, font sizes, navigations, rows, sliders, data boxes, containers etc. So for an experienced programmer coding CSS from scratch can be a bit tiring process because of its repetitiveness. Keeping this in mind, two employees from Twitter social networking website created a standardized CSS code framework that can be used to style nearly any type of website, and called this framework Bootstrap. This CSS framework was loaded with hundreds of components and has every major design element that a website may need, and best part about this framework was that it was responsive.

It became an instant hit and eventually evolved in into an open source project and is currently the most worked upon open source project on Github. Since Bootstrap is developed through a community effort, understanding the code is not very difficult. Bootstrap enjoys a whole community of open source developers and resource material which can be used by website owners to troubleshoot or alter the framework code by themselves.

Currently because of so many advantages of bootstrap, we are witnessing a new wave of web-development trend in which more and more website owners are shifting to Bootstrap framework rather than developing 100% custom CSS framework. This trend is even visible today and has already taken roots in web-developer community.

Therefore to promote the wonders of Bootstrap further, here we give you a complete reference library to Bootstrap. Building this library is a step-by step process so we will be adding a few things to it later on. If you have any queries about any class, or if you wish to add some more information about any class, or wish to find out how a particular class can be used, feel free to leave a comment.

You can download Bootstrap Framework from here

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>
<tr>
<td>.badge</td>
<td>Labels and badges (Component)</td>
<td>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</td>
<td><a href=" rel="nofollow">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 has

four 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 the

tabs. 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 the

tabs. 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 the

tabs. 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 in

conjunction 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-tabs

class 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 navbar

classes 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 or

errors.

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 unauthorised

actions.

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-page

popups

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, different

background, 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


About Author

Mudit

Mudit Singh is an expert commentator who's allied with SeoSemanticXhtml, which is a sister concern of Ipraxa – a web agency that's created its niche in providing high end PSD to HTML and Integration with third party applications such as PSD to Magento, Wordpress, Drupal, Joomla etc. For the latest in Web designing and Web development, touch base with us via Facebook and Twitter also on Google+.