What provides the space in between the labels and inputs when using bootstrap?
In the picture above you will see mailing address 1 has a nice space after the input but the rest are pretty close together. What is causing this space? I want it in between all of mine. Just curious of what is causing it.
<div class="row">
<div class="col-lg-12">
<label for="firstname_<cfoutput>#Add#</cfoutput>">Name of <cfoutput>#numberMapping[Peoplecount]#</cfoutput> owner as it appears on driver license:</label>
<div class="form-group">
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="firstname_#Add#" id="firstname_#Add#" placeholder="First" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["firstname_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="middlename_#Add#" id="middlename_#Add#" placeholder="Middle" maxlength="100" value="#session.checkout.info["middlename_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="lastname_#Add#" id="lastname_#Add#" placeholder="Last" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["lastname_" & Add]#" /></cfoutput>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label for="birthmonth_<cfoutput>#Add#</cfoutput>">Date of birth:</label>
<div class="form-group">
<div class="col-lg-4">
<cfinclude template="../ddl/birthmonth.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthday.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthyear.cfm">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-lg-12">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-7">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-2">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-5">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="street_<cfoutput>#Add#</cfoutput>">Mailing address 1:</label>
<cfoutput><input type="text" class="form-control input-sm" name="street_#Add#" validateat="onSubmit" validate="maxlength" id="autocomplete#Add#" size="54" maxlength="120" required="yes" onFocus="geolocate()" value="#session.checkout.info["street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-7">
<label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing address 2:</label>
<cfoutput><input type="text" class="form-control input-sm" name="m2street_#Add#" placeholder="Apartment, suite, unit etc. (optional)" validateat="onSubmit" validate="maxlength" id="route#Add#" size="54" maxlength="120" value="#session.checkout.info["m2street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-4">
<label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
<cfoutput><input type="text" class="form-control input-sm" name="city_#Add#" validateat="onSubmit" validate="maxlength" id="locality#Add#" size="30" maxlength="50" required="yes" value="#session.checkout.info["city_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<label for="state_<cfoutput>#Add#</cfoutput>" class="labelspace">State:</label>
<cfoutput><input type="text" class="form-control input-sm" name="state_#Add#" validateat="onSubmit" validate="maxlength" id="administrative_area_level_1#Add#" size="26" maxlength="50" required="yes" value="#session.checkout.info["state_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label for="postal_<cfoutput>#Add#</cfoutput>">Zip code:</label>
<cfoutput><input type="text" class="form-control input-sm" name="postal_#Add#" id="postal_code#Add#" size="8" maxlength="12" required="yes" value="#session.checkout.info["postal_" & Add]#" /></cfoutput>
</div>
</div>
</div>
For 'Mailing address 1', your form-group is inside the col-lg-7.
Related
I use bootstrap 5
I have a form and i try to put first name and last name on the same row
<form >
<div id="executorsSection">
<br>
<div id="executorSection" class="form-row shadow-lg p-3 mb-3 bg-white rounded">
<div class="form-group col-md-6">
<label for="firstname" class="form-label">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Éric">
</div>
<div class="form-group col-md-6">
<label for="lastname" class="form-label">Lastname</label>
<input type="text" class="form-control" id="lastname" placeholder="Tremblay">
</div>
<div class="col-12">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" placeholder="Brossard">
</div>
</div>
</div>
<div id="executorSectionAdd">
Add a new client
</div>
</form>
An example here
https://www.codeply.com/p/5QTI9XqG65
I have a form and am having a problem trying to style it.
Here is what it looks like now:
I need it to look like this:
I need to style the first row and column for the Title and the 2nd row 3rd column for to date of birth.
I'm having trouble targeting the correct selector/element. Here is what the html looks like:
<h6 class="title">Personal Information</h6>
<div class="row">
<div class="col-3">
<select name="title"></select>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="firstname" value="" id="firstname"
maxlength="50" size="50" class="" placeholder="First name*"
style="background-image: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=");
background-repeat: no-repeat; background-attachment:
scroll; background-size: 16px 18px;
background-position: 98% 50%; cursor: auto;">
<!--<input type="text" placeholder="First name*">-->
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="lastname" value="" id="lastname"
maxlength="50" size="50" placeholder="Last name*">
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="dob" value="" id="dob" maxlength="50"
size="50" placeholder="Date of birth (DD/MM/YYYY)*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="mobile" value="" id="mobile"
maxlength="50" size="50" placeholder="Mobile*">
<div class="form_error"></div>
<!--<input type="tel" placeholder="Mobile*">-->
</div>
<div class="col-3">
<input type="email" name="email" value="" id="email"
maxlength="50" size="50" placeholder="Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Email*">-->
</div>
<div class="col-3">
<input type="text" name="emailconf" value="" id="emailconf"
maxlength="50" size="50" placeholder="Confirm Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Confirm Email*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-1">
<input type="text" name="address1" value="" id="address1"
maxlength="50" size="50" placeholder="Address*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Address*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="suburb" value="" id="suburb"
maxlength="50" size="50" placeholder="Suburb*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Suburb*">-->
</div>
<div class="col-3">
<select name="stateid">
</select>
</div>
<div class="col-3">
<input type="text" name="postcode" value="" id="postcode"
maxlength="4" size="10" placeholder="Postcode*">
<div class="form_error"></div>
</div>
</div>
Any help is greatly appreciated
to make the structure better I would say load bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
and use this markup:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Personal Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="First name">
</div>
<div class="col-md-4">
<input type="text" placeholder="Last name">
</div>
<div class="col-md-2">
<input type="date">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Mobile">
</div>
<div class="col-md-4">
<input type="email" placeholder="Email">
</div>
<div class="col-md-4">
<input type="email" placeholder="Confirm Email">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Address">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Suburb">
</div>
<div class="col-md-4">
<select>
<option value="mr">NSW</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="Post Code">
</div>
</div>
</div>
and you can customize the look of the form fields, just put this code after you load the Bootstrap
input, select { width:100%; padding:14px; margin:10px 0; border:2px solid #6aa295; }
You should use something like this. And bootstrap is responsive so You could see how it look on the expand view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-12">
<h2><p class="text-center">Personal Information</p></h2>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<select class="form-control">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="firstname" class="form-control" placeholder="First name *">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="lastname" class="form-control" placeholder="Last name *">
</div>
<div class="col-md-2">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="mobile" class="form-control" placeholder="Mobile *">
</div>
<div class="col-md-4">
<input type="email" id="email" class="form-control" placeholder="Email *">
</div>
<div class="col-md-4">
<input type="email" id="emailconf" class="form-control" placeholder="Confirm Email *">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" id="address1" class="form-control" placeholder="Address *">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="suburb" class="form-control" placeholder="Suburb *">
</div>
<div class="col-md-4">
<select class="form-control">
<option class="collapse" value="mr">Info</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="postcode" class="form-control" placeholder="Post Code *">
</div>
</div>
</form>
</div>
I am using bootstrap in an attempt to create a form. Part of the form involves inputting social media links (FB, Linkedin & Twitter). I would like all of these inputs to be within one row - how can I do this? Thanks in advance.
http://jsfiddle.net/qn4mxqrq/1/
<HTML>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2" id="upload_photo">
<input type="image" src="img/square_face.png" alt="Submit" >
<br>
<br>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6" id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address </label>
<input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control input" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control input" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs -->
<div class="form-group"><!--Start Facebook Input -->
<label class="col-lg-2 control-label" name="facebook"></label>
<div class="col-lg-10">
<input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div><!--End Facebook Input -->
<div class="form-group"><!--Start Linkedin Input -->
<label class="col-lg-2 control-label" name="linkedin"></label>
<div class="col-lg-10">
<input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div><!--End Linkedin Input -->
<div class="form-group"><!--Start Twitter Input -->
<label class="col-lg-2 control-label" name="twitter"><img src=></label>
<div class="col-lg-10">
<input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div><!--End Twitter Input -->
</div> <!--End Social Media inputs -->
<CSS>
.container_upload{
width:1000px;
margin-left:60px;
}
#upload_photo{
height:150px;
width:300px;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373
}
#upload_basic_info{
height:275px;
}
#upload_fb{
background: url(img/fb.png) no-repeat scroll 7px 7px;
padding-left:30px;
}
</CSS>
You can simply place those three inputs in an single row and apply col-*-4 to each.
See working example Snippet.
body {
padding-top: 50px;
}
#upload_culprit_photo {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" />
</div>
<div class="col-xs-12 col-sm-6" id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label name="facebook">Facebook</label>
<input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label name="linkedin">LinkedIn</label>
<input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label name="twitter">Twitter</label>
<input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div>
</div>
</div>
I found a workaround, you can actually do it like this:
<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs -->
<!-- EDIT THIS CLASS (and the two others) -->
<div class="form-group col-xs-4"><!--Start Facebook Input -->
<label class="col-lg-2 control-label" name="facebook"></label>
<div class="col-lg-10">
<input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div><!--End Facebook Input -->
<div class="form-group col-xs-4"><!--Start Linkedin Input -->
<label class="col-lg-2 control-label" name="linkedin"></label>
<div class="col-lg-10">
<input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div><!--End Linkedin Input -->
<div class="form-group col-xs-4"><!--Start Twitter Input -->
<label class="col-lg-2 control-label" name="twitter"><img src=""></label>
<div class="col-lg-10">
<input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div><!--End Twitter Input -->
</div> <!--End Social Media inputs -->
EDIT: Sorry, it looks like I missread the original problem. So #Manuel Choucino's answer seems to be the good one.
Just use left floats.
.class{float:left;}
If I have understood what you want correctly:
http://jsfiddle.net/qn4mxqrq/4/
This is an edited version of your code.
When I look at your code, there is one Class name that control all of group. form-group.
in your CSS just create rules for that socialForm.
.socialForm{
float: left;
}
Here adding bootstrap classes like col-lg,col-md,col-sm,col-xs every class will work different devices.example:col-lg its works in large size desktop(1920 *1080 resolution ),col-md works in medium size desktop(1366*768 resolution )
,col-sm works in tablets and col-xs works in mobiles
Hope my answer will work in all devices.
body {
padding-top: 50px;
}
#upload_culprit_photo {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
<input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 " id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="facebook">Facebook</label>
<input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="linkedin">LinkedIn</label>
<input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="twitter">Twitter</label>
<input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div>
</div>
</div>
should be an easy one.
Why does the offsetX class not work on the 2 last divs?
<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
<div class="controls ">
<input class="span12" type="text" placeholder=".span12">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span8" type="text" placeholder=".span8">
</div>
<div class="controls controls-row ">
<input class="span9" type="text" placeholder=".span9">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row ">
<input class="span6" type="text" placeholder=".span6">
<input class="span6" type="text" placeholder=".span6">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span6 offset2" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row ">
<input class="span4 offset2" type="text" placeholder=".span4 offset2">
<input class="span6 " type="text" placeholder=".span6 ">
</div>
</form>
can be tested here: http://jsfiddle.net/b0zqnmbL/
You need to assign the offset-* classes to the parent since offset with input span elements is being overridden by the Bootstrap rule below.
input[class*="span"] { margin-left: 0; }
Since you need to retain the control classes and also in the same line, I have modified the markup and also added a media query.
Modified code:
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
</div>
<div class="controls controls-row offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row offset2">
<input class="span4" type="text" placeholder=".span4 offset2">
</div>
<div class="controls controls-row ">
<input class="span6 " type="text" placeholder=".span6 ">
</div>
#media (min-width: 768px) {
.controls-row {
display: inline-block;
}
}
Updated JSfiddle
Use
<div class="offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
instead of
<input class="span6 offset2" type="text" placeholder=".span6 offset2">
UPDATE:
It's behaving funny.
I got it working by the following code:
I know It's not the exact answer but if you can get away with it meanwhile ;)
<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
<div class="controls ">
<input class="span12" type="text" placeholder=".span12">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span8" type="text" placeholder=".span8">
</div>
<div class="controls controls-row ">
<input class="span9" type="text" placeholder=".span9">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row ">
<input class="span6" type="text" placeholder=".span6">
<input class="span6" type="text" placeholder=".span6">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<div class="span2" ></div>
<div class="offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
</div>
<div class="controls controls-row">
<div class="offset2">
<input class="span4" type="text" placeholder=".span4 offset2">
</div>
<input class="span6 " type="text" placeholder=".span6 ">
</div>
</form>
Or I would suggest an alternative if you're not very much strict on using offset2 only:
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<div class="span2" ></div>
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row">
<div class="span2"></div>
<input class="span4" type="text" placeholder=".span4 offset2">
<input class="span6 " type="text" placeholder=".span6 ">
</div>
Not elegant at all, but so far I get better results than Megh Vidani and Manoj Kumar's solutions:
...
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<label class="span2" ></label>
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
...
Ugly but 100% efficient.
All feel free to post more elegant solutions.
I am creating a multi column form using Bootstrap 3.
Here is the first column.
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form class="form-inline" role="form">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
</div>
<div class="form-group">
<label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
</div>
<div class="form-group nopadding">
<label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
</div>
</div>
//other column
</div>
</form>
</div>
</div>
</div>
However, I got the first column looks like this.
I wanted to align the text fields to the right so I added the "pull-right" class to the div that encapsulated the text field of ID. However, it doesn't work.
Here is the JSFiddle link, you will find the nopadding class in the link, it just remove the padding.
The result box of JSFiddle is not large enough by default, you will need to pull the result box to get the result I got.: JSFiddle link
add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">
I would suggest something like that:
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="givenName" class="col-sm-2 control-label">Given Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="middleName" class="col-sm-2 control-label">Middle Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
</div>
</div>
</form>
http://jsfiddle.net/y838v/3/
Based on http://getbootstrap.com/css/#forms-horizontal