Nowadays, all major CSS frameworks come with a built-in grid, and Bootstrap is no exception. The grid saw major improvements when Bootstrap 3 was released, and Bootstrap became mobile first, which means that the grid starts out stacked on mobile devices and is floated through media queries on devices with wider screens. In addition to being mobile first, the grid is also fluid, which means that it uses percentages instead of pixel values.
In this chapter, you will learn to identify when you need a custom grid, how to customize the Bootstrap grid to meet your needs, as well as how to disable responsiveness in Bootstrap.
The grid in Bootstrap consists of 12 columns by default, but it can be customized through LESS variables. Sometimes, you will need to create a custom grid to accomplish what you want instead of writing your own grid from scratch, which takes time and can be quite complicated. You can create your grid with Bootstrap or even use the grid in Bootstrap if necessary.
There are many reasons why you may need a custom grid. A few of the them are as follows:
- Custom breakpoints: It is quite common that designers decide on the responsive breakpoints in order to allow for better user experience. If that is the case, you will need to customize the breakpoints to work with the design.
- More columns: At times, you will need more than 12 columns, for example, 16 or even 24 columns to implement a design. With Bootstrap, you can have as many columns as you want.
- Bigger or smaller gutters: Sometimes, the default gutters might not work for you. In this case, you can easily adjust their size by customizing your grid.