You can use variables and mixins in Bootstrap to build semantic layouts. We will now look at variables used in Bootstrap for the grid layout.
Bootstrap comes with built-in variables and mixins for building semantic grid layouts.
The LESS code for the Bootstrap Grid contains three variables:
@grid-columns
: This variable is used to define the maximum number of columns displayed on desktops and large screens. The default value is 12. However, by assigning a specific value, we can change the default value to less or more than 12, as per the requirement.@grid-gutter-width
: This variable is the width of the gutter. The gutter is the vertical space between the grid columns, and the default value of the gutter width is 30 px.@grid-float-breakpoint
: This variable is the minimum width with which the elements with thecol-lg-x
class start getting displayed in the columns. The default value of this attribute is the same as the minimum...