I have section divs inside my form. And Each section can have multiple fields. It works fine with Bootstrap 2.3 css. When I replaced it with Bootstrap 3.0 css, all the fields came out of the section div. I tried inspecting the element but could not find any difference.
CSS
.section {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #649300;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
HTML
<div class="section" name="amount">
<span class="section-title">Amount Information</span>
<div class="span6 form-inline">
<label class="pocLabel">
Amount Of</label>
<input type="text" name="amount" required="">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
Customer First Name</label>
<input type="text" name="firstName" required="">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
Customer Last Name</label>
<input type="text" name="lastName" required="">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
Middle intials</label>
<input type="text" name="middleIntials" required="">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
Date</label>
<input type="text" id="datepicker" class="datepicker" name="date">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
Street Address</label>
<input type="text" name="address">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
City</label>
<input type="text" name="city">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
State</label>
<input type="text" name="state">
</div>
<div class="span6 form-inline">
<label class="pocLabel">
State 2</label>
<input type="text" name="state">
</div>
</div>
Bootstrap 3 has obsoleted the spanX classes. Replace those with col-lg-X classes.
See this migration guide from v2.x to v3 of Bootstrap.
Try closing your input tags, leaving them open may cause problems.
Example:
<input type="text" name="state"></input>
Or:
<input type="text" name="state" />
Related
I am working on a personal project, and I need to make some changes to my current form but I cannot get it working so far.
I need the label and input to be inline. Here is a screenshot how the form should look like.
And here is my current code:
.personal_details {
max-width: 503px;
float: none;
margin: 0 auto;
padding: 40px;
border-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="personal_details">
<form class="personal_details">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="inputFirstName" />
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="inputLastName" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="inputEmail" />
</div>
<div class="form-group">
<label for="phone_nummber">Account type</label>
<select class="form-control" name="profile_type">
<option value="Basic" selected>Freelancer</option>
<option value="Company">Employer</option>
</select>
</div>
<button class="btn btn-primary mt-4 px-5" type="submit">EDIT</button>
</form> <!-- Form ends here -->
</div>
Hi I've had a look all around google and SO cant seem to find a solution for this.
What i'm trying to do is align an input-group with all my other form-groups. Every time i use an input-group it adds like a padding to it.
I've tried almost every answer I've found on here:
padding:0px !important;
margin:0px !important;
float: left !important;
Nothing seems to work!
Code:
<div class="col-md-6">
<div class="form-group">
<input id="est_mileage" name="est_mileage" type="text" placeholder="Estimated Mileage" autocomplete="off" class="form-control input-md"/>
</div>
<!--Padding Issue is Here-->
<div class="input-group" style="padding:0px !important; margin:0px !important; float:left; width:100%;">
<span class="input-group-addon" style="width: 45px;">
<input value="1" type="checkbox" id="combinedSelector" name="one_off" />
</span>
<input id="acc_mileage" name="acc_mileage" type="text" placeholder="Actual Mileage" autocomplete="off" class="form-control"/>
</div>
<!--End Issue-->
<div class="form-group">
<input id="fuel" name="fuel" type="text" placeholder="Fuel(ltrs)" autocomplete="off" class="form-control input-md"/>
</div>
<div class="form-group">
<input id="price" name="price" type="text" placeholder="Price" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="cwt_dwt" name="cwt_dwt" type="text" placeholder="CWT & DWT" autocomplete="off" class="form-control input-md" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="def_ser_num" name="def_ser_num" type="text" placeholder="Defect Serial Number" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input required id="product_volume" name="product_volume" type="text" placeholder="Product Volume" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="ref_po" name="ref_po" type="text" placeholder="Ref/PO" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="comments" name="comments" type="text" placeholder="Job Specifics" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="billing_com" name="billing_com" type="text" placeholder="Billing Info" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="iss_rep" name="iss_rep" type="text" placeholder="Issues/Repairs" autocomplete="off" class="form-control input-md" />
</div>
</div>
This form is nested in a collapse div and is in a modal view.
This is the result:
You have to add the class form-group to div with input-group class and remove the styles: padding:0px !important; margin:0px !important; float:left;
and this will make it similar to the other form groups
See Demo Here
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
The total number of columns on a row is equal to 12.
You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that.
A solution would be to set a class with fewer column on your first form-group, let's say col-md-3. Here's a demo: http://output.jsbin.com/tipusi/1/
<!-- HTML -->
<div class="row">
<div class="form-group col-md-12">
<div class="inline-block">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="inline-block">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
</div>
<!-- CSS-->
.inline-block {display: inline-block;}
<div class="row">
<div class="form-group col-md-5 no-padding">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4 no-padding">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
Add below css class
.less-padding {
padding: 10px !important;
margin: 10px !important;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>