I was trying to embeds three different forms in a single horizontal row.
The first(shop), second(locality) and third(search) form element should occupy 50%,30% and 20% (6,4 and 2 bootstrap col unit) of total horizontal row.
In mobile view, each three form element should be adjust in individual row.
I tried following:
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-md-6">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-md-4">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
Is this the correct approach?
Should I use bootstrap inline form for this purpose?
I tried using inline form, but its difficult to set width of each form elements.
You are correct you just need to adjust for small screens with col-xs-12 & change md to sm.. xs is mobile...
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-sm-6 col-xs-12">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-sm-4 col-xs-12">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-sm-2 col-xs-12">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
You have to specify a small (col-sm-*) width for each one. Edit like another answer col-xs for extra-small screens.
<div class="col-md-6 col-sm-12">
<div class="col-md-4 col-sm-12">
<div class="col-md-2 col-sm-12">
Related
How can I combine all the form group items such as Select, Input items together just using bootstrap framework?
I have tried the below way but as expected I am getting the space between Select and Input Box
DEMO
The problem is your declaration of mx-sm-3. This applies for the -sm breakpoint and greater if there is no other declaration. The simplest way to correct this is add a reset at the larger breakpoint: mx-md-0:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="custom-select mx-md-0">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mx-md-0">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mx-md-0">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Expand the above code snippet to see how it will render when you exceed the -sm breakpoint. I also changed your <select> to make use of the custom-select class.
I'm not sure if this is what you're after, but if it's not, clarify what you're after a little more and I might be able to help.
If you're just wanting to group the items together, bootstrap has a card class that allows you to group elements into a container of sorts. The code below is wrapped in bootstraps grid system. I've put your code into a div tag with a card class. In a second example, I've removed a the inline form class, so you can see how the inputs are stacked vertically.
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div class="form">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codeply project so you can see how the layout.
I want to have a inline bootstrap 4 form occupying the full width (without spaces between the inputs and the button) with:
1 input type text and 1 button In extra small devices
2 input type text and 1 buttons In small devices
3 input type text and 1 buttons In medium and larger devices
But it is not working with the code below. I dont know if it is because the place where the form opens and close. Here is the example:
https://jsfiddle.net/o8jzq00f/1/
Html:
<div class="container-fluid bg-success">
<div class="row no-gutters justify-content-center" style="background-color: orange">
<div class="col-xs-12">
<h1 class="m-3">Title</h1>
</div>
</div>
<div class="row no-gutters justify-content-center">
<form>
<div class="col-xs-10 col-sm-4 col-md-3">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-xs-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-md-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-xs-2 col-sm-4 col-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
Use row class to bind your column then it will work
<div class="row">...under this you can use col classes and specify the width ...</div>
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
What am I missing?
I can see the border of the container and it correctly shows the area that I have to work with.
However when I add the row (div) and offset(div) it is left justifying it.
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" class="form-control" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" class="form-control" />
</div>
</div>
</div>
</div>
I think I know what you are meaning, but I'm not sure. Do you mean like this?
If so, the class for that is:
class="text-center"
So you can change your code to this:
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" class="form-control text-center" type="text">
</div>
</div>
</div>
Or you can add it to just the controls you want, for example just the input form controls.
Hope that helps!
Bootstrap can provide a great mobile experience, but desktops can also benefit from its scaffolding capabilities. So, when I develop forms I like to use the least amount of space possible. With that in mind I have improved on Demonic Penguin's code and your, as well. Like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
<div class="form-group">
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
You can also embellish your form by adding icons to the fields, like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
</div>
For this implementation, you must add a FontAwesome CSS reference link to your page(s) that you can get from here: https://www.bootstrapcdn.com/fontawesome/
I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.
You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>