Bootstrap Grid System

bootstrap cdn,bootstrap datepicker
bootstrap cdn, Bootstrap Datepicker, Bootstrap Grid System,

#There are 12 Columns Bootstrap Allow in One Row, Bootstrap Grid System are Responsive and its column will be Re-arrange depending on Mobile Screen.

Bootstrap Grid Classes

  • (XS) screens less than 768px wide
  • (SM) For Greater Than 768px wide
  • (MD) screens equal to or greater than 992px wide
  • (LG) for laptops and desktops – screens equal to or greater than 1200px wide

Key Points

  • Always Place Row inside Container Or Fluid Container
  • We Use Row class for create Horizontal Row
  • Predefined Classes Col-sm-1…Col-sm-12 are use to create column inside row.
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element

Grid Options and How its Work

in this following table you can Understand that how Bootstrap Grid System Work and how its work on all kind of devices.


Extra Small Device
<768px
Small Device
>=768px
Medium Device
>=992px
Large Device
>=1200px
Predefined Class .col-xs- .col-sm- .col-md- .col-lg-
Best View Phones Tablets Small Laptops Laptops & Desktops
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
# of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Bootstrap Grid Example

Here i am going to tell you how to create basic grid system in Bootstrap. First Of All Create Container Or Fluid Container after that create row inside container, then create column inside row how much you want below i have create two column.

bootstrap cdn, bootstrap datepicker, Bootstrap Grid System.
<div class="container">
    <div class="row">
      <div class="col-md-6 c1">col-md-6</div>
      <div class="col-md-6 c2">col-md-6</div>
   </div>
  </div>

Difrent Between Fluid Container and Container

<div class="container-fluid">
  <div class="row">
     Schauhan.in Fluid Container Example
  </div>
</div><br />

<div class="container">
  <div class="row">
     Schauhan.in  Container Example</div>
</div>
  1. Fluid Container : When we have to create full screen row then we use fluid-container.
  2. Container : When we have to create fixed width row then we use Container.

Leave a Reply

avatar
  Subscribe  
Notify of