Vertical Align Element in Bootstrap col - html

Question

I have a setup just like the one I replicated.
I wanted to put the checkbox vertically aligned in the middle (same height as the other col) so it doesn't look so strange.
Any idea how to achieve this?
label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>

Answer 1

You should start by giving the row a display: flex then you should reset the label's margin.
Then you could center the div by either using margin: auto 0; or align-self: center; both will work. I would also recommend upgrading to bootstrap 4. Here is a tool to help you upgrade to bootstrap 4
label {
display: block !important;
margin-bottom: 0;
margin-top: 0;
}
.row {
display: flex;
}
.col-xs-6 {
border: 1px solid red;
}
.align-self-center {
align-self: center;
/* margin: auto 0; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6 align-self-center">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>

Answer 2

label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
.row{
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>