How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
Related
I am new and learning front end.
I created a simple form contains 4 fields. how to align all these in line equally divided?
below is my code written on HTML along with the output what i see:
<div>
<form>
<div class="form-inline">
<div class="col-sm-6">
<label>Name: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Email: </label>
<input type="text" class="form-control" >
</div>
<br>
<br>
<div class="col-sm-6">
<label>Phone #: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Education Qualificiation: </label>
<input type="text" class="form-control" >
</div>
</div>
</form>
</div>
Output above code
You can do something like this:
fiddle to validate
.lblClass {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<form>
<div class="form-inline d-flex">
<div class="col-sm-6 d-flex">
<label class="lblClass">Name: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Email: </label>
<input type="text" class="form-control">
</div>
<br>
<br>
<div class="col-sm-6 d-flex">
<label class="lblClass">Phone #: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Education Qualificiation: </label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
There are lots of ways to align element. But here you are uses bootstrap and bootstrap have predefined classes for align element. You want to align elements in the form so bootstrap have Form-group, form control class for your all. Problems
Visit this link for more info
https://getbootstrap.com/docs/4.3/components/forms/
I need to make my form look like "Title over the checkbox and text on the right side" and etc. It's like a list of settings
But I can't display it properly
Here is my code
<div class="modal-body">
<form>
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
<div class="form-group">
<label for="extendedG">To extended view</label>
<input class="form-control" type="checkbox" value="Extended" id="extendedG">
</div>
<div class="form-group">
<label for="CompactG">To Compact view</label>
<input class="form-control" type="checkbox" value="Compact" id="CompactG">
</div>
<div class="form-group">
<label for="extendedBracketsG">Left stady view</label>
<input class="form-control" type="checkbox" value="ExtendedBrackets" id="extendedBracketsG">
</div>
<div class="form-group">
<label for="BeforeG">Comas before</label>
<input class="form-control" type="checkbox" value="Before" id="BeforeG">
</div>
<div class="form-group">
<label for="AfterG">Comas after</label>
<input class="form-control" type="checkbox" value="After" id="AfterG">
<div class="form-group">
<label for="setTrimsAfterDotKomaG">Set trims after ;</label>
<input class="form-control" type="checkbox" value="SetTrimsAfterDotKoma" id="setTrimsAfterDotKomaG">
</div>
<div class="form-group">
<label for="setTrimsBeforeDotKomaG">Set trims before ;</label>
<input class="form-control" type="checkbox" value="SetTrimsBeforeDotKoma" id="setTrimsBeforeDotKomaG">
</div>
<div class="form-group">
<label for="removeTrimsG">Remove trims</label>
<input class="form-control" type="checkbox" value="RemoveTrims" id="removeTrimsG">
</div>
<div class="form-group">
<label for="removeEmptyLinesG">Remove empty lines</label>
<input class="form-control" type="checkbox" value="RemoveEmptyLines" id="removeEmptyLinesG">
</div>
<div class="form-group">
<label for="allVarsUpperCaseG">All variables upper case</label>
<input class="form-control" type="checkbox" value="VarsUpper" id="allVarsUpperCaseG">
</div>
<div class="form-group">
<label for="allVarsLowerCaseG">All variables lower case</label>
<input class="form-control" type="checkbox" value="VarsLower" id="allVarsLowerCaseG">
</div>
<div class="form-group">
<label for="varsUnderscoredG">All variables underscored</label>
<input class="form-control" type="checkbox" value="VarsUnderscored" id="varsUnderscoredG">
</div>
<div class="form-group">
<label for="toExtendedViewG">All variables to extended view</label>
<input class="form-control" type="checkbox" value="ExtendedView" id="toExtendedViewG">
</div>
<div class="form-group">
<label for="removeUnusedVarsG">Remove unused vars</label>
<input class="form-control" type="checkbox" value="removeUnusedVars" id="removeUnusedVarsG">
</div>
</div>
</form>
And I get this https://ibb.co/cqTqaT
I have no idea what the hell is going on with this. Help please!
Thanks!
At first you should check your HTML Structure and used classes.
An example, your following code:
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
creates a div with two divs inside, which take both 50% width. In the first div with there is the label and also the checkbox. In the second div, there is the text you would like to have beside the checkbox. But this isn't working with your markup.
Better would be the following markup:
<div class="col-md-12">
<div class="form-group">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
As you can see, I removed the two div's and used only one form-group. With the following simple CSS:
label{
display: block;
}
p {
display: inline-block;
}
You should get the wanted result.
I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<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" />
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.
For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2
Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW
I'm trying to build a horizontal form with Bootstrap which has a row of elements on the right hand side of the form like this:
I am having difficulty getting the checkbox, label and input element to sit on a row nicely like that. This is my current attempt. I've added 'checkbox-inline' which gets things on a line, but I can't get the label to move to the middle of the line. Also, the checkboxes are much larger for some reason. Can anyone offer any hints?
The code from the Codepen link:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-5">
<label class="checkbox-inline col-sm-3">
<input class="form-control" type="checkbox" name="input_staff[]" value="39">BH
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
<label class="checkbox-inline col-sm-3" for="">
<input class="form-control" type="checkbox" name="input_staff[]" value="11">CC
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</form>
here is a small example for your checkboxes
one of your mistakes: Don't use col with other elements, like labels. Preferably you use a div for cols, just use it for cols.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</form>
</div>
I finally got it working by using the 'form-inline' class for each row. This answer made me go back and look at form-inline again.
Here is my sample code:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-10">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="39">BH
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="11">CC
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</div>
</div>
</form>
Here is a codepen with the code above showing what it looks like.
I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.