List of all classes in bootstrap

Hello Everyone,

Welcome to M2soft, As you all know Bootstrap is the first mobile HTMl and CSS frameworks used to develop a responsive website. So In this article, We have mentioned how bootstrap classes works or what meaning of single classes and what they played role in the code. 

Here is the list of bootstrap classes that makes it more easier to use bootstrap for making a responsive web page.

 .container-fluid   : 

Sets a minimum width of 940px (clears floated elements before/after)

 .container :

Sets a width of 940px which also centres the content (clears floated elements before/after)
 
.pull-right :

Floats element to the right
 
.pull-left :

Floats element to the left
 
.hide :

sets element to display:none
 
.show :

 
sets element to display:block
 
.row :

 
Sets a -20px margin (clears floated elements before/after)
 
.span1 up to .span24 :

 
Sets specific pixel width values
 
.row > .offset1 (up to .offset12) :

 
Sets specific margin-left values
 
.span-one-third :

 
Sets width of 300px
 
.span-two-thirds :

 
Sets width of 620px
 
.span-one-third :

 
Sets margin-left of 340px (so clears .span-one-third by 40px)
 
.span-two-thirds  :

 
Sets margin-left of 660px (so clears .span-two-thirds by 40px)
 
/* Forms.less  Base styles for various input types, form layouts, and states  -------------- */
 
.uneditable-input :

Sets element to block and gives border-radius + sets height/line-height to 18px + sets a box-shadow + background colour white + cursor: not-allowed
 
.input-mini :
.mini :

 
Sets width to 60px
 
.input-small :
.small :

 
Sets width to 90px
 
.input-medium :
.medium :

 
Sets width to 150px
 
.input-large :
.large :

 
Sets width to 210px
 
.input-xlarge :
.xlarge :

 
Sets width to 270px
 
.input-xxlarge :
.xxlarge :

 
Sets width to 530px
 
.span1 up to .span16 (when applied to inputs and textareas) 

 
Sets specific pixel width values + no float + no left margin + inline-block
 
.actions :

 
Sets top/bottom margin of 18px + padding + top border + border-radius
 
.actions .secondary-action :

 
floats element right and get a line-height of 30px
 
.help-inline :
.help-block :

 
line-height 18px + font-size: 13px
 
.form-stacked :

 
padding-left: 20px;
 
/* Tables.less Tables for, you guessed it, tabular data ---------- */
 
.condensed-table :

Applies smaller padding than default
 
.bordered-table :

 
Applies borders to the table
 
.zebra-striped :

 
Uses CSS3 to apply stripes (e.g. tr:nth-child(odd) td)
 
table .header :
cursor:pointer :
 
/* Patterns.less  Repeatable UI elements outside the base styles provided from the scaffolding ---------- */
 
.topbar  :

 
Sets height to 40px + position:fixed + to top/left of screen with a very large z-index (10,000)
Also sets styles on sub elements like a form, p, input, div > ul
 
.topbar-inner, .topbar .fill :

 
Sets dark background gradient
 
.menu-dropdown :
.dropdown-menu :

 
Sets white background, floats to left, absolute positioning, box shadow, border-radius, large z-index (900) + min/max widths + display none!?
(I believe this is the drop down menu itself which is hidden until hovered over)
 
.breadcrumb :
.pagination   :

 
Applies relevant styles to a

element
 
.hero-unit  :

 
Sets elements as a large promotional section
 
.page-header :

 
Applies box-shadow and bottom-border 

Different button classes using for different styles. 

  
.btn.error
.btn.success
.btn.info
.btn
.btn.primary
.btn.active
.btn.disabled
.btn.large
.btn.small
.close 

 
.well : Applies padding/background colours/border-radius/box-shadow  

Use these classes to develop  a responsive website.

If you need any web development services.. Feel free to contact us at

M2Soft Solutons