Creating Bootstrap layout with two divs side by side

Issue

I want to create a page with two Divs side by side with bootstrap styles. But not able to make it right with following code. Can someone able to guide me.

Thanks,

 <style>
    .boxlayout {
    background-color: white ;

    border: 2px solid black;
    padding: 10px;
    margin: 10px;
}
</style>
<div class="border row boxlayout" style="float:left">
  <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 boxlayout" style="float:right">
  <div class="border col-md-3">.col-md-3</div>

  

Solution

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>

Answered By - Julien Bourdic