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
Related
I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.
Here's my HTML,
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse visible-xs">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
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>
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
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>
I'm new to Bootstrap and just attempting to get the responsive navigation to work. When I resize the window, I do see the collapsed navbar icon but it doesn't display the add link.
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
My Books
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Add</li>
</ul>
</div>
</div>
</nav>
</div>
I found the source of the problem.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
In fact should be:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#.navbar-collapse">
data-target should be the class name of the nav div.