Menu
I do understand what is grid, basically one whole row will have 12 spaces.
<div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> Basically what the code above is just dividing the spaces into 3 section but what I don't understand is, whats the point of setting offset?
<div class="col-lg-6 col-md-offset-3"></div> 
332
An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes. You can try to run the following code to learn how to work with offset columns in Bootstrap −
Definition and Usage The outline-offset property adds space between the outline and the edge or border of an element.
Offset classesMove columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right.
Offsets are used for spacing elements in the responsive grid.
The unit is based on the column layout.
You can define an offset this way : col-[breakpoint]-offset-[number of colums]
In this example, admitting our layout is made of 12 columns :
<div class="row"> <div class="col-md-6 col-md-offset-3"> <p>test</p> </div> </div> Means that in the medium range of the grid system, the element will have a width of 6 colums and there will be 3 blank columns before the element (and as a consequence, will have 3 blank colums after).
The result of this is a div of 6 colums width, centered in the container.
There is a example showing how it renders in the Bootstrap documentation. https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
