Aligning different bootstrap columns - html

Question

I wrote a form as shown here.
CSS is:
#mainContainer {
width: 1000px;
margin: 0px auto;
overflow: hidden;
}
.form {
padding-left: 0%;
height: 123px;
min-height: 520px;
min-width: 350px;
width: 34%;
background: #166bb3;
}
#formDiv {
margin: 5%;
}
#username, #selectCou {
width: -moz-available;
height: 36px;
}
#dob {
height: 36px;
}
#selectGen {
height: 36px;
width: 149px;
}
You can see that Or is coming below the form. I want it to appear beside Fill your information here. How can I do it?
For more clarity, here is the screen shot:

Answer 1

try this:
<div class="row">
<div class="col-md-6">
<h4>Fill your information here</h4>
//put your form here
</div>
<div class="col-md-6">
<h4>Or</h4>
//your Or content here
</div>
</div>

Answer 2

If you want to use Bootstrap columns you should stick to the implemented Grid system classes (you can find the doc here ).
This grid system splits a row into 12 hypotetical columns that you can enlarge as you want, bearing in mind that the maximum width is 12. You can have 12 columns with width 1/12 or 2 columns with width 6/12 or any combination of columns which total width must be 12/12.
To achieve what you want you should wrap 2 6-col divs in a row.
<div class="container">
<div class="row">
<div class="col-md-6">
Left form
</div>
<div class="col-md-6">
Right form
</div>
</div>
</div>