My bootstrap is not showing correctly

[Megafu_Anthony]

Hi Guys,

I am facing serious challenges with my bootstrap modal.

Please I need your help.

Thanks

[Gandalf]

We will need to see your code, either by giving us a web address or posting it.

[Megafu_Anthony]

@gandalf458

Here is the code

<div id="edit-billing-address" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Billing Address</h3>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
      <form id="process-checkout" class="edit_address" action="/addresses/9" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="672QHe3VeRjR4CvaM+FWnLCF/720Xq3SAnseyNkuqrlrI1N9qD1rqJf6FVrsByvphxV48LSFV7iZtSoGmxaGdA==">
      <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <input value="6" type="hidden" name="address[customer_id]" id="address_customer_id">
        <input class="form-control checkout-input  validate[required]" placeholder="First Name" type="text" value="Megafu" name="address[firstname]" id="address_firstname">
      </div>
      <div class="form-group">
        <input class="form-control checkout-input  validate[required]" placeholder="Last Name" type="text" value="Charles" name="address[lastname]" id="address_lastname">
      </div>
    </div>

    <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <input class="form-control checkout-input  validate[required]" placeholder="Street Address" type="text" value="34 Ayanbode Street, Off Ajayi Road, Ogba, Ikeja, Lagos State" name="address[address]" id="address_address">
      </div>
      <div class="form-group">
        <input class="form-control checkout-input  validate[required]" placeholder="City" type="text" value="Ogba" name="address[local_govt]" id="address_local_govt">
      </div>
    </div>

    <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <input class="form-control checkout-input  validate[required]" placeholder="Opposite, Next to, Near by..." type="text" value="Excellence Hotel" name="address[landmark]" id="address_landmark">
      </div>
      <div class="form-group">
        <input class="form-control checkout-input validate[required,custom[phone-number]]" placeholder="Mobile Number" type="text" value="08060108165" name="address[telephone]" id="address_telephone">
      </div>
    </div>

    <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <select class="form-control checkout-select   validate[required]" name="address[state_id]" id="address_state_id"><option value="38">Abia</option>
<option selected="selected" value="39">Abuja</option>
<option value="41">Adamawa</option>
<option value="42">Akwa Ibom</option>
<option value="40">Anambra</option>
<option value="43">Bauchi</option>
<option value="44">Bayelsa</option>
<option value="45">Benue</option>
<option value="46">Borno</option>
<option value="47">Cross River</option>
<option value="48">Delta</option>
<option value="14">Ebonyi</option>
<option value="12">Edo</option>
<option value="13">Ekiti</option>
<option value="15">Enugu</option>
<option value="16">Gombe</option>
<option value="17">Imo</option>
<option value="21">Jigawa</option>
<option value="23">Kaduna</option>
<option value="18">Kano</option>
<option value="25">Katsina</option>
<option value="22">Kebbi</option>
<option value="24">Kogi</option>
<option value="26">Kwara</option>
<option value="19">Lagos</option>
<option value="20">Nassarawa</option>
<option value="27">Niger</option>
<option value="28">Ogun</option>
<option value="29">Ondo</option>
<option value="30">Osun</option>
<option value="31">Oyo</option>
<option value="32">Plateau</option>
<option value="33">Rivers</option>
<option value="34">Sokoto</option>
<option value="35">Taraba</option>
<option value="36">Yobe</option>
<option value="37">Zamfara</option></select>
      </div>
      <div class="form-group">
        <select name="checkout[city_id]" id="checkout_city_id" class="form-control checkout-select   validate[required]">
           <option>Choose Area</option>
        </select>
      </div>
    </div>
</form>  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

  <!-- Page Modals -->


</div>

[PaulOB]

@Megafu_Anthony

Here is the code

Unfortunately that is not enough code to debug the issue. We would need the full, html, css and js or at least enough code to demonstrate the problem.

It looks like a z-index issue if you are referring to the white elements on top of the gray background. You will need to either raise the z-index of the modal or reduce the z-index of elements that are on top.

Assuming the modal is already positioned try raising the z-index.

e.g.

#edit-billing-address{z-index:999}

If you were referring to some other issue then please clarify exactly what the problem is as it may not be obvious to someone looking at your page for the first time.