Using the text-right class on my form labels, when going responsive, I want the label to left align so it's top-left instead of top-right, however the change to text-align:left does not appear to take effect.
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Bootstrap's text alignment classes are responsive. You don't need any extra CSS.Use text-sm-right text-left...
<div class="form-group row">
<label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Demo: https://www.codeply.com/go/djMd492DHA
Note: The accepted answer is best for Bootstrap 4, but the following will work for Bootstrap 3
That's become !important is set on .text-right
You can also set !important. I might suggest not using the .text-right class and maybe make your own. Using !important to override another !important makes me cringe. I wouldn't recommend it, and I would recommend using !important as infrequently as possible. I can understand why Bootstrap uses it here, though.
I'll give you two options.
Here's what you could do:
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left !important;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Here's what I suggest doing:
#media (max-width: 767px) {
.form-group > label.align-label {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label align-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Related
I'm using bootstrap-tempus-dominus for Datetimepickers in my application.
How can I change the color of the displayed month and day's names with css
Just add the custom style below in your page it will work as desired:
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#000 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#000 !important;
}
Check this example:
$(function() {
$('#datetimepicker1').datetimepicker();
});
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#0f0 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#0f0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
I have input field and checkbox in the same row. I would like to vertically align checkbox in the middle. Here is example of what I have:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="form-row">
<div class="form-group col-6">
<label for="Addr">Address:</label>
<input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
</div>
<div class="form-group col-6">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
</div>
</div>
</div>
As you can see in my example checkbox is on the top of the div container. How to align check box vertically in the middle?
As Bootstrap 4 documentation. Seen here https://getbootstrap.com/docs/4.0/utilities/flex/
you can use class="d-flex align-items-center".
I added style="border: 1px solid black; height:200px;" to demonstrate.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">
<div class="form-group col-6">
<label for="Addr">Address:</label>
<input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
</div>
<div class="form-group col-6 ">
<div class="custom-control custom-checkbox ">
<input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
</div>
</div>
</div>
display: flex is often an easy way to align elements.
In your CSS it would be like this :
div.form-row {
display: flex;
align-items: center;
}
/* I overwrote the bottom margins that were messing with my alignment */
div.form-group.col-6 {
margin-bottom: 0;
}
You could wrap it in a div class and just set the margin how you want it to align it perfectly with your input box.
You would just add the below to your css and then wrap your custom-control element in a div with css class centered
Here's a live example https://jsfiddle.net/qpwsmoh8/
and the code
css
.centered {
margin-top:38px;
}
html
<div class="centered">
<div class="custom-control custom-checkbox">
...
</div>
</div>
Change this
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
</div>
To this snippet -
<div class="custom-control custom-checkbox" style="
display: flex;
justify-items: center;
align-items: center;
">
<label class="custom-control-label" style="
float: left;
"></label>
<input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="" for="sameAddress">check this box if mailing address is the same as physical address</label>
</div>
try adding this in the css for your input tag or the corresponding classname
input {
vertical-align: bottom;
position: relative;
}
I currently have a small form with 3 elements, a label, input, and button.
I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.
This is the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-auto pb-3 ml-auto">
<form class="form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<button class="btn btn-primary" type="submit" }>Submit</button>
</form>
</div>
#media (min-width: 768px) {
.my-form-inline {
display: flex;
flex-flow: row nowrap;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
<form class="my-form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<div class="form-group mx-sm-3 mb-2">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
One way of achieving this is using Media query in CSS, unless that's not what you are looking for.
In your HTML file add below meta code to head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.
In CSS , use media queries
#media only screen and (min-width: 600px) {
#test{
display: block;
}
}
#media only screen and (min-width: 768px) {
#test{
display: inline-flex;
}
}
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<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="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Signup Form</h3><hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input type="text" placeholder="Your Username ..." class="form-control"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Your Email ..." class="form-control"/>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I want Email label to be aligned with Username label
It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:
#signup-form label {
text-align: left;
}
This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.
Working sample at JSBin.
.form-horizontal .control-label {
text-align: left;
}
simply use this.
CSS:
.control-label {
text-align:left!important;
}