Is it ok to put Bootstraps' col-*-* class on input elements? - forms

Question

I'm trying to make a responsive form using Bootstrap. Is it correct to use col-**-* classes like this:
<div class="row">
<input class="col-*-blabla" ... ... >
<input class="col-*-blabla" ... ... >
</div>
or should I nest them inside of a div with the col class like this:
<div class="row">
<div class="col-*-*">
<input .. ... >
</div>
<div class="col-*-*">
<input .. ... >
</div>
</div>
Thank you.

Answer 1

You should nest them. There is one example in Bootstrap documentation that shows use of col- classes on label elements (Horizontal forms).
Look at this example, red block is a div with default col-xs-12 class inside row, as you can see below this container, when you use col- classes on input elements they will be misaligned (that's because it applies padding to input elements itself).
.div {
height: 200px;
background: red;
}
.row {
margin-bottom: 20px;
}
<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">
<div class="div"></div>
</div>
</div>
<div class="row">
<input type="text" class="col-xs-4">
<input type="text" class="col-xs-4">
</div>
<div class="row">
<div class="col-xs-4">
<input type="text">
</div>
<div class="col-xs-4">
<input type="text">
</div>
</div>