Bootstrap @mixin make-col($size, $columns: $grid-columns) Explained!
This article does require a basic understanding of Bootstrap Grids and is only to explain the @mixin make-col and the variables contained inside it.
The Bootstrap mixin @mixin make-col($size, $columns: $grid-columns) is used to create a column for a grid system.
The $size variable specifies the width of the column and the $columns variable is an optional argument that allows you to specify the total number of columns in your grid system.
In the example below we are using the mixin to create a column with a size of 5, and we’re also specifying the total number of columns in the grid system as 10 (default is usually 12). This means that our column will be 50% wide.
Another way to work it out is divide the size by the number of columns to get the width percentage.
e.g 5(size)/10(columns) = 0.5 * 100 = 50%
.my-column {
@include make-col(5, 10);
}One reason you might want to change the value of $columns is if you want to create columns with different sizes than the default 12-column grid allows for. For example, if you want to create a column that takes up one-third of the grid width, you could do this:
.my-column {
@include make-col(3, 9);
}Hope this Helps!
Happy Coding 😃
