Align Two Divs Horizontally Side by Side Center to The Page Using Bootstrap CSS

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

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

Creating Bootstrap layout with two divs side by side

You have to put your two divs in a row and give them the appropriate number of columns. Bootstrap is based on a 12 columns layout. So if you want two divs side by side the addition of the two numbers of columns should be inferior or equal to 12 :

<div class="row">
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
    </div>
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
</div>

bootstrap grid align 2 divs in one row one in the page center other to the right

I don't think you can achieve this with bootstrap only using 2 child div elements. What you can do is create a placeholder div with no content and give it a col class equal to the right side div. This will push your content to the center while using only bootstrap.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/boots>trap/3.0.0/js/bootstrap.min.js"></script>

<div class="d-flex text-center">
  <div class="col-xs-3"></div>
  <div class="col-xs-6">
    I have some Content
  </div>
  <div class="col-xs-3">
    I also have more content
  </div>
</div>

Horizontally center two divs in a row with Bootstrap

I think you should use helper class from bootstrap 'center-block' and then use 'col-xx-offset' to skip grid columns at the beginning of inner divs.

<div class="col-sm-10 center-block">

<div class="col-md-offset-2 col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

<div class="col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

How to put two divs on same line in bootstrap

Try this Jsfiddle link here. To fix this issue I have used only three bootstrap classes .d-flex, .align-items-center and .d-inline-block.
It is not a best practice, applying .row and .col classes everywhere in your layout. You need to understand the right place for their application.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="d-flex align-items-center">            <div class="d-inline-block">                <h2 id="product-name" class="">Stickers troquelados</h2>            </div>            <div class="d-inline-block">                    <span class="">                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star-half-alt"></i>                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->                            858 comentarios                    </span>            </div>    </div>

Aligning two divs side-by-side

If you wrapped your divs, like this:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

You could use this styling:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.

Update based on comments: For this off-centered look, you can do this:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

With this styling:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

Align two divs in bootstrap

From your code:

<div class="col-sm-3 col-md-2 sidebar">
  [...]
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  [...]
</div>

The problem is that your grid has 3 + 9 + 3 (offset) = 15 columns on small screen (col-sm-X), and 2 + 10 + 2 (offset) = 14 columns on medium screen (col-md-X).

The bootstrap grid has only 12 columns by default.

Removing the offsets should make it work

<div class="col-sm-3 col-md-2 sidebar">
  [...]
</div>
<div class="col-sm-9 col-md-10 main">
  [...]
</div>

Bootstrap side by side divs, one with fixed size?

Here's an example of how to do it using flex-boxes. (Not using bootstrap)

.parent-div {  display: flex;}
.first-div {  width: 140px;  height: 100px;  background: blue; }  .second-div { height: 100px; width: 100%;  background: green; }

<div class="parent-div">    <div class="first-div">    </div>    <div class="second-div">    </div></div>

---

Related Topics