Grid system in Bootstrap
-
- 0
Grid system is the main feature of bootstrap.
we can divide the container into 12 sections and use those section based on our needs(based on the width of each section in our website design.
there 4 classes in bootstrap to use this feature:
xs: extra small for mobile device width
sm: small for tablets.
md :medium for medium size desktop (laptop ) device
lg: for desktop device.
how to use these classes?
<div class=”container”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>
here contents aligned in full width in all device, since we using all 12 sections for all device.
</div>
<div class=”row”>
<div class=”col-lg-8 col-md-8 col-sm-6 col-xs-12″>
dividing large desk top into 8 and align first contents in those 8 sections.
medium device also align in first 8 columns
for tabs align contents in first 6 columns.
for mobiles using all 12 column
</div>
<div class=”col-lg-4 col-md-4 col-sm-6 col-xs-12″>
Reaming 4 column using and adding remaining contents.
for tabs align contents in second 6 columns.
for mobiles using all 12 column
</div>
</div>
</div>
we need to use all the 12 columns once divide the contents into columns.
Grid system is the main feature of bootstrap. we can divide the container into 12 sections and use those section based on our needs(based on the width of each section in our website design. there 4 classes in bootstrap to use this feature: xs: extra small for mobile device width sm: small for tablets. md…
Grid system is the main feature of bootstrap. we can divide the container into 12 sections and use those section based on our needs(based on the width of each section in our website design. there 4 classes in bootstrap to use this feature: xs: extra small for mobile device width sm: small for tablets. md…