Align two divs horizontally side by side center to the page using bootstrap css
Use the bootstrap classes col-xx-#
and col-xx-offset-#
So what is happening here is your screen is getting divided into 12 columns. In col-xx-#
, #
is the number of columns you cover and offset is the number of columns you leave.
For xx
, in a general website, md
is preferred and if you want your layout to look the same in a mobile device, xs
is preferred.
With what I can make of your requirement,
<div class="row">
<div class="col-md-4">First Div</div>
<div class="col-md-8">Second DIV </div>
</div>
Should do the trick.
Alternate Bootstrap 4 solution (this way you can use divs which are smaller than col-6):
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
More
This should do the trick:
<div class="container">
<div class="row">
<div class="col-xs-6">
ONE
</div>
<div class="col-xs-6">
TWO
</div>
</div>
</div>
Have a read of the grid system section of the Bootstrap docs to familiarise yourself with how Bootstrap's grids work:
http://getbootstrap.com/css/#grid