Bootstrap columns not the same width

StackOverflow https://stackoverflow.com/questions/23618633

  •  21-07-2023
  •  | 
  •  

Question

I am trying out Bootstrap but when I use this code to create 1 navbar and then 2 content boxes, their widths are not the same... even if the widths all add up to 12:

<div class="row" id="preview">
    <!-- sidebar 1-->
    <div class="col-md-4 column" id="sidebar" style="border:1px solid; height:600px;"></div>
    <!-- main contents -->
    <div class="col-md-8 column">
        <div class="row" id="main_contents">
            <div class="col-md-4 column" id="content1" style="border:1px solid; height:600px;"></div>
            <div class="col-md-4 column" id="content2" style="border:1px solid; height:600px;"></div>
        </div>
    </div>
</div>

I have tried this as well and this gives the same result:

<div class="row" id="preview">
    <!-- sidebar 1-->
    <div class="col-md-4 column" id="sidebar" style="border:1px solid; height:600px;"></div>
    <!-- main contents -->
    <div class="col-md-8 column">
        <div class="col-md-4 column" id="content1" style="border:1px solid; height:600px;"></div>
        <div class="col-md-4 column" id="content2" style="border:1px solid; height:600px;"></div>
    </div>
</div>
Was it helpful?

Solution

In bootstrap 3 all column sizes are in percents, not fixed like they where in v2.

Each row's columns should add up to 12 now.

Change those inner col-md-4 to col-md-6 and you should be fine.

Also I would strongly suggest not tampering with their width by adding borders. In theory you should be fine as they use box-sizing: border-box but I would add the borders to some sort of inner wrapper.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top