CODEWITHSUNDEEP
csstwitter-bootstrap
kazuo
kazuo

Reputation: 297

Bootstrap columns not the same width

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>

Upvotes: 0

Views: 6235

Answers (1)

Pevara
Pevara

Reputation: 14310

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.

Upvotes: 3

Related Questions