Bootstrap Modal and legend tag - html

Question

Hi Everyone I am having an issue where I have a Modal window that has two legend tags. The Line under the Legend tag goes outside the modal window.
When I use the same code outside of a modal window it looks fine. I am sure it is something simple that I just cannot see at this point.
This is just a test so the html is quite ugly..
I have created this jsfiddle! to demonstrate the issue
Here is the relevant code
<div class="container">
<!-- Email Row -->
<div class="form-group">
<fieldset>
<legend>Login Information</legend>
<div class="row">
<form class="form-inline" role="form">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Primary Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Secondary Email">
</div>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Primary Phone -->
<div class="form-group">
<fieldset>
<legend>Phone Details</legend>
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="[phone]" placeholder="Primary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Secondary Phone -->
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="[phone]" placeholder="Secondary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Container -->

Answer 1

You have a <div class="container"> in your modal to which bootstrap gives a responsive width which can be wider than the modal, depending on viewing size. If you remove either the container class or the div then your legend should act as expected. Please note that this will cause your "phone details" forms to wrap.