How to add inline components inside a default Bootstrap 3 form? - html

Question

I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.

Answer 1

For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2

Answer 2

Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW