CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
phre
phre

Reputation: 9

Bootstrap form-horizontal: What am I doing wrong?

I have a problem with the Bootstrap form-horizontal. I am trying to keep the search bar in the middle by using the Bootstrap Grid System 3+(6 for the search bar)+3 = 12 columns.

After I add 2 select's they are not pushed down to the next row, even though I already have 12 columns in this row.

<div class="container">
        <form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
            <div class="form-group">
                <div class="col-md-3"><select class="form-control"></select></div>
                <div class="col-md-3"><select class="form-control"></select></div>
            </div>
        </form>
</div>

What am I doing wrong here?

Thanks!

Upvotes: 0

Views: 105

Answers (2)

EdwardM
EdwardM

Reputation: 1146

Everytime you want to start a new "field row" in a horizontal form layout, you should add a new <div class="form-group"></div>. You would probably do something like this:

<div class="form-group">
    <div class="col-md-6 col-md-offset-3">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
                </span>
            </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-6 col-md-offset-3">
            <div class="col-md-6">
                <select class="form-control">
                </select>
            </div>
            <div class="col-md-6">
                <select class="form-control">
                </select>
            </div>
    </div>
</div>

Also, see how I added the col-md-offset-3 to push the div over, instead of putting a blank div.

Upvotes: 0

joshhunt
joshhunt

Reputation: 5335

I'm not exactly sure how you want it to look but the issue is that you have .form-group next to your 3 columns instead of being inside one of the columns. This fixes the issue:

<div class="container">
    <form role="form" class="form-horizontal">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <div class="col-md-3">
                    <select class="form-control"></select>
                </div>
                <div class="col-md-3">
                    <select class="form-control"></select>
                </div>
            </div>
        </div>
    </form>
</div>

See Bootply.

Upvotes: 1

Related Questions