Why .form-group-sm reduces a .form-control but not a .control-label except when inside a .form-horizontal? This forces a custom css or the use of <small> tag with the <label> tag. Is it by design or a missing?
From bootstrap.css:
.form-group-sm .form-control { ... }
.form-horizontal .form-group-sm .control-form { ... }
Sample code:
<form class="form-horizontal">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
Related
I would like to remove all the extra spacing between my form controls using bootstrap 4 horizontal form to make it more compact and smaller. I added the css below which removes some of the spacing, but the spacing between label and input is still there and I cant figure out how to remove it.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Use !important to prevent override:
.form-group {
margin-bottom: 0px!important;
}
Or use bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
For example:
.space .form-group {
margin-bottom: 0px!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>
Bootstrap sets a default margin-bottom on the .form-group class:
By default it only applies margin-bottom
https://getbootstrap.com/docs/4.1/components/forms/#form-groups
If youre using precompiled bootstrap just overwrite it using a stronger selector (aka proper cascading).
If youre compiling bootstrap yourself just set the $form-group-margin-bottom variable to whatever value you desire (e.g. 0).
I solved it by adding
label {
margin-bottom: 0;
}
It works fine now.
I have next function:
changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
and next CSS:
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
But it is not working. I tryed it adding it into the function with .css but neither... I do not understand why it happening this... Why could it be?. Thank you.
EDIT: This is my HTML code (Is React JS + Bootstrap)
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>
EDIT: I added your actual problem
Your problem is here:
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
You have onChange when it should be onchange="changeStateSelect()"
Demo
function changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange="changeStateSelect()" value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>
Hi its a very basic question i just want to know when hover on one element the style of other changes how can I achieve this ?
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
Like when i hover on button border-color of all the input changes.
I only want this with css no js or jQuery.
It is possible to do this but not with your current code.
Below is code of this working, the hover element will have to be before the elements you want to change. It works by going down and not up, so if this button is at the bottom you will not be able to see the same effect as the effect does not effect elements that are already rendered.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
We can select other elements siblings by using the ~ selector.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
More here
Here is the button at the bottom, as you can see it will not work.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
for a pure css solution you need to move the <button>-tag in front of the inputs you want to change, but then it'll work like this
button:hover ~ .form-group input {
border-color: red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
that is possible only if the inputs after the button
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
and the css:
#btn:hover ~ .form-group input {
background: #000;
}
after that you can use position absolute for the button
and this is demo
http://jsfiddle.net/u7tYE/6037/
try this
<form id="numerical" class="row">
<label for="btn" class="label"></label>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
<style>#numerical{
position: relative;
}
.form-group {
margin-bottom:10px;
}
#numerical .label {
position: absolute;
bottom: 0;
left: 0;
height: 32px;
width:102px;
}
.label:hover ~ .form-group input {
border: solid 2px red;
}
#btn{
background:blue;
color:#fff;
height:30px;
width:100px;
} </style>
Fiddle
I am trying to align some inputs in my modal. I am trying to set this up the proper way. I have looked and found many examples but they are not working with mine. I understand the bootstrap site says to use form-inline but I dont need my entire form setup like that. I just want the City/State/Zipcode inline with each other. Also you will see a checkbox on the top right corner. I have moved it to the right with a margin-left, but it messes up the responsiveness of it. What is the best way to do this?
plunkr
<div class="form-group clearfix inline">
<label class="col-sm-3 control-label text-right">City</label>
<div class="col-sm-9">
<input style="width:200px" ng-model="customer.city" type="text" class="form-control input-md">
</div>
<label class="col-sm-3 control-label text-right" for="customerSt">State</label>
<div class="col-sm-9">
<select style="width:200px" ng-model="customer.st" class="form-control" ng-options="s.abbr as s.name for s in states">
<option value="">-- Select a State --</option>
</select>
</div>
<label class="col-sm-3 control-label text-right">Zipcode</label>
<div class="col-sm-9">
<input style="width:200px" ng-model="customer.zip" type="text" class="form-control input-md">
</div>
</div>
CheckBox
<div class="form-group clearfix" style="margin-left:520px">
<label class="col-sm-3 control-label text-right">Status</label>
<div class="col-sm-9">
<input style="width:50px" type="checkbox" ng-model="job.status" value="" class="form-control">
</div>
You would need to modify a little css and use nested columns.
This is an example of nesting columns in a form. You can use the same ideas to adjust your form.
DEMO: http://jsbin.com/kemumu/1/
Regarding the checkbox that you pushed into place with margin. If it looks good at 900px but strange at under that width, then put css in a min-width media query where it looks good and remove it outside the media query.
Notes: .form-group puts some nice vertical spacing when a form is stacked (in smaller viewports) but it also acts like a .row (with its negative -left and -right margins), so this css when it's used on a column (as I have done) gets adjusted. Plus the gutter which is 30px is too big for a form.
There's no need to put .clearfix on your .form-groups unless you've floated them for some reason.
CSS EXAMPLE:
.custom-form [class*="col-"].form-group {margin-left:0;margin-right:0;}
.custom-form .form-group [class*="col-"] .row [class*="col-"] {
padding-left: .5%;
padding-right: .5%;
}
.custom-form .form-group [class*="col-"] .row {
margin-left: -.5%;
margin-right: -.5%;
}
HTML EXAMPLE:
<form class="form-horizontal custom-form" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Card Holder's Name</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-6 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="First Name" required>
</div><!--nested col-sm-6-->
<div class="col-sm-6 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="Last Name" required>
</div><!--nested col-sm-6-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">Credit Card Number:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="1st four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="2nd four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3 form-group">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="3rd four digits" required>
</div>
<!--nested col-sm-3-->
<div class="col-sm-3">
<input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="4th four digits" required>
</div>
<!--nested col-sm-3-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">Expiration Date:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-9 form-group">
<select class="form-control">
<option>January</option>
<option>...</option>
<option>December</option>
</select>
</div>
<!--nested col-sm-9-->
<div class="col-sm-3 form-group">
<select class="form-control">
<option>2013</option>
<option>...</option>
<option>2015</option>
</select>
</div>
<!--nested col-sm-3-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<label class="col-sm-3 control-label">CVV Code:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" autocomplete="off" maxlength="3" pattern="\d3" placeholder="3 digits on back of card" required>
</div><!--nested col-sm-4-->
</div><!-- /.form-group > .row -->
</div><!-- /.col-sm-9 -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary btn-custom">Submit</button>
<button type="button" class="btn btn-default btn-custom">Cancel</button>
</div><!-- /.col-sm-offset-3 col-sm-9 -->
</div><!-- /.form-group -->
</form><!-- /.form-horizontal -->
</div><!-- /.container -->
**
If you want responsiveness in your site, then make/add different css and add them to different scree size.. for example..
<h2 class="visible-sm visible-md visible-lg">Some text here</h2>
The above h2 heading will show on only tablet,s smart TV's, laptop's desktops etc....
<h4 class="visible-xs">Some text here</h4>
When you see the same heading on small devices like smart phone's, or smaller, then it adjust it size according to the specified and only show on small devices....
Note: Please Read the twitter bootstrap documentation about responsiveness here
I had to add some custom css classes to do that. For example
#media (min-width: 768px) {
.input-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.input-inline .form-control {
display: inline-block;
}
.input-inline select.form-control {
width: auto;
}
.input-inline .radio,
.input-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.input-inline .radio input[type="radio"],
.input-inline .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
}
So no i do not add the form-inline class at my form. When i need an inline input I write the following:
<div class="form-group input-inline">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="text" class="form-control">
<div>
I might have missed copying something from my code but this is the general idea. You just need to copy from bootstrap the .form-inline values and replace it with .input-inline.
My HTML has a class called .required that is assigned to required fields.
Here is the HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?
EDIT
The * in terms and conditions does not appear immediately to a checkbox. How to fix this?
Use .form-group.required without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
.form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
use simple css,
.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
Without the space it's targeting an element that has both classes. 'required' and 'form-group'
This CSS worked for me:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
This works for me:
CSS
.form-group.required.control-label:before{
content: "*";
color: red;
}
OR
.form-group.required.control-label:after{
content: "*";
color: red;
}
Basic HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
I modified the css, as i am using bootstrap 3.3.6
.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}
the HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>