Why doesn't my Bootstrap 3 row fill the parent width? - html

Question

I'm trying to use Bootstrap 3 to make a grid-based template for a modal (which I'm also using Bootstrap for). The modal appears, and all the content is there ... but the styling is off. It looks like the row classes don't fill their parent containers, even though there's no styling that should make that happen. Here's a screenshot - you can see that neither the row in the header nor the row in the body take the width of their parent. I've tried poking around other SO posts for information, but I can't seem to find anything on why a row wouldn't fill its parent width.
Update:
Here's a JSFiddle. It looks like it actually works on JSFiddle ... which means it's not a problem with the immediate template, so I'm looking into other possible causes. Thanks for the tip, calvin!
HTML
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ht-modal-header">
<h1>
Bombay Teen Challenge
</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<address>
1 Chium Village, Ambedkar Road<br/>
Bandra West<br/>
Mumbai 400052
</address>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<abbr>e: </abbr> kkdevaraj#bombayteenchallenge.org<br/>
<abbr>p: </abbr> [phone]
</div>
</div>
</div>
<div class="modal-body ht-modal-body">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="types">
<span class="prevention-label"></span> Prevention, Education, Teen
</div>
<div class="facebook">
<span class="fa fa-facebook-square fa-2x"></span> BombayTeenChallenge
</div>
<div class="twitter">
<span class="fa fa-twitter-square fa-2x"></span> #BombayTC
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="people">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>People: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>Partners: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
None Available
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
LESS
.prevention-label {
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
background-color: #4ECDC4;
}
.ht-modal-header {
a {
&:hover, &:focus {
color: white;
}
color: white;
}
color: white;
background: linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -webkit-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -o-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -moz-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
}

Answer 1

If you nest rows in columns you must understand that inside a .col-lg-6 .row the whole thing starts new (at 100%) and for you you to fill it have to use .col-lg-12 inside of it.
This snippet should work for you
<div class="col-sm-6">
<div class="people">
<div class="row">
<div class="col-sm-12">
<label>People: </label>
</div>
<div class="col-sm-12">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-sm-12">
<label>Partners: </label>
</div>
<div class="col-sm-12">
None Available
</div>
</div>
</div>
</div>