I am using the following code to make a simple formular with bootstrap:
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
But the result is:
So, why is the search button above the other input fields ? Is there a way to recenter it without touching the responsiveness ?
Thank you
see snippet below .
first, your input fields were exceding the width of the col . so set max-width:100% to them
second, .btn has inline-block style , use display:block instead
let me know if it works for you
input {
max-width:100%
}
.form-group .btn {
display:block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Add an empty label with on top of the button to align, like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"> </label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Your button should not be in a form group, and additionally that's not the usual way to markup an inline form (using cols). See this example where I use some of your fields for brevity:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<form class="form-inline">
<div class="form-group">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<button type="submit" class="btn btn-default">recherche</button>
</form>
Add an <br/> after label , like this
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label><br />
<input type="email" value='' id="name1" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label><br />
<input type="email" value='' id="name2" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label><br />
<input type="email" value='' id="name3" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label><br />
<input type="email" value='' id="name4" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label><br />
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Related
I want to show multiple div if radio button is checked. Here is the code that I tried.
HTML:
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
CSS:
.show{
display:none ;
}
input#yes:checked ~ div.show{
display: block;
}
If 'YES' button is checked then 'SHOW' class div will show. If I put the 'SHOW' class div with the input field it works. But when I put it outside of the input field div it doesn't work.
Can anyone please help me with my code structure.
Please see the image for better understanding.
my code
The css solution will indeed only work if those 'show' divs are inside the same parent as the radio buttons. If you want them to be outside that input field div, then use a bit of javascript.
document.querySelector('input#yes').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "block";
})
})
document.querySelector('input#no').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "none";
})
})
.form-group.show {
display: none;
}
<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="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
My Form elements are not fitting in correctly and the alignment is
distorted.
.h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
I would prefer to accept an answer which can explain why my snippet does not work.
Plunker here
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screen shot
remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right?
if you want to give blue shape than here is the code :
<div class="row">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
.blue{
min-height: 100px //the height you want to give
}
I am making an app where there are lots of forms and i am fatigued at the thought of referring to the form reference for the tricky vertical aligned forms and horizontal aligned forms.
I want a final snippet that will be my point of reference when i want a vertical and a horizontal form.
For a vertical form(forms aligned vertically) i use this code
https://jsfiddle.net/bgebzwqd/11/
<form role="form">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</form>
For horizontal forms i have this
https://jsfiddle.net/0jwzxoe2/20/
<form role="form">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
In the first form(vertical forms), how can i control the width of the form bootstrap way(trying and avoiding custom css)
In the second, i want to have the button at the bottom and also have some spacing vertically. In the current example, there seem to be no space.
To solve the problem, i want to avoid using custom css and try solving this using what's available in bootstrap only.
Use Below Code
<form role="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12">
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</div>
</form>
I ended up doing this for vertical forms
https://jsfiddle.net/codebreaker87/zqjva21d/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<style>.width500{width:500px;margin-left:30px;}</style>
<form role="form">
<div class="row">
<div class="form-group width500">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500 ">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
For horizontal forms https://jsfiddle.net/codebreaker87/zqjva21d/21/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<form role="form">
<div class="form-group">
<style>.mb{margin-bottom:20px;}.ml{margin-left:15px;}</style>
<div class="col-xs-3 mb">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Six</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="row">
<div class="col-md-12 ml ">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
In my form I have two cols with the label on top and a full width input. My problem is that I now have two fields requiring radios. I want to split the col into 2 and have the two labels with their two radios below. I can get that ok but the alignment is then not right on the next field down.
You can see it here in this bootply http://www.bootply.com/VlFHq0daui
Leased property and mesne rate units. The key codes below it is not aligning correctly.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address_line1" class="control-label">Address 1</label>
<input type="text" class="form-control" id="address_line1">
</div>
<div class="form-group">
<label for="address_line1" class="control-label">Address 2</label>
<input type="text" class="form-control" id="address_line2">
</div>
<div class="form-group">
<label for="town" class="control-label">Town*</label>
<input type="text" class="form-control" id="town">
</div>
<div class="form-group">
<label for="county" class="control-label">County</label>
<input type="text" class="form-control" id="county">
</div>
<div class="form-group">
<label for="eircode" class="control-label">Eircode</label>
<input type="text" class="form-control" id="eircode">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference">
</div>
<div class="form-group">
<label for="tax_reference" class="control-label">Tax Reference</label>
<input type="text" class="form-control" id="tax_reference">
</div>
<div class="form-group">
<label for="local_authority" class="control-label">Local Authority</label>
<select name="local_authority" id="local_authority" class="form-control">
<option>Select...</option>
<option value="41">Ahtlone Town Council</option>
<option value="88">Youghal Town Council</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<label for="leased_property" class="control-label">Leased Property?</label>
<br>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
<div class="col-lg-6">
<label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
<br>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="key_code" class="control-label">Key Code</label>
<input type="text" class="form-control" id="key_code">
</div>
<div class="form-group">
<label for="gprn_number" class="control-label">GPRN Number</label>
<input type="text" class="form-control" id="gprn_number">
</div>
<div class="form-group">
<label for="mprn_number" class="control-label">MPRN Number</label>
<input type="text" class="form-control" id="mprn_number">
</div>
</div>
</div>
</form>
You can warp radios inputs inside a div with same height of input box:
<div class="radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.radios{
height: 34px;
padding: 5px;
}
Bootply
Add this to your CSS.
.form-group {
min-height:59px;
}
After some trying I found a solution, its not perfect, but will solve the issue.
You could wrap your radio elements into a row and hardcode the needed margins to align the buttons the way you want. For this I gave the row a custom class align-radios.
HTML:
<div class="row align-radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.align-radios {
margin: 7px 0 7px 5px;
}
Hope this helps you a bit.
I have the following markup
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>
which results in
How can I have it aligned like the password?
Try like this: Demo
If you use form-group along with input-group like you did for password, you can get your expected output.
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name"
aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
Here your answer jsFiddle:
<form role="form">
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>