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>
Related
I am using bootstrap grid to make multiple input search filters, but on mobile device it's not responsive, any help appreciated.
I wanted to show form fields two in a row on mobile phone so that user can see labels and input search data correctly.
Desktop output: (works fine)
Mobile output: (needs to make responsive)
CODE
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</form>
</section>
You just need to replace your col-2 by col-4 col-md-2 or col-6 col-sm-4 col-md-2.
Because if you apply col-2 all the devices will show the same front. Please read doc
Below an example with col-4 col-md-2:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-4 col-md-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</section>
</form>
</div>
</div>
</section>
I am trying to enlarge the text box with input-lg but it doesn't work, it remained the same. Also, the text overflowed to the next line, trying to make them align into a single line next to the text box.
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Email:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>New Password:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Role:</b></label>
<div class="col-sm-4">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Created At:</b></label>
<div class='col-sm-4'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Updated At:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
Which version of bootstrap you are using? Bootstrap 4 has no input-lg class. I have added the latest bootstrap 4.5.0 on your code.
I modified the col-sm-2 to col-sm-4 and col-sm-4 to col-sm-8 to adjust the width for label and input text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Email:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>New Password:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Role:</b></label>
<div class="col-sm-8">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Created At:</b></label>
<div class='col-sm-8'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Updated At:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
How do I use bootstrap col and rows to make my text area span multiple rows in a form.
Here is a screenshot of what I mean.
I want the "Notes" text area to span across the two columns to the area that I have highlighted in yellow.
here is the code I have so far
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-4">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-4">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</form>
Basically all you need to do is add another container around your elements.
Try this snippet:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
<div class="form-row">
<div class="col-md-8">
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-6">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-6">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
You can make the element use 4 columns and make it float to the right, while making the left elements float to the left.
I am using bootstrap's grid system and want to create an inline form.
Here is what I have:
<div class="container body-content">
<form class="well form-inline" style="width: 100%;">
<div class="row">
<div class="form-group col-md-4">
<label>Location:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Assignment:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Incident Number:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group col-md-4">
<label>Date:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Training:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Example:</label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
When this is ran, there is no structure or alignment for the textboxes or the labels. How can I achieve this?
Here is a bootply
For each label and input you should make this structure:
<div class="form-group col-md-4">
<label class="col-lg-4 control-label">Location:</label>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
this will make it work with the grid system
See bootply
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/