Aligning a checkbox and text in two different columns - html

Question

I am working on a display where there are 3 checkboxes. When one of these checkboxes is triggered, a message or input field should appear. I got that part working, but the checkbox and the message are not aligned as shown in the image below
As you can see the "Ondertiteling" checkbox is not aligned with the text "Ondertitel enabled".
This is my code (with the toggling of the message ommitted for the question's sake)
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label> <input type="checkbox">Ondertitels</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">Vertaling</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div>Ondertitel enabled</div>
<div>Vertaling enabled</div>
<div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I align the text to be on the same height as the checkbox? Thanks in advance.

Answer 1

I would ask to change your markup to fix the formatting so that bootstrap will handle it for us. Change the markup into rows such as this:
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
See demo below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Ondertitels</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Ondertitel enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Well the solution of your problem is to create three separate rows and one row spanning total 12 columns, for which you will use 3 for one checkbox and other for your notification or message.
So each message and check box will be bundled together in container or row class.
Will provide code shortly, if you don't understand what I am trying to say

Answer 3

remove the 10px margin-top from your checkbox class or add it to the othediv. I think this is what cause your offset. :)

Answer 4

Ok so you just need to add margin-top: 10px and margin-bottom: 10px to your div inside the col-lg-9

Answer 5

The answer you are probably searching is just changing the line or font height in your lg9 div
or using only one column, with checkbox and label having a constant width