Full width searchbar in navbar bootstrap

Question

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 -

Need help. Thanks

Answer 1

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>