Bootstrap 3 grid system offset
Question
I'm using the bootstrap 3 grid system and I'm wondering how I can get the 'Contact Details' tab to show under the 'Date of Birth' tab without any large white blank space?
I've attached some of the code used on the page which you can see being replicated on the screenshot. You will see from the code that the 'Contact Details' are quite a bit down the page. I am able to figure out the offset but just not the placement of the code.
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>
1 answers
solution1
0 2018-04-15 16:28:34
You can get the 'contact details' part just below 'date of birth' part if you put both of them inside same div element. Try this code.
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Role of push/pull and offset in Bootstrap grid system
bootstrap grid offset gap
Bootstrap Grid and column offset
Bootstrap grid offset not centering
Bootstrap Grid Offset Quetsion
Bootstrap grid style is ignoring offset
Bootstrap 3 - grid system and thumbnail
Bootstrap GRID System possible?
Bootstrap grid system with table
Bootstrap Grid-System
Related Tags