Creating Bootstrap layout with two divs side by side

user_5863509 0
Viewed 10702

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>

  

twitter-bootstrap css html jquery
5 Answers

1st Solution

Use display: inline-block;

.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;

  display: inline-block;
  vertical-align: top;
}
<div class="border row 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 boxlayout">
  <div class="border col-md-3">.col-md-3</div>
</div>

2nd Solution

Use display: flex;

.container{
  display: flex;
  flex-direction: row;
}

.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}
<div class="container">
  <div class="border row 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 boxlayout">
    <div class="border col-md-3">.col-md-3</div>
  </div>
</div>

user_84370990

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

This is bootstrap-only solution, if I've understood your desire exactly. Run this snippet as fullscreen. (Expand Snippet)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">Left 1</div>
            <div class="col-md-3">Left 2</div>
            <div class="col-md-3">Left 3</div>
            <div class="col-md-3">Left 4</div>
       </div>
    </div>
   <div class="col-md-6">  
        <div class="row">
            <div class="col-md-3">Right 1</div>
            <div class="col-md-3">Right 2</div>
            <div class="col-md-3">Right 3</div>
            <div class="col-md-3">Right 3</div>
       </div>
  </div>
</div>

user_44813120

Using Boostrap v4.3.1, reading the docs here and here :

<div class="container">
    <div class="row justify-content-between"> 
        <div class="col-8">
            <h1 class="font-weight-bold">Hello</h1>
        </div>
        <div class="col-sm d-flex justify-content-end align-items-center">
            <h1 class="font-weight-bold">World</h1>
        </div>
    </div>
</div>
user_131566420 
<div class="row">
  <div class="col-md-2">left</div>
  <div class="col-md-8">content</div>
  <div class="col-md-2">right</div>
</div>

Please follow the grid style of bootstrap

user_80577040
Related