I am trying to align my bootstrap check boxes horizontally using:
<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="container-fluid">
<label class="text-left col-lg-12 col-md-12 col-sm-12 col-xs-12 col-form-label">Attributes:</label>
<input type="checkbox" value="">
<label class="checkbox-inline col-lg-2">Camp Site</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Offsite Visit</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Scout Den</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Hike</label>
</div>
</div>
</div>
I had an issue with my input fields not filling the width of the bootstrap container and found the solution on stackoverflow to add the css:
input, textarea {
width: 100% !important
}
However, this is causing issues with the check box formatting.
With the css:
Without the css:
please use this source if working with bootstrap
https://getbootstrap.com/docs/4.0/components/forms/#default-stacked
Related
The two inputs get misaligned due to the difference in length of the label text. Below is the part of my code:
<div class="row">
<div class="col-auto col-md-6 form-group">
<label for="category">Which of the following best describes you?</label>
<select class="form-control" id="category" name="category">
<option>Furniture Designer</option>
<option>Architect</option>
</select>
</div>
<div class="col-auto col-md-6 form-group">
<label for="training">Education level/type </label>
<input type="text" name="training" class="form-control" id="training" placeholder="Training">
</div>
</div>
How can I easily fix the misalignment and keeping the form resposive?
You could make the form-group's d-flex flex-column and then use mt-auto on the form input to force bottom alignment...
<div class="row">
<div class="col-auto col-md-6 form-group d-flex flex-column">
<label for="category">Which of the following best describes you?</label>
<select class="form-control mt-auto" id="category" name="category">
<option>Furniture Designer</option>
<option>Architect</option>
</select>
</div>
<div class="col-auto col-md-6 form-group d-flex flex-column">
<label for="training">Education level/type </label>
<input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
</div>
</div>
https://codeply.com/p/S9wKwrKLch
OR, use the text-truncate class on the labels to prevent text wrapping:
<label for="category" class="text-truncate">
Which of the following best describes you?
</label>
https://codeply.com/p/S9wKwrKLch
try with this way
<div class="col-auto d-md-flex flex-md-column col-md-6 form-group">
<label class="flex-md-fill" for="training">Education level/type </label>
<input type="text" name="training" class="form-control" id="training" placeholder="Training">
</div>
https://jsfiddle.net/lalji1051/t41Lnuxh/5/
The default behavior in bootstrap 4 is that the label will appear above the input. (Certainly with the code you have above).
If you want the label to be next to the input then try this straight from teh bs4 documentation:
<form>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
Bootstrap 4 docs
If you would like to handle it with a little piece of code, I hope this one wirks for you :
You can use equal margin-bottoms for both your inputs and if you like to use bootstrap, for example you can add mb-2 class to your inputs.
Or even you can use mt-auto to your inputs.
Using Bootstrap 3 forms. In a normal Bootstrap form with field labels on top on input fields (no form-inline, no form-horizontal) I want to be able to display a flexible number of controls in the same row. For example:
4 controls on a full width screen
2 controls on a medium size screen
1 control on small screens
To get this we can use a Bootstrap row to group all four controls and appropiate col-xx-x classes for each control. See code below.
The problem with this layout is that when the controls are displayed stacked (more than one row) and the help-block used to display errors in controls is displayed the layout of the control just below the help text is pushed one position to the right. The reason for this is that those controls share the same row and the extra height added by the help message fills one space in the lower row. See the example provided.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-block" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I have experimented with form-inline forms, but then the help text is displayed on the right side of the control instead of below.
I hope this is what you are looking for...
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.no-right-margin {
margin-right: 0 !important;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-text" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 no-padding">
<div class="row no-right-margin">
<div class="form-group col-xs-12 col-md-12 col-lg-12">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I ran into this same issue and went with the absolute positioning you hinted at. Here is my bootstrap override
.form-group {
position: relative;
.help-block { position: absolute; right: 2rem; bottom: -3rem }
}
I put it the right so when the field are stacked it doesn't clutter with the label.
I haven't determined the full consequences of this in all contexts but for the issue at hand it seems to work well. Future pages may make me tweak the values for one reason or another.
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I created a structure composed by two columns, the first have three radio buttons which I need to align to center (vertically), and the second contains some input field.
The structure have the following configuration:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="mt-3 content-checkbox">
<div class="custom-control custom-radio">
<input type="radio" id="foo" name="test" checked class="custom-control-input">
<label class="custom-control-label" for="foo">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo1" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo1">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo2" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo2">Test</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="mt-3 text-center">
<div class="form-group">
<div class="form-group">
<label>Foo1</label>
<input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
</div>
<div class="form-group">
<label>Foo2</label>
<input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
</div>
</div>
</div>
</div>
</div>
as you can see the result is this:
enter image description here
how can I align the radio button to the center vertically?
This is a JSFIDDLE.
You can add the following classes to the column (The one with the radio buttons.) and it would work:
d-flex align-items-center justify-content-center
You can find more information regarding these classes and more flex options here. This way you can even find more customizations that can help you even further.
I want a form in Bootstrap that renders two text fields on the same line, with text following each input:
Label 1A Input 1A Text 1A Label 1B Input 1B Text 1B
Label 2A Input 2A Text 2A Label 2B Input 2B Text 2B
Basically, the two inputs on the same line are related, so I want them next to each other. I've sort of accomplished that using this markup:
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
Also see this fiddle. If you widen the HTML output you should see the effect I'm describing.
The problem with this is the form fields are not aligned, and the layout gets really screwy for small screen sizes.
First and foremost, I'd like the fields to all align nicely when viewed in a standard desktop browser. I've tried various classes with no success.
But if there's a better way to do this, I'd love to hear that too.
Thank you for any and all help!
If I understand what you want it will work.
Try this approach:
The idea is playing with the grid, dividing each row (using grid´s bootstrap) and inside of each row, dividing again as you need.
It should be enough, but if you have any problem, you can add pull-right and pull-left class where you need it. These classes set to left or right inside a column of grid´s bootstrap.
Besides, you can add this style or class for being secure you are not overlapping layers/div.
white-space : nowrap;
<form class="form-inline" role="form">
<div class="form-group col-lg-6 col-md-6 col-xs-6">
<div class="form-group col-lg-8 col-md-8 col-xs-8">
<label for="input1" class="control-label first-label pull-left">ABCDEFG</label>
<input type="text" name="input1" id="input1" class="pull-right"> units
</div>
<div class="form-group col-lg-4 col-md-4 col-xs-4">
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max" class="pull-right"> units
</div>
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-6 pull-right">
<!-- REPEAT THE SAME IDEA -->
</div>
</form>
With this code, you have one row with 2 parts with the same size. Inside the first part you have two part as well, one of them double than the other one. Inside of these part, you have a label at the left(pull-left) and it input at thee right(pull-right).
If you have any doubt, please let me know.
Cheers mate
<style>
label { width: 12%; }
</style>
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
To align them input boxes you need to set equal width on the labels. As the labels are inline element, while your labels got different texts their sizes will be different so the following boxes will be just right after it.
For the above example you can have this following
label{
width: 80px;
}
But the above css will widen the width of the text "units" to solve this you may update your markup a bit by assigning class to the not equal labels & then declaring width on them like the follwoing
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label first-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label first-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
And assigning width to the class
.first-label{
width: 80px;
}
There is one more solution without the markup change
.form-group label:first-of-type{
width: 80px;
}
Need to add a fixed width for your control-label
.control-label {
width: 15%;
text-align: center;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">Label 1A</label>
<input type="text" name="input1" id="input1">units
<label for="input1_max" class="control-label">Label 1B</label>
<input type="text" name="input1_max" id="input1_max">units
</div>
<div class="form-group">
<label for="input2" class="control-label">Label 2A</label>
<input type="text" name="input2" id="input2">units
<label for="input2_max" class="control-label">Label 2B</label>
<input type="text" name="input2_max" id="input2_max">units
</div>
</div>
</form>
try this code it may solve your problem.you need to define cols inside row .so in this i define 2 row and each of them have 4 column for mobile as well as desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="inline-form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input1" class="control-label">ABCDE35</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1" id="input1"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input1_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1_max" id="input1_max"> units
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input2" class="control-label">ABCD</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3" id="input3"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input3_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3_max" id="input3_max"> units
</div>
</div>
</div>
</form>
</body>
</html>
I'm using Bootstrap 3.3.7. I have a horizontal form with a label-less checkbox, like this:
<div class="container-fluid" style="max-width:600px">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="field1">Field 1:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field1"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field2">Field 2:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field2"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field3">Field 3:</label>
<div class="col-sm-8">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control" type="checkbox" id="field3"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
</div>
</div>
</form>
</div>
I've created a Bootply demo here.
The problem is the checkbox is centered. I wanted it to be left aligned, so the left edge is aligned with the left edge of the text inputs above it.
How do I do that?
I have tried:
Adding class text-left to the div that contains the checkbox (result: no effect).
Removing the grid width specifiers from the checkbox div (result: it just ends up on the next line).
Enclosing the checkbox input in a label tag, a wild guess after reading this post (result: it disappears).
Random hand-wavey rearrangements of divs (result: spirit crushed, git checkout to revert changes).
I'm out of ideas.
Can you add a class to the checkbox? Try this:
<input class="form-control move-left" type="checkbox" id="field3">
.move-left {
width: auto;
box-shadow: none;
}
Demo: http://www.bootply.com/At8YVfnm5F
Updated as per gyre's comment.
You can change the width initial or auto for the input id LiveOnBootplay
input#field3 {
width: auto;
}
Try changing the class of the div enclosing your checkbox from col-sm-8 to col-sm-1 and then added a class of checkbox-inline to your input element.
Demo: http://www.bootply.com/kjF1gVtWDC
<div class="col-sm-1">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>