Vertically Align Bootstrap Checkbox - html

I'm trying to vertically align checkboxes for a column of checkboxes + labels. Ideally, I'd like the elements to be in the center of the page but with the checkboxes themselves vertically aligned.
<div class="row">
<div class="span12 pagination-centered">
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">sdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asfdasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
</div>
</div>


This is one way to do it
<div class="row">
<div class="col-md-4 "></div>
<div class="col-md-4" style="text-align:center">
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">sdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asfdasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
</div>
<div class="col-md-4 "></div>
</div>
Another way to do this is:
<div class="row">
<div class="col-md-12" style="text-align:center">
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">sdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asfdasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
</div>
</div>
Both produce the same result


Simply add these styles
input[type="checkbox"] {
vertical-align: middle;
}
.span12.pagination-centered {
margin: 25px auto;
width: 100px;
}
input[type="checkbox"] {
vertical-align: middle;
}
.span12.pagination-centered {
margin: 50px auto;
width: 100px;
}
<div class="row">
<div class="span12 pagination-centered">
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">sdfasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asfdasdf</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">asdfasdf</label>
</div>
</div>
</div>


You can try like this,
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
css
.vertical-align {
align-items: center;
}

Related

Can I adjust the vertical position of checkboxes in HTML text?

I'm creating a website with Bootstrap 4, and at least in Chrome on Windows 10, the checkboxes are shown a bit too high in a line:
These are <input type="checkbox"> elements enclosed in <label>s.
I would like to move the checkbox itself down by 3px or so. Is this possible with CSS?

Using a flexbox is an option.
.container {
display: flex;
align-items: center;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="main">
<div class="row">
<div class="container">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" name="checkbox1">
</div>
<div class="container">
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" name="checkbox2">
</div>
<div class="container">
<label for="checkbox3">Checkbox 3</label>
<input type="checkbox" name="checkbox3">
</div>
<div class="container">
<label for="checkbox4">Checkbox 4</label>
<input type="checkbox" name="checkbox4">
</div>
</div>
<div class="row">
<div class="container">
<label for="checkbox5">Checkbox 5</label>
<input type="checkbox" name="checkbox5">
</div>
<div class="container">
<label for="checkbox6">Checkbox 6</label>
<input type="checkbox" name="checkbox6">
</div>
<div class="container">
<label for="checkbox7">Checkbox 7</label>
<input type="checkbox" name="checkbox7">
</div>
<div class="container">
<label for="checkbox8">Checkbox 8</label>
<input type="checkbox" name="checkbox8">
</div>
</div>
</div>

Try using vertical-align: middle;
input[type="checkbox"] {
vertical-align: middle;
}
<div class="test">
text <input type="checkbox" name="">
</div>

CSS - show div when select is checked

I'm trying to show div when one of the selects in group is checked and hide when not. I thought this should work, but it's not working.
https://jsfiddle.net/47ctm349/2/
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1"> Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2"> Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3"> Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
It should work when you click the checkbox in the middle, the div id="form-group-osobko" should appear.
I was trying not to use JS with my bootstrap.
Can't get my head around what I'm doing wrong :(
Thanks.

Your solution only works, if the div to be displayed is an adjacent sibling of the checkbox input, as that is what the + selector in CSS means.
If this div is neither a sibling nor a child you can't select it with CSS and will have to use JavaScript.
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
Here would be a simple jQuery solution, using just an additional class to display the div:
$('#odber-1').change(function(){
$('#form-group-osobko').toggleClass("active");
});
#form-group-osobko {
display: none;
}
#form-group-osobko.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>

Get it https://jsfiddle.net/47ctm349/5/
I just added Javascript, using Jquery. It works for any div anywhere:
$('#odber-0').on('change', function(){
if($('#odber-0').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-1').on('change', function(){
if($('#odber-1').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-2').on('change', function(){
if($('#odber-2').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
In your case no ideas with CSS.
Good luck!

Make element inside Div Vertically center

My code here
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">
Apple
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Banana
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Abc
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
xyz
</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<span class="btn btn-primary btn-file" style="float: left;">
Browse… <input type="file" id="uploadBtn" name="upload">
</span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<!--<label class="col-sm-2 control-label">
Favourite food
</label>-->
<div class="checkbox">
<label>
<input type="checkbox">
Apple
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Banana
</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<span class="btn btn-primary btn-file" style="float: left;">
Browse… <input type="file" id="uploadBtn" name="upload">
</span>
</div>
</div>
</div>
Here The Browse button resides at the top of the div, I want to bring it to vertically center with checkbox div.
Want something like
I tried:
.form-group {
vertical-align: middle;
height: 100px;
}

Flexbox is useful to solve this. Add a new class to the parent of the two blocks you wish to align center - with your code as-is that is the .row like so:
.flex-center {
display: flex;
align-items: center;
}
Here's a working example on Codepen

Bootstrap row and columns are not aligning properly with checkboxes and labels

I am trying to get my check boxes and labels to align correctly when I use the Bootstrap grid. It seems to be perfectly fine until I had a label after my check boxes.
Here is what it looks like in Firefox:
This is my code:
<div id="view2">
<div class="container-fluid center">
<div class="row">
<div class="col-xs-3">
<label for="daysAvailable">Days Available</label>
</div>
<div class="col-xs-3">
<label for="employmentDesired">Employment Desired</label>
</div>
<div class="col-xs-3">
<label for="hoursWeekly">Hours Available Per Week</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="allDays" />
<label for="allDays">All</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="monday" />
<label for="monday">Mon</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="tuesday" />
<label for="tuesday">Tue</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="fullTime" />
<label for="fullTime">FullTime</label>
</div>
<div class="col-xs-3">
<input type="text" id="hoursPerWeek" />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="wednesday"/>
<label for="wednesday">Wed</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="thursday"/>
<label for="thursday">Thu</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="friday"/>
<label for="friday">Fri</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="partTime" />
<label for="partTime">PartTime</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="saturday"/>
<label for="saturday">Sat</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="sunday"/>
<label for="sunday">Sun</label>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-3">
<label for="workNight">Can You Work Nights</label>
</div>
<div class="col-xs-3">
<label for="beenFired">Have You Been Fired Before</label>
</div>
<div class="col-xs-3">
<label for="dateAvailable">Date Available</label>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightYes" />
<label for="workNightYes">Yes</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="yesFired"/>
<label for="yesFired">Yes</label>
</div>
<div class="col-xs-3">
<input type="text" id="datepicker" />
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightNo" />
<label for="workNightNo">No</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="noFired" />
<label for="noFired">No</label>
</div>
</div>
</div>
</div>

use the bootstrap checkbox class
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>

Add border lines to bootstrap grid

enter image description hereI have a grid created using class col-md-3 which have 3 columns:
<div ng-repeat='(key, value) in permissionsViewContent' class="row">
<div class="tree_content_permissions_title">
<span> {{key}}</span>
</div>
<div ng-repeat="val in value"
class="col-md-3 tree_content_permissions">
<label class="checkbox"> <input type="checkbox">
{{val}}
</label>
</div>
</div>
this grid created from a list of values. I want my grid to have border line after each row in my grid. How can I do it using css?
Thanks,

Simply you can use <hr/> tags where you want
You can use like this:
DEMO
<div class="row">
<div class="tree_content_permissions_title">
<span>asd</span>
</div>
<div class="row">
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" value="sadfdsf" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" value="sadfdsf" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
</div>
<hr />
</div>

What about adding this then DEMO
<div ng-repeat='(key, value) in permissionsViewContent'>
<div class="row">
<div class="tree_content_permissions_title">
<span> {{key}}</span>
</div>
<div ng-repeat="val in value"
class="col-md-3 tree_content_permissions">
<label class="checkbox"> <input type="checkbox">
{{val}}
</label>
</div>
</div>
<hr>
</div>