Bootstrap

Bootstrap 4 offset right left and center and anywhere

How to offsetting columns with Bootstrap offset class.

Bootstrap offset class is a blank column system. its allow to to place blank column before or after your content column. in this tutorial we will show you how to use the bootstrap offset classes.

Bootstrap 4 offset right left and center and anywhere

Bootstrap 4 Offset Example

This is a example of Bootstrap offset. Center column is offsetted between this two column col-md-4 column.

Bootstrap 4 Offset Example example preview

.col-md-4
offseted col
Its will be free space. can't place any content
.col-md-4 .offset-md-4

HTML Code

Bootstrap 4 Offset Example required HTML code

 


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


Bootstrap 4 Offset Left

Bootstrap 4 Offset Left

Bootstrap 4 Offset Left example preview

offseted col
Its will be free space. can't place any content
.col-md-4
.col-md-4 .offset-md-4

HTML Code

Bootstrap 4 Offset Left required HTML code

 


<div class="row">
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>


Bootstrap 4 Offset Right

Bootstrap 4 Offset Right

Bootstrap 4 Offset Right example preview

.col-md-4
.col-md-4 .offset-md-4
offseted col
Its will be free space. can't place any content

HTML Code

Bootstrap 4 Offset Right required HTML code

 


<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">
.col-md-4 .offset-md-4</div>
</div>


Next entry: Bootstrap 4 NavBar Menu Items to right align
Prev entry: Bootstrap 4 Accordion Menu with arrow and icon example