The grid system in Bootstrap helps you to align text side-by-side and uses a series of container, rows and column. The Grid system in Bootstrap uses ems and rems for defining most sizes whereas pxs are used for grid breakpoints and container widths. Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. You can use all combinations of values summing up to 12. You can use 12 columns each of width 1, or use 4 columns each of width 3 or any other combination.
There are mainly five class in grid system which are listed below:
- .col- Extra Small ( < 576 px )
- .col-sm- Small ( >= 576 px )
- .col-md- Medium ( >= 768 px )
- .col-lg- Large ( >= 992 px )
- .col-xl- Extra Large ( >= 1200 px )
Bootstrap provides 12 columns per row which is made available in the Column class. So, you can control the width of column using specifying numbers in .col-*, where * means the width of the column in numbers.
col-md-4: This class is used when the device size is medium or greater than 768px and the maximum width of container is 720px and you want the width equal to 4 columns.
col-xs-1: This class is used when the device size is extra small (mobile) and when you want the width to be equal to 1 column.
col-lg-2: This class is used when the device size is large or greater than 992px and the maximum width of container is 960px and when you want size equal to 2 columns.
- What is the meaning of let-* in Angular 2 Templates ?
- What is the meaning of --save for NPM install ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Beginning BootStrap (Part-1) | Introduction and Installation
- Beginning BootStrap (Part-2) | Grid System
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- How to get circular buttons in bootstrap 4 ?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- Bootstrap (Part-8) | Badges, Labels, Page Headers
- Bootstrap (Part-9) | Tooltips
- Bootstrap | Navigation Bar
- Bootstrap | Carousel
- Bootstrap | Cards
- Bootstrap | Badges and Breadcrumbs
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.