CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jacob1992
jacob1992

Reputation: 141

Bootstrap input text in center of column

I'm using Bootstrap but with a non-collapse nav. I'm trying to have the search form placed in center of the col-md-6. I seem to have tried everything so far but nothing works but it still aligns left in the column. Anyone know how I can achieve that?

Here's my code:

<div class="navbar navbar-default">
        <div class="container" style="margin-top:14px;">
            <div class="row">
                <div class="col-md-3">
                    <div class="navbar-header pull-left">
                    <a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
                    </div>
                </div>
                <div class="col-md-6">
                        <div class="navbar-header search">
                        <input type="text" id="search" class="form-control" placeholder="Search"></input>
                        </div>
                </div>
                <div class="col-md-3">
                    <div class="navbar-header pull-right">
                    <button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks alot in advance!

Upvotes: 2

Views: 24511

Answers (3)

shershen
shershen

Reputation: 9993

you can do it with following set of CSS rules:

<div class="row">
                <div class="col-md-3">
                    <div class="navbar-header pull-left">
                    <a class="navbar-brand" href="#">&lt;%= image_tag ("logo.png") %&gt;</a>
                    </div>
                </div>
                <div class="col-md-6" style="
    text-align: center;
">
                        <div class="text-center navbar-header search" style="
    display: inline-block;
    float: none;
    margin: 0 auto;
">
                        <input type="text" id="search" class="form-control" placeholder="Search">
                        </div>
                </div>
                <div class="col-md-3">
                    <div class="navbar-header pull-right">
                    <button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
                    </div>
                </div>
            </div>

Make alignment within central column div text-align: center; and display the block with float: none;.

Here is plunk with properties assigned CSS classes: http://plnkr.co/edit/Iu3rnVK5dLi7fiaSHBRj?p=preview

Upvotes: 2

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

If you can replace the div parent with a form element you could do it without additional styles:

<div class="col-md-6">
    <form class="form-inline text-center">
        <input id="search" class="form-control" type="text" placeholder="Search">
    </form>
</div>

JSFiddle

Bootstrap alignment classes

Upvotes: 0

Asad Ali
Asad Ali

Reputation: 397

make it's position absolute, check in firebug if it is inheriting float from any other class. In bootstrap you have to beware of these things as well.

after doing this go for auto margin or try with top left positions by giving values in percentage values

Upvotes: 1

Related Questions