Floating div in bootstrap

Question

I have a contact form and I'mm trying to style it up so the recaptcha and submit botton floats left and sits below the contact Number field like so

The Contact Number field and Your message field are both set to take 6 columns on > medium devices but because the message field is multiple rows and has a gretaer height i would like to float the recaptcha and submit button in the area generated below the contact number.

How is this possible using bootstrap please? Can it be done?

My form code is as follows

<!-- Contact section -->
<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Contact Us</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div><!-- /.row -->
        <div class="row">
            <div class="col-lg-12">


<form action="/" enctype="multipart/form-data" method="post">    <fieldset>
          <legend>Contact Form</legend>
        <div class="col-md-6">
            <div class="form-group">
                <label for="FullName">Full Name</label>
                <input class="form-control" data-val="true" data-val-required="The Full Name field is required." id="FullName" name="FullName" placeholder="Full Name" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="FullName" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="Email">E-Mail</label>
                <input class="form-control" data-val="true" data-val-email="The E-Mail field is not a valid e-mail address." data-val-required="The E-Mail field is required." id="Email" name="Email" placeholder="Email Address" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="ContactNumber">Contact Number</label>
                <input class="form-control" data-val="true" data-val-email="The Contact Number field is not a valid e-mail address." id="ContactNumber" name="ContactNumber" placeholder="Contact Number" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="ContactNumber" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="Message">Message</label>
                <textarea class="form-control" cols="20" data-val="true" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Your Message" rows="2">
</textarea>
                <span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="recaptcha col-md-6">
            <div class="g-recaptcha" data-sitekey="#"></div>
            <span class="field-validation-valid" data-valmsg-for="Captcha" data-valmsg-replace="true"></span>
            <input type="submit" id="submit" name="submit" value="Send Message" class="btn btn-primary btn-lg btn-block btn-biru"/>
        </div>
    </fieldset>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</form>                
            </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</section>

Here is a fiddle of my form if it helps you help me :)

https://jsfiddle.net/cmstzmyv/

Answer 1

You should set your layout as having 2 columns. Instead of x col-md-6, just set your left content in a first col-xx-6 and the right area in another col-xx-6

Here is a bootply : http://www.bootply.com/zXGGqQTe1A

HTML

          <form action="/" enctype="multipart/form-data" method="post">    <fieldset>
                    <legend>Contact Form</legend>
                  <div class="col-md-6">
                       <div class="form-group">
                          <label for="FullName">Full Name</label>
                          <input class="form-control" data-val="true" data-val-required="The Full Name field is required." id="FullName" name="FullName" placeholder="Full Name" value="" type="text">
                          <span class="field-validation-valid" data-valmsg-for="FullName" data-valmsg-replace="true"></span>
                      </div>
                      <div class="form-group">
                          <label for="ContactNumber">Contact Number</label>
                          <input class="form-control" data-val="true" data-val-email="The Contact Number field is not a valid e-mail address." id="ContactNumber" name="ContactNumber" placeholder="Contact Number" value="" type="text">
                          <span class="field-validation-valid" data-valmsg-for="ContactNumber" data-valmsg-replace="true"></span>
                      </div>
                    <div class="recaptcha">
                        <div class="g-recaptcha" data-sitekey="#"></div>
                        <span class="field-validation-valid" data-valmsg-for="Captcha" data-valmsg-replace="true"></span>
                        <input id="submit" name="submit" value="Send Message" class="btn btn-primary btn-lg btn-block btn-biru" type="submit">
                    </div>
                  </div>
                  <div class="col-md-6">
                      <div class="form-group">
                          <label for="Email">E-Mail</label>
                          <input class="form-control" data-val="true" data-val-email="The E-Mail field is not a valid e-mail address." data-val-required="The E-Mail field is required." id="Email" name="Email" placeholder="Email Address" value="" type="text">
                          <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
                      </div>
                      <div class="form-group">
                          <label for="Message">Message</label>
                          <textarea class="form-control" cols="20" data-val="true" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Your Message" rows="2">                              </textarea>
                          <span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span>
                      </div>
                  </div>
              </fieldset>
              <script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
          </form>