20

I'm following a webpage creation tutorial, and the instructor created a division with the class .col-sm-offset-1. What does this do to the content within the div with that class? Here's the complete code:

<div class = "col-sm-10 col-sm-offset-1">

https://jsfiddle.net/zmtmphtq/

8 Answers 8

34

As per bootstrap 4.0 .offset class is available.

1. Use class .offset See bootstrap offset documentaion

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

2. Or use class .mr (margin-right) .ml (mrgin-left), See bootstrap spacing documentaion

`<div class="row">
   <div class="col-4 mr-5">col-4</div>
   <div class="col-4 ml-5">col-4</div>
</div>`

3. Or create a empty column as big as you want the offset to be

`<div class="row">
  <div class="col-4"></div>
  <div class="col">col-4</div>
 </div>`

4. Or use .mr-auto to offset the next column

`<div class="row">
    <div class="col-4 mr-auto">col-4</div>
    <div class="col-4">col-4</div>
 </div>`

See the code in this codepen

Note: Bootstrap Alpha v4 does not have the .offset class, Make sure to use Bootstrap 4.0.

13

In Bootstrap v4 you can use offset-sm-1 like:

<div class="col-sm-10 offset-sm-1">...</div>
10

In Bootstrap 3 col-*-offset-* will work to offset (move to the right) the column, but in Bootstrap 4 this has been changed to offset-*-1, so the markup would be:

<div class="col-sm-10 offset-sm-1">

http://www.codeply.com/go/sbruTFHL6q

1
  • Thanks. This is exactly the problem I was having. One of our offset classes was suddenly not working when upgraded to Bootstrap 4.
    – Cameron
    Feb 10, 2019 at 2:01
0

Basically col-sm-offset-1 will leave amount of space on left and main content put towards right

you can also do this by giving margin-left also...

0

you also have to remember to use the offset offset-* function with the same grid you make use of. e.g <div class="col-lg-2 col-md-6 text-center offset-lg-1"> some text here</div> or <div class="col-sm-2 col-md-6 text-center offset-sm-1"> some text here</div> so as to keep the code clean

0

Actually "offset-1" will leave space of one column on left and make main content towards right, but you can also achieved this by giving "mr" or "margin-right"

0
mr-auto or ml-auto

Did the trick!

5
  • Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. - From Review Sep 9, 2022 at 0:41
  • @Blastfurnace who said thank you? I just added a different option Sep 10, 2022 at 1:49
  • Your different option was already in the top-voted answer from 5 years ago. Sep 10, 2022 at 13:04
  • But your criticism was over 'thank you', where?? Sep 12, 2022 at 1:36
  • 1
    Your answer has the same form as saying “that other answer did the trick”. It’s not that complicated. I’m done with this conversation. Have a nice day. Sep 12, 2022 at 1:40
-1

Inaddition to@Morris you can also center the main column with .mx-auto so you don't need to use mr-auto and ml-auto together.

As said above in bootstrap 3 col offset was used to simulate a column so you don't need to create an empty col.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.