CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Aligning different bootstrap columns

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:
img

Upvotes: 0

Views: 50

Answers (2)

Manindra Singh
Manindra Singh

Reputation: 769

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>

Upvotes: 1

Edo San
Edo San

Reputation: 58

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>

Upvotes: 0

Related Questions