I'm trying to make a 1 column form in bootstrap with some rows sharing a second column. It's for making an employee profile editing page in an intranet so I don't really care about medium or small screen sizes.
I'm trying to make it using an example I found here but the result is not what I need. I'm used to work with CSS style sheets but to be honest, bootstrap grid system always confuses me.
Here's a mockup of what I need:
and here's what I'm getting:
Here's my code:
<form method="post" class="form-horizontal">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label for="inputEmail" class="col-md-4 control-label">Email:</label>
<div class="col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label for="inputLabel3" class="col-md-4 control-label">Label 3:</label>
<div class="col-md-8">
<div class="img-preview img-preview-sm">
<img src="<?php echo EMPLOYEE_IMG_URL; ?>/1.jpg">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label for="inputEmail" class="col-md-4 control-label">Email:</label>
<div class="col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</form>
Thanks in advance!!!
for first 4 inputs and image you have to create row divided into two columns (col-md-6) for left col set inputs with col-12 for right col set the image