Col-md-12 is not working properly inside col-md-6?

Question

Below is my code structure. I am trying to give full width to email column by using col-md-12 class but it's not working. I tried adding width:100% manually but still its not working.

The below is snapshot of how my view looks:

HTML Code Structure:

<div class="col-md-6 left-side-border-right"><!-- LEFT Column Containing EQ User Fields Start -->
                                   <div class="row">
                                       <section class="col-md-6">
                                           <label class="label">{{EvaluationClientFrontEndForm.getLabel("first_name")}}</label>
                                           <label class="input">
                                               {{ EvaluationClientFrontEndForm.render("first_name", ["class": "form-control"]) }}
                                           </label>
                                       </section>
                                       <section class="col-md-6">
                                             <label class="label">{{EvaluationClientFrontEndForm.getLabel("last_name")}}</label>
                                             <label class="input">
                                                 {{ EvaluationClientFrontEndForm.render("last_name", ["class": "form-control"]) }}
                                             </label>
                                       </section>
                                   </div>

                                  <div class="row">
                                      <section class="col-md-12">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("email")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("email", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                  </div>

                                  <div class="row">
                                        <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("phone")}}</label>
                                            <label class="input">
                                                {{ EvaluationClientFrontEndForm.render("phone", ["class": "form-control"]) }}
                                            </label>
                                        </section>
                                  </div>

                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("age")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("age", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                      <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("gender")}}</label><br>
                                            <input type="radio" name="gender" value="male"> Male
                                            <input type="radio" name="gender" value="female"> Female<br>
                                      </section>
                                  </div>


                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("current_weight")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("current_weight", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                      <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("goal_weight")}}</label>
                                            <label class="input">
                                                {{ EvaluationClientFrontEndForm.render("goal_weight", ["class": "form-control"]) }}
                                            </label>
                                      </section>
                                  </div>

                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("skype_id")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("skype_id", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                  </div>

                            </div><!-- LEFT Column Containing EQ User Fields Ends -->

Let me know if any further details is required! Any help will be highly appreciated. Again Thank you so much.

Thanks

Answer 1

To make it full width, you should use the .btn-block as mentioned in the documentation. It likely needs to be a block level element in order to be full width.

Answer 2

Bootstrap provides some examples. Yours is very similar to "Checkout Form": http://getbootstrap.com/docs/4.1/examples/checkout/

I recommend you take a look at it as it was designed and implemented by the bootstrap team. You'll find out good practices (when and how to use row, key classes to ensure responsiveness, etc).