How to align divs with bootstrap

Question

How to align divs with bootstrap

1.9k views Asked by Procode At 18 September 2024 at 10:34

I have trouble aligning my divs with bootstrap. The big div in the middle is pushing down the boxes at the sides. How can I achieve this layout?

The layout of divs I want to achieve:

Original Q&A

There are 4 answers

Venkatesh Konatham On 28 December 2016 at 11:04

Based on the image you have provided i have created below sample design please check it. In order to achieve your design i have written some inline css please check it as well

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      
    <div class="container">
      <div class="row">
      <div class="col-lg-3 col-sm-3 col-xs-3" >
        <div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
          This is testing data
          </div>
         <div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
        </div>
       <div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
        This is center content
        </div>
       <div class="col-lg-3 col-sm-3 col-xs-3" >
       <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
         <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
         <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
        </div>
        </div>
    </div>

    </body>
    </html>

Imran Mohammed On 28 December 2016 at 11:06

Declare three main divs and place children divs in it. Check below image. In responsive status parent 100% children side by side

https://i.stack.imgur.com/1qTPG.png

Bhavin Shah On 28 December 2016 at 12:00

.border_black{
  border: thin black solid
 }

 .margin_top_10px{
  margin-top: 10px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
 <div class="row">

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
  <div class="row border_black">
  <p>Left Side Contents 1</p>
  </div>
  <div class="row border_black margin_top_10px">
  <p>Left Side Contents 2</p>
  <p>Left Side Contents 2</p>
  </div>
 </div>

 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
  <div class="row">
  <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
  <p>Center Contents</p>
  <p>Center Contents</p>
  <p>Center Contents</p>
  </div>
  </div>
 </div>

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
  <div class="row border_black">Right Side Contents 1</div>
  <div class="row border_black margin_top_10px">Right Side Contents 2</div>
  <div class="row border_black margin_top_10px">Right Side Contents 3</div>
  
 </div> 
 </div>
 </div>

Here is JSFiddle

Hope this helps.

**avilac** · Accepted Answer · 2016-12-28 11:03:45

I've been working with this code, tell me if it's what you need:

HTML:

<div class="row">
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 medium">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 medium">
        </div>
    </div>      
  </div>
  <div class="col-md-6">
    <div class="row ">  
        <div class="col-md-12 large">
        </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>          
  </div>  
</div>

CSS:

.small{
    height:100px;
    border: 1px solid;
}

.medium{
    height:200px;
    border: 1px solid;
}

.large{
    height:400px;
    border: 1px solid;  
}

Hope it helps!

TechQA.

How to align divs with bootstrap

There are 4 answers

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP-3

Related Questions in GRID-SYSTEM

Popular Questions

Popular Tags

Trending Questions