Bootstrap input labels on left of input (rather than on top) - css

Question

I am fairly new to Bootstrap and I'm trying to make a simple form, all elements of which are in a single line on the screen. My html code for the form looks something like this:
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label>Search by:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Something:</label>
<input class="form-control" type="text">
</div>
</div>
</fieldset>
</form>
By default, the labels for my input fields appear about the input fields. I want them to be on the left side of the input fields. I've googled and checked on here how to implement this, but none of the solutions I found have worked (I tried adding classes to my form and changing their CSS, and tried using bootstrap's form-inline functionality).
Does anyone know how I could make the form look how I want it to look?

Answer 1

You will want to make two modifications to each form group in order to utilize the bootstrap grid system.
not sure which version of BS you are using but for grid it is the same concept: https://v4-alpha.getbootstrap.com/layout/grid/
You will want to use bootstrap grid system to define that the label and input on are the same line. Keep in mind that there are 12 columns in 1 row so items you want to be on the same line must add up to 12.
Add the following classes to your label: "col-lg-2 col-md-2 col-sm-2 control-label"
Wrap your input in a div and add the following classes: "col-lg-10 col-md-10 col-sm-10"
You will notice that between these two elements, the columns add up to 12 so in the bootstrap grid system, they will be on the same line.
(I also wrapped this in a container just for a more tidy display on this post)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>