Mahesh February 2016

Bootstrap col-* not taking full width

I have the following code:

<div class="row row-space">
    <div class="row" style="border: 1px solid red;">
        <div class="col-lg-6" style="border: 1px solid black;">
            <div class="row">
                <div>CHILD A</div>
            </div>
        </div>
        <div class="col-lg-6" style="border: 1px solid black;">
            <div class="row">
                <div>CHILD B</div>
            </div>
        </div>
    </div>
</div>

The problem is, all .row divs take full width of parent outer div (as expected) but the ones with col-lg-12 or (col-lg-6 + col-lg-6) are not taking the full width.

enter image description here

I am expecting the black boxes to be divided equally inside the red box. I am not applying any other styles to the HTML.

Answers


dippas February 2016

Because their parent is col-lg-6, change to col-lg-12

See more about twitter-bootsrap grid here

UPDATE -based on your updated as well

You have extra unnecessary markup. So see snippet below:

Snippet

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-space" style="border: 1px solid red">
    <div class="col-lg-6" style="border: 1px solid black;">
      <div>CHILD A</div>
    </div>
    <div class="col-lg-6" style="border: 1px solid black;">
      <div>CHILD B</div>
    </div>
</div>


reatlat February 2016

add div container with class "container-fluid" with max-width: 900px;

for example codepen.io

<div class="container-fluid">
<div class="row row-space">
  <div style="border: 1px solid red;" class="row">
    <div style="border: 1px solid black;" class="col-lg-6">
      <div class="row">
        <div>CHILD A</div>
      </div>
    </div>
    <div style="border: 1px solid black;" class="col-lg-6">
      <div class="row">
        <div>CHILD B</div>
      </div>
    </div>
  </div>
</div>

.container-fluid{
   max-width: 900px;
}

Post Status

Asked in February 2016
Viewed 3,335 times
Voted 12
Answered 2 times

Search




Leave an answer