I'd like to create a form with the following layout using Bootstrap 3:
I have a jsfiddle with an attempt here: http://jsfiddle.net/quyB6/
And the markup I've tried:
<form>
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</div>
I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>.
<form>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
</form>
For bootstrap v4 you can use d-flex flex-column:
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
</div>
With Bootstrap 4.4:
Use the class "form-row" in the form element.
<form class="form-row">
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</form>
Replace <label> tag with <div> and it will line up on top perfectly.
Putting <div style="clear: both;"></div> between the <label> and the <input> worked for me. I tried a bunch of the above ideas with no luck. This is with Bootstrap 3.3.7.
So
<label for="name" class="control-label">Line Height</label>
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">
I also included "pull-right" as a class (i.e. class="control-label pull-right" and class="form-control pull-right" to get the label and the input on the right-hand side of the page.
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-4">
<label for="name" class="control-label">Line Height</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Top</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="lineHeight">
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingTop" />
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingBottom">
</div>
</div>
</div>
</body>
</html>
check:https://jsfiddle.net/89h0vrLq/
Related
How can I move down the search button at the same level with other textfields?
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="row align-center">
<input type="submit" value="search" class="btn btn-primary" />
</div>
</form>
An easy way to fix is to add same structure as other input fields (also avoid to add additional CSS which may not cover all cases), for the label, use as a placeholder.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-1 form-group align-center">
<label for="created_at_lt"> </label>
<input type="submit" value="search" class="btn btn-primary form-control" />
</div>
</form>
Another simple way would be to add the height of the label as a margin.
Make sure you go into fullpage view of the snippet to see the proper result:
.lowered {
margin-top: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-2 form-group align-center">
<input type="submit" value="search" class="btn btn-primary form-control lowered" />
</div>
</form>
Try using br tag at end of label tag
<div class="row">
<div class="col-md-6">
<label for="search">Title</label><br>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-6">
<label for="year">Year</label><br>
<input type="text" name="year" id="year" class="form-control" />
</div>
</div>
How to make multiple text fields in the same line.
This is my code:
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year"/>Year
<input type="text" class="form-control " placeholder="Month"/>Month
<input type="text" class="form-control " placeholder="Day" />Day
</div>
</div>
It's by default. input is inline element.
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year" />Year
<input type="text" class="form-control " placeholder="Month" />Month
<input type="text" class="form-control " placeholder="Day"
Day
</div>
</div>
In bootstrap you can put all of the fields that you want on a single line within a single form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
It seems, you are using Bootstrap, if yes, then;
Add class .form-inline to the <form> element.
else, Add these css properties to <form>,
display: inline-block;
width: auto;
You can try this way too.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-2">
<div class="form-group" >
<label style="width:25%; float:left;">Working experience</label>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Year"/>Year
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Month"/>Month
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Day"/>Day
</div>
</div>
</div>
</body>
</html>
Use Bootstrap:
<form class="form-inline" action="/action_page.php">
<label>Working experience : </label>
<div class="form-group">
<input type="text" class="form-control" id="year" placeholder="Year" name="year">
</div>
<div class="form-group">
<input type="text" class="form-control" id="month" placeholder="Month" name="month">
</div>
<div class="form-group">
<input type="text" class="form-control" id="day" placeholder="Day" name="day">
</div>
</form>
You could use inline form class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control" placeholder="Year">
<input type="text" class="form-control" placeholder="Month">
<input type="text" class="form-control " placeholder="Day">
</div>
</form>
Use Expand snippet to see actual result.
Introduction
Hi, i am working with the search form, having 5 inputs and a search button. Each input field have its label.
Code
<section class="content">
<div class="box box-info">
<form action="/users" id="Search-form" method="POST" role="form">
<div class="box-body">
<div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
<div class="form-group frm-setp">
<label for="pwd">Name:</label>
<input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
</div>
<div class="form-group frm-setp">
<label for="pwd">Ph#:</label>
<input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
</div>
<div class="form-group frm-setp">
<label for="email">From:</label>
<input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
value="$data.from" />
</div>
<div class="form-group frm-setp">
<label for="pwd">To:</label>
<input type="text" class="form-control pickdate" name="todate" id="todate"
value="$data.to" />
</div>
<div class="form-group frm-setp">
<label for="pwd">Filter</label>
<select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
<option value="all">All</option>
<option value="driver">Active Drivers</option>
</select>
</div>
<div class="form-group frm-setp">
<button type="submit" class="btn btn-info">Search</button>
</div>
</div>
</div>
</form>
</div>
</section>
Display LG
Display MD
Problem
Here, clearly i have problem with medium screens or less but works perfect with larger screens.
On medium or small screens, other elements break the line.
If someone have idea about this kind of problem or any reference, then please do help. Thanks for your time.
Do it in this way-- All your inputs must be wrapped within responsive grid column classes.
Working example
#media(max-width:767px){
#srch {
margin-top: 22px;
margin-left: 10px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<section class="content">
<div class="box box-info">
<form action="/users" id="Search-form" method="POST" role="form">
<div class="box-body">
<div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Name:</label>
<input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Ph#:</label>
<input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="email">From:</label>
<input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
value="$data.from" />
</div>
<div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
<label for="pwd">To:</label>
<input type="text" class="form-control pickdate" name="todate" id="todate"
value="$data.to" />
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Filter</label>
<select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
<option value="all">All</option>
<option value="driver">Active Drivers</option>
</select>
</div>
<div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button id="srch" type="submit" class="btn btn-info">Search</button>
</div>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Use col-*-* class for all your inputs and labels.
<div class="col-*-*">
<input class="input-lg">
</div>
I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.
Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>
http://www.bootply.com/g6rtaYL4fy
I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used.
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</form>
</div>
How can I ensure my controls fill the same width, regardless of addons?
The .input-group div should be part of its own element instead of lumped in with .col-xs-6. Remember, an .input-group div is taking the place of an input control. So use them interchangeably.
Instead of this:
<div class="col-sm-6 input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
Do this:
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
</div>
Demo in Stack Snippets
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 ">
<div class="input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</div>
</form>
</div>