I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) in the top navbar:
In Bootstrap 2, it could've ben done like this:
<form class="form-search" method="get" id="s" action="/">
<div class="input-append">
<input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
<button type="submit" class="add-on"><i class="icon-search"></i></button>
</div>
</form>
But I am not sure how to produce the same in Bootstrap 3 as so much has changed.
The default HTML for the navbar search box form in Bootstrap 3 is:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
How do I modify it to achieve what I need?
This question is related to
css
html
twitter-bootstrap
twitter-bootstrap-3
The answer is
You could use the segmented buttons example from Bootstrap 3:
<form action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="Search" placeholder="Search..." class="form-control" />
<div class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
This is the closest I could get without adding any custom CSS (this I'd already figured as of the time of asking the question; guess I've to stick with this):
And the markup in use:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
PS: Of course, that can be fixed by adding a negative margin-left (-4px) on the button, and removing the border-radius on the sides input and button meet. But the whole point of this question is to get it to work without any custom CSS.
_x000D_
_x000D_
_x000D_
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
_x000D_
<meta charset="utf-8">_x000D_
<meta http-equiv="X-UA-Compatible" content="IE=edge">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<meta name="description" content="">_x000D_
<meta name="author" content="">_x000D_
_x000D_
<title>3 Col Portfolio - Start Bootstrap Template</title>_x000D_
_x000D_
<!-- Bootstrap Core CSS -->_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->_x000D_
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->_x000D_
<!--[if lt IE 9]>_x000D_
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>_x000D_
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>_x000D_
<![endif]-->_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<!-- Navigation -->_x000D_
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">_x000D_
<div class="container">_x000D_
<!-- Brand and toggle get grouped for better mobile display -->_x000D_
<div class="navbar-header">_x000D_
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">_x000D_
<span class="sr-only">Toggle navigation</span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">Start Bootstrap</a>_x000D_
</div>_x000D_
<!-- Collect the nav links, forms, and other content for toggling -->_x000D_
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">_x000D_
<ul class="nav navbar-nav">_x000D_
<li>_x000D_
<a href="#">About</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">Services</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">Contact</a>_x000D_
</li>_x000D_
</ul>_x000D_
<form class="navbar-form navbar-right">_x000D_
<div class="input-group">_x000D_
<input type="text" name="keyword" placeholder="search..." class="form-control">_x000D_
<span class="input-group-btn">_x000D_
<button class="btn btn-default">Go</button>_x000D_
</span>_x000D_
</div>_x000D_
</form>_x000D_
</div>_x000D_
<!-- /.navbar-collapse -->_x000D_
</div>_x000D_
<!-- /.container -->_x000D_
</nav>_x000D_
_x000D_
<!-- Page Content -->_x000D_
<div class="container">_x000D_
_x000D_
<!-- Page Header -->_x000D_
<div class="row">_x000D_
<div class="col-lg-12">_x000D_
<h1 class="page-header">Page Heading_x000D_
<small>Secondary Text</small>_x000D_
</h1>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
_x000D_
<!-- Projects Row -->_x000D_
<div class="row">_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
_x000D_
<!-- Projects Row -->_x000D_
<div class="row">_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
_x000D_
<!-- Projects Row -->_x000D_
<div class="row">_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
_x000D_
<!-- Projects Row -->_x000D_
<div class="row">_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
<div class="col-md-3 portfolio-item">_x000D_
<a href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/700x400" alt="">_x000D_
</a>_x000D_
<h3>_x000D_
<a href="#">Project Name</a>_x000D_
</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
_x000D_
<hr>_x000D_
_x000D_
<!-- Pagination -->_x000D_
<div class="row text-center">_x000D_
<div class="col-lg-12">_x000D_
<ul class="pagination">_x000D_
<li>_x000D_
<a href="#">«</a>_x000D_
</li>_x000D_
<li class="active">_x000D_
<a href="#">1</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">2</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">3</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">4</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">5</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#">»</a>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
</div>_x000D_
<!-- Footer -->_x000D_
<footer>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-lg-4 col-md-4 col-sm-4">_x000D_
<h3>About</h3>_x000D_
<ul>_x000D_
<li>_x000D_
<i class="glyphicon glyphicon-home"></i> Your company address here_x000D_
</li>_x000D_
<li>_x000D_
<i class="glyphicon glyphicon-earphone"></i> 0982.808.065_x000D_
</li>_x000D_
<li>_x000D_
<i class="glyphicon glyphicon-envelope"></i> [email protected]_x000D_
</li>_x000D_
<li>_x000D_
<i class="glyphicon glyphicon-flag"></i> <a href="#">Fan page</a>_x000D_
</li>_x000D_
<li>_x000D_
<i class="glyphicon glyphicon-time"></i> 08:00-18:00 Monday to Friday_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="col-lg-4 col-md-4 col-sm-4">_x000D_
<h3>Support</h3>_x000D_
<ul>_x000D_
<li>_x000D_
<a href="#" class="link">Terms of Service</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#" class="link">Privacy policy</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#" class="link">Warranty commitment</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#" class="link">Site map</a>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="col-lg-4 col-md-4 col-sm-4">_x000D_
<h3>Other</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod_x000D_
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,_x000D_
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo_x000D_
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse_x000D_
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non_x000D_
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.row -->_x000D_
</footer>_x000D_
_x000D_
<!-- /.container -->_x000D_
_x000D_
<!-- jQuery -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- Bootstrap Core JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>I tried @PhilNicholas 's code and got the same problem of @its_me said in the comments that search bar show up on the next line of navbar, and I found that form need to be added an attribute width.
<form role="search" style="width: 15em; margin: 0.3em 2em;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
This one I implemented for my website , If some one got more no's of menu item and longer search bar can use this
Here is the code
<style>
.navbar-inverse .navbar-nav > li > a {
color: white !important;
}
.navbar-inverse .navbar-nav > li > a:hover {
text-decoration: underline;
}
.navbar-collapse ul li {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-collapse ul li a {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-brand img {
width: 200px;
height: 40px;
}
.navbar-inverse {
background-color: #3A1B37;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"></a>
<div class="col-md-6 col-sm-8 col-xs-11 navbar-left">
<div class="navbar-form " role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" style="max-width: 100%; width: 100%;">
<div class="input-group-btn">
<button class="btn btn-default" style="background: rgb(72, 166, 72);" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-brand visible-md visible-lg visible-sm" style="visibility: hidden;" runat="server">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin" />
</li>
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul> </div>
</div>
</div>
Source: Stackoverflow.com