Navbar centering

Asked

Viewed 20 times

2

I am trying to align in the center this search bar but the button is not on the side. If you can help me I thank you already. inserir a descrição da imagem aqui

 <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 col-md-4">
                                <button class="btn btn-success " type="submit">
                                    <span class=" glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

1 answer

1


You put the class col-md-4 on the button, then the grid breaks the element to the bottom row, just remove that class

Behold

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

  • Thank you very much, it worked :)

  • @Thaynapinheiro good that solve, if you think the problem has been solved consider mark the Answer as Accepted so it does not get pending on the site as unanswered question accepted

Browser other questions tagged

You are not signed in. Login or sign up in order to post.