i'm attempting add search box header bootstrap 3 template. template i'm using purchased bootstrap themes page , light ui dashboard theme.
i found answer on stack overflow it's not appearing correctly (it appears incorrectly in both chrome , edge).
how add search box icon navbar in bootstrap 3?
i modified code include search box in header glyphicon doesn't display , search box out of alignment. here screen shot.
my code follows:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');<form runat="server"> <!-- fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">crown ent.</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li role="presentation" id="dashboard"><a href="./">dashboard</a></li> <li role="presentation" id="workorders"><a href="workorders.aspx">work orders</a></li> <li role="presentation" id="invoices"><a href="invoices.aspx">invoices</a></li> <li role="presentation" id="accounts"><a href="accounts.aspx">accounts</a></li> <li role="presentation" id="people"><a href="people.aspx">people</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/admin">settings</a></li> <li><a runat="server" href="~/admin">help</a></li> </ul> <form class="navbar-form" style="padding-top:5px;"> <div class="form-group" style="display:inline;margin-top:5px;"> <div class="input-group" style="display:table;"> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> <input class="form-control" name="search" placeholder="search here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text"> </div> </div> </form> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>i can't see wrong code. adjusting css margin in attempt fix positioning ineffective.
upd. removed first line <form runat="server"> , used code
<form class="navbar-form" role="search"> <div class="form-group"> <div class="input-group"> instead of
<form class="navbar-form" style="padding-top:5px;"> <div class="form-group" style="display:inline;margin-top:5px;"> <div class="input-group" style="display:table;"> and i've added css make form wider. please check result.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); #navbar .navbar-form { overflow: hidden; } #navbar .form-group, #navbar .input-group { width: 100%; } #navbar .input-group-addon { width: 39px; }<!-- fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">crown ent.</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li role="presentation" id="dashboard"><a href="./">dashboard</a></li> <li role="presentation" id="workorders"><a href="workorders.aspx">work orders</a></li> <li role="presentation" id="invoices"><a href="invoices.aspx">invoices</a></li> <li role="presentation" id="accounts"><a href="accounts.aspx">accounts</a></li> <li role="presentation" id="people"><a href="people.aspx">people</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/admin">settings</a></li> <li><a runat="server" href="~/admin">help</a></li> </ul> <form class="navbar-form" role="search"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> <input class="form-control" name="search" placeholder="search here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text"> </div> </div> </form> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>