arpymastro arpymastro - 2 months ago 35
CSS Question

Full width searchbar in navbar bootstrap

I want to get a navbar with logo image at the left and some links at the right in two rows and in the middle I want a big search bar. I am using bootstrap 3.7.7. I managed to get the logo on the left and other links over the right but no luck with big search bar. I am using following code to achieve the same -

<div class="navbar navbar-inverse navbar-fixed-top navcustom">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#">
<img class="img-responsive" src="~/img/finalogo.png" class="img-responsive"/>
</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html">About</a></li>
<li><a href=""><i class="icon-user"></i> My Page</a></li>
<li><a href="#loginform" data-toggle="modal">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a title="Start a new search" href="#">Clear</a></li>
</ul>
<div class="form-group">
<input class="form-control" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div><!--/.nav-collapse -->
</div>
</div>


But no luck with the search bar size -
enter image description here

Need help. Thanks

Answer

You can use following code for Search Bar with Search Icon :(Using Bootstrap)

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
	href=""
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>


<div id="custom-search-input">
    <div class="input-group col-md-12">
        <input type="text" class="form-control input-lg" placeholder="Search" />
                <span class="input-group-btn">
                   <button class="btn btn-info btn-lg" type="button">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </div>
</div>