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.