--- title: "What are the Grid Systems in Bootstrap?" description: "What are the Grid Systems in Bootstrap?" author: "Ethan Karla" published: 2021-07-28 canonical: https://answers.mindstick.com/qa/93846/what-are-the-grid-systems-in-bootstrap category: "web application" tags: ["web application development", "web development"] reading_time: 2 minutes --- # What are the Grid Systems in Bootstrap? What are the [Grid Systems](https://www.mindstick.com/forum/156591/grid-systems-in-bootstrap) in [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)? ## Answers ### Answer by Ravi Vishwakarma Bootstrap gives you the option of using the [grid](https://www.mindstick.com/forum/369/how-can-i-add-a-column-name-to-my-grid) system which is considered to be one of the fastest and simplest ways to create layouts. The Bootstrap grid system is known for providing a fast and easy way to create layouts for the web pages being designed. Grid layouts are easily enabled for large devices that vary from cell phones to laptops and tablets to smartphones. The classes used are then changed according to the target device and the desired grid size is obtained. Bootstrap Grid System allows you to create **12 columns** across the page. You can use all 12 columns separately. Grid Classes There are four classes used in Bootstrap Grid System. 1. xs (for phones)\ 2. sm (for tablets) 3. md (for desktops) 4. lg (for larger desktops) \ | ## Grid System | **Extra-small \ <576px** | **Small \ ≥576px** | **Medium \ ≥768px** | **Large \ ≥992px** | **Extra large \ ≥1200px** | | --- | --- | --- | --- | --- | --- | | **Max container width** | **None (auto)** | **540px** | **720px** | **960px** | **1140px** | | **Class prefix** | **.col-** | **.col-sm-** | **.col-md-** | **.col-lg-** | **.col-xl-** | Example \ ``` Bootstrap Example

Hello World!

Resize the browser window to see the effect.

.col-sm-4

``` ![What are the Grid Systems in Bootstrap?](https://answers.mindstick.com/questionanswer/a76e32a1-6137-45e4-bfa9-190159e764cf/images/b4e7676a-ceb7-408e-ad6f-92b7f3da9820.png)\ --- Original Source: https://answers.mindstick.com/qa/93846/what-are-the-grid-systems-in-bootstrap Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.