My goal is to create a grid-based modal template using Bootstrap 3. The modal displays correctly with all the content but the styling seems to be incorrect. It appears that the row classes are not filling their parent containers, even though there are no specific styles causing this issue. Refer to this screenshot for visualization - you'll notice that neither the header nor the body rows expand to the width of their container. I've searched through various Stack Overflow posts for solutions, but so far have found no explanation as to why a row wouldn't stretch to its parent's width.
Update:
Here's a link to a JSFiddle. Surprisingly, it seems to work on JSFiddle which indicates that the immediate template isn't the problem. Therefore, I'm now exploring other potential causes for this issue. Thanks for pointing me in the right direction, Calvin!
HTML
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ht-modal-header">
<h1>
<a href="#">Bombay Teen Challenge</a>
</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> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e65656a6b786f7c6f644e6c61636c6f777a6b6b606d666f62626b60696b20617c69">[email protected]</a><br/>
<abbr>p: </abbr> +91 22 2604 2242
</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%));
}