In recent years, the number of people using the internet from their mobile phones has surged; therefore, developers must create responsive webpages. The offset property is useful on smaller devices when the content expands over the whole width and changes with the display.
At times it is useful to leave room to present a minimal and understandable design.
There are specified methods in Bootstrap 4 that can be altered to present the information in the way developers want. It works with the grid tier infixes (like -sm-, -md- etc.) to provide developers with what they require.
.offset-md-x
Where:
md
: represents the grid tier infix. You can choose between sm, md, lg, etc.x
: represents the metric by which you want to shift (in number of columns)Note: The element is always shifted x columns to the right.
The following code shows how various offsets differ the values from where the columns start:
<html><body><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div></div><div class="row"><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div></div><div class="row"><div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div></div></body></html>
Free Resources