loading...

Bootstrap 3 – Using the Bootstrap variables and mixins

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.

Bootstrap Grid variables

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 the col-lg-x class start getting displayed in the columns. The default value of this attribute is the same as the minimum tablet screen width, which is 768 px.

Bootstrap Grid mixins

You can also create and modify the grid layout using the mixins in conjunction with variables defined in Bootstrap.

Let’s take a look at the commonly used mixins in Bootstrap that are used to build semantic layouts:

  • .container-fixed(): This mixin is used to create a container element centered on the page. The container will wrap rows and columns in our layouts.
  • .make-row(): This mixin is used to create rows in our layouts. It clears all the CSS float declarations added to the columns wrapped in the row.
  • .make-column(): This mixin is used to create columns in our layouts. It adds CSS float declarations to the columns, creates the gutters, and sets the column widths. It accepts one parameter that is the number of units for the column width with a default maximum of 12. The maximum can be changed by changing the value of the @grid-columns variable.

    An example is .make-md-column(8);

  • .make-column-offset(): This mixin is used to add offsets to the columns. It accepts one parameter that is the number of units for the column offset with a default maximum of 12. The maximum can be changed by changing the value of the @grid-columns variable.

    An example is .make-md-column-offset(1);

  • .make-column-push(): This mixin is used to move columns to the right. This is the same as using the col-push-X class. It accepts one parameter that is the number of units by which we can move the column with a default maximum of 12. The maximum can be changed by changing the value of the @grid-columns variable.

    An example is .make-md-column-push(3);

  • .make-column-pull(): This mixin is used to move columns to the left. This is the same as using the col-pull-X class. It accepts one parameter that is the number of units by which we can move the column with a default maximum of 12. The maximum can be changed by changing the value of the @grid-columns variable.

    An example is .make-md-column-pull(3);

Tip

Remember to add the prefix as per the screen size, that is, md for desktops, lg for large screens, sm for small screens, and xs for extra small screens in order to define the columns.

Comments are closed.

loading...