♦ BootStrap4 Grid Basic
♣ About BootStrap4 Grid
BootStrap4 Grid defines the layout of the web-page.In BootStrap4, Grid system is defined in terms of column.
In BootStrap4, 12 columns are defined which can be used to display 12 different columns in parallel.
Customized column width can be achieved by merging n-number of columns, where n is desired column width, max n can be 12.
♣ BootStrap4 Grid Types
Below is a tabular representation of column size guideThese are very same to containers, that is the alignment of columns will vary upon varying window size.
| Class | Description |
|---|---|
| .col | screen-width less than 576px |
| .col-sm | screen-width equal or greater than 576px |
| .col-md | screen-width equal or greater than 768px |
| .col-lg | screen-width equal or greater than 992px |
| .col-xl | screen-width equal or greater than 1200px |
♣ Example1: BootStrap4 Single Column
In this example, single column in BootStrap4 is illustrated. Example
Input:
Output:
♣ Example2: BootStrap4 Multiple equal Column
In this example, multiple equal columns in BootStrap4 are illustrated. Example
Input:
Output:
♣ Example3: BootStrap4 Multiple unequal Column
In this example, multiple unequal columns in BootStrap4 are illustrated. Example
Input:
Output:
♣ Example4: BootStrap4 Responsive col-sm
In this example, Responsive Columns are illustrated for col-sm variant. Example
Input:
Output:
♣ Example5: BootStrap4 Responsive col-md
In this example, Responsive Columns are illustrated for col-md variant. Example
Input:
Output:
♣ Example6: BootStrap4 Responsive col-lg
In this example, Responsive Columns are illustrated for col-lg variant. Example
Input:
Output:
♣ Example7: BootStrap4 Responsive col-xl
In this example, Responsive Columns are illustrated for col-xl variant. Example
Input:
Output:
♣ Example8: BootStrap4 Responsive unequal columns
In this example, Responsive unequal Columns are illustrated for col-xl variant. Example
Input:
Output: