Centralization of navbar

Question

Centralization of navbar

Navigation

#1 by (1 votes)

2

I'm trying to align this search bar in the middle, but the button is not beside it. If you can help me, thank you in advance.

<divclass="row">


                <div id="custom-search-input">
                    <form  action="#" method="POST" autocomplete="on"  class="navbar-form navbar-">
                        <div class="input-group col-md-6 col-md-offset-3  ">
                            <input autofocus="text" type="text" name="pesquisa" class="  search-query form-control" placeholder="Search" />
                            <span class="input-group-btn col-md-4">
                                <button class="btn btn-success " type="submit">
                                    <span class=" glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

php nav-bar

asked by anonymous 16.11.2018 / 19:16

1 answer

Access the site via HTTPS - AWS add more than one name in the form

score 1 · Accepted Answer

You have put the class col-md-4 on the button, then the grid breaks the element to the bottom line, just remove this class

See

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />

    <div class="container">
    <div class="row">


        <div id="custom-search-input">
            <form  action="#" method="POST" autocomplete="on"  class="navbar-form navbar-">
                <div class="input-group col-md-6 col-md-offset-3  ">
                    <input autofocus="text" type="text" name="pesquisa" class="  search-query form-control" placeholder="Search" />
                    <span class="input-group-btn ">
                        <button class="btn btn-success " type="submit">
                            <span class=" glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>