CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SivaRajini
SivaRajini

Reputation: 7375

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

Please refer below code what 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 output :

                      First Div        Second Div

i want to align the two divs horizontally center to page using bootstrap css. how can i do this ? i dont want to use simple css and floating concept to do this. because i need to make use of the bootstrap css to work in all kind of layouts (i.e. all window size and resolutions ) instead of using media query.

Upvotes: 115

Views: 375619

Answers (12)

Adivhaho Mavhungu
Adivhaho Mavhungu

Reputation: 543

Alternative for bootstrap 5

<div class="container">
  <div class="row">
    <div class="col-sm">
      Column
    </div>
    <div class="col-sm">
      Column
    </div>
    <div class="col-sm">
      Column
    </div>
  </div>
</div>```

Upvotes: 1

Miguel Gal&#225;n Lerate
Miguel Gal&#225;n Lerate

Reputation: 21

In Bootstrap 4+, col-xs-6 doesn't exist. Instead use col-6:

<div class="container">
    <div class="row">
        <div class="col-6">
            ONE
        </div>
        <div class="col-6">
            TWO
        </div>
    </div>
</div>

Upvotes: 0

Ajay Kumar
Ajay Kumar

Reputation: 3250

Anyone going for Bootstrap 5 (beta as on date), here is what worked for me. In my case, I had to align two items in the card's header section side-by-side:

<div class="card small-card text-white bg-secondary">
    <div class="d-flex justify-content-between card-header">
        <div class="col-md-6 col-sm-6">
            <h4>100+ Components</h4>
        </div>
        <div class="ml-auto">
        <!--<div class="col-md-6 col-sm-6 ml-auto"> -->
            <i class="data-feather hoverzoom" data-feather="grid"></i>
        </div>
    </div>
    <div class="card-body">
        <p>Lorem ipsum dolor sit amet, adipscing elitr, sed diam
            nonumy eirmod tempor ividunt labor dolore magna.</p>
    </div>
</div>

The catch here is justify-content-between and ml-auto. You can get more info here at the official link. And a live working example here.

Upvotes: 1

Shijitha
Shijitha

Reputation: 191

Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>

Upvotes: 0

Yuqiu G.
Yuqiu G.

Reputation: 345

I recommend css grid over bootstrap if what you really want, is to have more structured data, e.g. a side by side table with multiple rows, because you don't have to add class name for every child:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css-grid

Upvotes: 0

sam sergiy klok
sam sergiy klok

Reputation: 628

Alternative which I did programming Angular: 

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

Upvotes: 1

Michael Novello
Michael Novello

Reputation: 80

The response provided by Ranveer (second answer above) absolutely does NOT work.

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

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

Upvotes: 0

ErTR
ErTR

Reputation: 905

Alternate Bootstrap 4 solution (this way you can use divs which are smaller than col-6):

Horizontal Align Center

<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

Upvotes: 19

Sayo Komolafe
Sayo Komolafe

Reputation: 998

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

This does the trick.

Upvotes: 5

Dev Rathi
Dev Rathi

Reputation: 761

To align two divs horizontally you just have to combine two classes of Bootstrap: 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>

Upvotes: 5

Billy Moat
Billy Moat

Reputation: 21050

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

Upvotes: 236

Ranveer
Ranveer

Reputation: 6863

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.

Upvotes: 40

Related Questions