html - Bootstrap col-* not taking full width -


i have 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, .row divs take full width of parent outer div (as expected) ones col-lg-12 or (col-lg-6 + col-lg-6) not taking full width.

enter image description here

i expecting black boxes divided equally inside red box. not applying other styles html.

because parent col-lg-6, change col-lg-12

see more twitter-bootsrap grid here

update -based on updated well

you have unnecessary markup. 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>


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -