#
Grid
Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts
#
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
- You must start with
row - There are pre-define classes of columns starting from 1 to 12, example
col-md-1tocol-md-12 - Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
- You can create different grid pattern that finally forms 12
<div className="row">
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
<div className="col-md-1">.col-md-1</div>
</div>
<div className="row">
<div className="col-md-8">.col-md-8</div>
<div className="col-md-4">.col-md-4</div>
</div>
<div className="row">
<div className="col-md-4">.col-md-4</div>
<div className="col-md-4">.col-md-4</div>
<div className="col-md-4">.col-md-4</div>
</div>
<div className="row">
<div className="col-md-6">.col-md-6</div>
<div className="col-md-6">.col-md-6</div>
</div>- There different grids for different screen sizes,
col-mdmd stands for medium screen, the following table explains