Menu
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/
912
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 −
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.
. col-md-offset-2 make a space between 2 col-md-* in a row , check image below. Hope this help. Save this answer.
The offset CSS shorthand property sets all the properties required for animating an element along a defined path.
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
.offsetclass, Make sure to use Bootstrap 4.0.
165
In Bootstrap v4 you can use offset-sm-1 like:
<div class = "col-sm-10 offset-sm-1">
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
