Yasmin de Paula A Yasmin de Paula A - 3 months ago 18
jQuery Question

Centering divs - Bootstrap

Well, divide the piece of content in two divs, col-md-6, only that they are not centralized in relation to the site, despite being in the center, they are placed on the left, leaving the right side a little empty. Follows the code of divs.

<div class="content">

<div class="container clearfix">
<div class="col-md-6 configdiv">
<img src="/layout/images/imagem1.png" />
<h5>TITULO 1</h5>
<p>
Oi, tudo bem? Oi, tudo bem? Oi, tudo bem?
Oi, tudo bem?
Oi, tudo bem?
<p>
<div>
<img src="/layout/images/iconemail.png" />
<img src="/layout/images/iconefb.png" />
<img src="/layout/images/iconett.png" />
</div>
</div>
<div class="col-md-6 configdiv">
<img src="/layout/images/imagem2.png" />
<h5>TITULO 2</h5>
<p>
Oi, tudo bem?
<p>
<div>
<img src="/layout/images/iconemail.png" />
<img src="/layout/images/iconefb.png" />
<img src="/layout/images/iconett.png" />
</div>
</div>
</div>

</div>




And the CSS is this:

.configdiv {border: 1px solid #DDDDDD;
margin-right: 28px;
margin-bottom: 25px;
padding: 10px;


Remembering these two divs al-md-6, are a side by side, I want to be centered over the screen! Content content:

Content----------------------------------------------------*/
#content {
position: relative;
overflow: hidden;
background-color: #FFF;
}

#content p { line-height: 1.8; }

.content-wrap {
position: relative;
padding: 80px 0;
}

#content .container { position: relative; }

Answer

You need to wrap your columns, .col-md-6, in a <div> with a .row class. The way Bootstrap works you're required to wrap all columns inside a row.

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>