In Bootstrap 3.3.4, I try to have an input group in a navbar that spans 8 central columns, next to brand name. Unfortunately input group either seems to remain fixed size, or stretches input-group-addon. The code that is the closest to what I want to achieve (modulo this stretching) is this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="#">Brand</a>
</div>
<div class="col-xs-8">
<form class="navbar-form">
<div class="form-group" style="width: 100%">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" style="width: 100%">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
</div>
</div>
If you give the form a class of form it will allow the form group to stretch to 100% as you want.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="#">Brand</a>
</div>
<div class="col-xs-8">
<form class="form">
<div class="form-group">
<div class="input-group" style="">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
http://codepen.io/anon/pen/QbWMax
Related
I'm creating a navbar-fixed-top for my page and when the navbar is collapsed (e.g. for small viewports), there is extra space between the "Brand" name and the expand menu icon.
Here is a picture of what is happening:
Extra Space in Collapsed Navbar
And here's my navbar code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class ="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navTop" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"
style="padding-bottom: 7px;"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
Can you help me figure out how to remove the extra space? Thanks!
Your navbar-header should enclose the button, it currently ends before the button starts. Also, (depending on your use case) the form doesnt need to be inside a ul and causes display issues if it is actually. See Docs
See working Example Snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navTop">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
see if you have the following. Hope it helps
.navbar-brand {float: left;} and .navbar-toggle{float: right;}
I have a bootstrap based html that looks the way I want in Bootply, but in my page the query field looks narrower than it should. I just don't know what is wrong.
Here is the code:
<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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair</li>
</ul></li>
</ul>
<form class="navbar-form" method="post">
<div class="form-group" style="display: inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Busca" name="q">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
<!--/.navbar-collapse -->
</div>
Here is the desired result:
Here is the real result:
What you're seeing the default behavior. You can easily adjust this to accommodate your needs though. Assign the form a new class, add the appropriate width and you may want/need to adjust the top position.
See working Snippet at Full Page.
#media (min-width: 768px) {
.navbar-form-fw {
width: 95%;
}
.input-group.input-group-fw {
top: 8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair
</li>
</ul>
</li>
</ul>
<form class="navbar-form-fw" method="post">
<div class="form-group">
<div class="input-group input-group-fw">
<input type="text" class="form-control control-form" placeholder="Busca" name="q"> <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>
I've got some troubles with bootstrap v3.3.4. I need to get search bar that will fit entire width of the navbar like this (v3.0.3): http://bootply.com/109727 But it feels like there is some troubles with input group and I am getting that (v3.3.4): http://plnkr.co/edit/4UwlbwM1O0zC9jxjXOOn?p=preview Any ideas how to fix that? Or is there another way to get same result?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container" id="navbar-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="#">Furni.co</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-btn mr10">
<a tabindex="0" class="btn btn-danger" role="button" data-popover-content="#popover_sign_up" data-toggle="popover" >Sign up</a>
</p>
</li>
<li>
<p class="navbar-btn">
<a tabindex="0" class="btn btn-default" role="button" data-popover-content="#popover_log_in" data-toggle="popover" >Log in</a>
</p>
</li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon go">Go!</span>
<input type="text" class="form-control navbar-search" placeholder="Search cnc furniture">
<span class="input-group-addon top-bars btn-default">
<span class="fa fa-bars"></span>
<div class="arrow-container">
<span class="fa fa-sort-desc"></span>
</div>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
Replace the following lines
<div class="form-group" style="display:inline;">
<div class="input-group">
with
<div class="form-group" style="display:inline-block; width:70%">
<div class="input-group" style="width:100%">
Here is what I got with the above change
http://plnkr.co/edit/e07Ces01ub81FKwzEqk7?p=preview
I am trying to embed a typeahead instance into my navbar. The code looks like follows:
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<span class="navbar-brand" href="#">Time Accounting</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="cb_users" type="text" class="form-control" data-provide="typeahead" autocomplete="off">
</div>
</form>
[...]
</div>
</div>
</nav>
and
$('#cb_users').typeahead({
source: ['item1','item2','item3']
})
All I am left with is a input field that does't have the typeahead capability.
I am using the component from this repository https://github.com/bassjobsen/Bootstrap-3-Typeahead
I am trying to implement a bootstrap naivgation bar that is fixed top, and contains a register and login button closer to the right end of the bar. What are some of the best practices for this? The bootstrap documentation does not seem to help much. The bar must not be collapsible.
EDIT
This is the updated version of your code. Is this an appropriate way to use bootstrap though?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">App Name</a>
</div><!--end navbar header-->
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<button type="submit" class="btn btn-success">Sign in</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Register</button>
</div>
</form>
</div>
</div><!--end container-->
</nav>
There is a Bootstrap example providing what you want: http://getbootstrap.com/examples/jumbotron.
You can easily add another button:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<!-- BUTTON ADDED -->
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>