I have two rows of checkboxes and labels.Although horizontal alignment is not an issue , however there is a problem of vertical alignment of second column.How can I achieve a symmetry in this case?
<div class="form-inline">
<div class="form-group">
<div class="col-md-4">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
<div class="col-md-4">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
</div>
</div>
JSfiddle
As you can see the alignment of Moday and Friday (checkbox and label) is not proper.
I've updated your fiddle with a fixed width on the wrapping div .col-md-4 and positioned the labels using float with the width of each label set to take 1/3 of the parents width using the calc function:
label{
float: left;
width: calc(100%/3)
}
What if you wrap each checkbox with a col-sm-3 box?
<div class="col-sm-3">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
https://jsfiddle.net/hobs766o/1/
JsFiddle DEMO
.col-md-4.first label {
display: block;
width: 99px;
float: left;
}
.col-md-4.second label {
display: block;
width: 99px;
float: left;
}
<div class="form-inline">
<div class="form-group">
<div class="col-md-4 first">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
<div style="clear:left"></div>
<div class="col-md-4 second" style="
">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
</div>
</div>
</div>
Related
I have three divs in a form that accept radio buttons as input. Currently with my css it looks like this:
Please see this link
O Text O Text O Text
O Text O Text&Text O Text
O Text O Text
How can I edit my css to make it so that the radio buttons are vertically aligned AND the whole set of radio inputs center aligned , something like this:
O Text O Text O Text
O Text O Text&Text O Text
O Text O Text
This is the code I have
Thank you!
<div class="form-group">
<label for="material" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</div>
<div class="form-group">
<label for="relationship" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</div>
<div class="form-group">
<label for="frequency" class="text-light">Type</label>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>
If you wrap these form-groups in a container, you can set that container to display: flex which will allow you to use flexbox properties to align your form groups as needed.
<div class="radio-container">
<fieldset class="form-group">
<legend id="material" class="text-light">Text</legend>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend id="relationship" class="text-light">Text</legend>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend id="frequency" class="text-light">Type</legend>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>
</fieldset>
</div>
.radio-container{
display: flex;
justify-content: center;
}
You can use display:flex along with a width:Xpx to create aligned rows. Then justify-content: center; on the whole flex container to center it. If you want the title label text to align with the radio label text you can set the radios to absolute postion and put a common padding on all labels
.container {
display: flex;
margin: auto;
justify-content: center;
}
.radio.inline {
width: 100px;
}
label {
padding-left: 25px;
}
input[type='radio'] {
position: absolute;
}
<div class="container">
<div class="form-group">
<label for="material" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="plastic" name="material" value="Plastic">
<label for="plastic" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="cans" name="material" value="Cans">
<label for="cans" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="paper" name="material" value="Paper">
<label for="paper" class="radio-label">Text</label>
</div>
</div>
<div class="form-group">
<label for="relationship" class="text-light">Text</label>
<div class="radio inline">
<input type="radio" id="school" name="relationship" value="School">
<label for="school" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" id="family" name="relationship" value="Friends & Family">
<label for="family" class="radio-label">TextText</label>
</div>
<div class="radio inline">
<input type="radio" id="company" name="relationship" value="Company">
<label for="company" class="radio-label">Company</label>
</div>
</div>
<div class="form-group">
<label for="frequency" class="text-light">Type</label>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
<label for="Repeating" class="radio-label">Text</label>
</div>
<div class="radio inline">
<input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
<label for="One-Time" class="radio-label">Text</label>
</div>
</div>
I'm trying to make a bootstrap form page but I suck at frontend.
My question is really simple: how can I space those checkboxes?
<div class="form-group">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
</div>
</div>
Here is an image of the result:
They are very close together. thank you
You can use margin left (ml-x), margin right (mr-x) or padding left (pl-x), padding right (pr-x) classes of bootstrap-4 or alpha. Where x is any number (1, 2, 3 etc).
e.g. pl-1, or pr-2
Refer here
With bootstrap-3, you can write your own simple class:
.ml-1 {
margin-left: 4px !important;
}
In case you'd like a custom layout, using grid system should be an option.
Just use .form-row as a replacement of .form-check and wrap your checkboxes into the .
<div class="form-group container">
<div class="form-row">
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda1">
<label class="form-check-label">Segunda</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda2">
<label class="form-check-label">Terça</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda3">
<label class="form-check-label">Quarta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda4">
<label class="-form-check-label">Quinta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda5">
<label class="form-check-label" style="border:1px">Sexta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda6">
<label class="form-check-label">Sábado</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda7">
<label class="form-check-label">Domingo</label>
</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/5wgyjd9n/
you can simply add a m tag and add it in your code after every input type checkbox tag
.css:
m { margin:20px }
and your rest of the code goes like this:
.html:
<div class="form-group container">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
<m></m>
</div>
</div>
hope this answers your question.
It seems you are trying to keep them horizontally. You can simply add a right margin to .form-check-label like bellow:
.form-group .form-check .form-check-label{
margin-right: 25px;
}
.form-group .form-check .form-check-label:last-child{
margin-right: 0;
}
Here is the codepen
Below is a HTML Code but the display:inline isn't working. Am not able to understand why. But display:flex, display: -webkit-box;, display: -webkit-inline-box; , display: inline-flex; are working fine;
When i use display:inline on class position
When i use display:flex or display: -webkit-box; or display: -webkit-inline-box; or display: inline-flex; on class position
Below are the HTML Code:
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label><br/>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
Can somebody help me figure out why i cant use display:inline. Thanks.
Try this...
Remove the <br /> tag from your code.
.radio-style {
margin-right: 15px;
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
</div>
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Also, Simply you can place the two radios into the same div. You don't need any extra css. :)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div>
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Try it like this,
HTML
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
CSS
.radio-inline{
float:left;
display:inline;
}
<div class="form-group">
<label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
<div class="col-md-8 col-sm-8 col-md-offset-4">
<label class="checkbox-inline">
<input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
</label>
<label class="checkbox-inline">
<input type="checkbox" value="3" id="property_mess" name="feature">মেস
</label>
</div>
</div>
The above code gives me following output. But I want everything to be displayed as inline. How can I do this?
A more bootstrap focused approach would to be to restructure your code like such:
<form class="form-inline">
<div class="col-md-8 col-sm-8 col-md-offset-4">
<div class="form-group">
<label for="property_feature">ফিচার</label>
</div>
<div class="form-group">
<label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
<input value="1" id="property_furnished" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_sublet">সাবলেট</label>
<input value="2" id="property_sublet" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_mess">মেস </label>
<input value="3" id="property_mess" name="feature" type="checkbox">
</div>
</div>
</form>
One of the main issues in your code is that your first label is OUTSIDE of your div class that sets the column position. So you aren't including it in the col-md-offset-4 that you specify.
Here's a bootply http://www.bootply.com/ekh1Cpmeht
You will most likely want to adjust the spacing between the property_feature label and the property_furnished .
Use display: inline-block; because Div will break down to new line the checkbox.
.col-md-8.col-sm-8.col-md-offset-4 {
display: inline-block;
}
.col-md-4.col-sm-4.control-label {
display: inline-block;
}
Check Fiddle.
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>