Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap

What is column offset in Bootstrap?

Fahad Farid

Offset property

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.

Syntax

.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.

Example

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>

RELATED TAGS

bootstrap

CONTRIBUTOR

Fahad Farid
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring