Align two divs horizontally side by side to page using css bootstrap

Question

Please see below code I tried

<div class="row"> <div class="center-block">First Div</div> <div class="center-block">Second DIV </div> </div> 

output:

 First Div SecondDiv 

Expected Result:

  First Div Second Div 

I want to center two divs horizontally with bootstrap css. How can i do this? I do not want to use simple css and floating concepts for this. because I need to use bootstrap css to work in all types of layouts (i.e. all window sizes and resolutions) instead of using a media query.

Answer 1

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> 

Read the system section of the Bootstrap document system to familiarize yourself with the operation of the Bootstrap grid:

http://getbootstrap.com/css/#grid

Answer 2

Use bootstrap classes col-xx-# and col-xx-offset-#

So what happens here, your screen is divided into 12 columns. In col-xx-# , # is the number of columns that you cover, and offset is the number of columns that you leave.

For xx on a shared website, md preferable, and if you want your layout to look the same on a mobile device, xs preferable.

What can I do from your requirement,

 <div class="row"> <div class="col-md-4">First Div</div> <div class="col-md-8">Second DIV </div> </div> 

Gotta do the trick.

Answer 3

Alternative Bootstrap 4 solution (this way you can use divs that 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 details

Answer 4

To align the two divs horizontally, you just need to combine the two Bootstrap classes: Here's how:

 <div class ="container-fluid"> <div class ="row"> <div class ="col-md-6 col-sm-6"> First Div </div> <div class ="col-md-6 col-sm-6"> Second Div </div> </div> </div> 

Answer 5

 <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> First Div </div> <div class="col-xs-6 col-sm-6 col-md-6"> Second Div </div> </div> 

It does the trick.

Answer 6

The answer provided by Ranveer (second answer above) is absolutely NOT working.

He says use col-xx-offset-# , but that's not how offsets are used.

If you spent time trying to use col-xx-offset-# , as I did based on his answer, the solution is to use offset-xx-# .

Answer 7

The alternative I did with Angular programming:

  <div class="form-row"> <div class="form-group col-md-7"> Left </div> <div class="form-group col-md-5"> Right </div> </div>