Bootstrap breaking point on nav bar - html

I have started using bootstrap recently so I am still learning. My problem is on the navigation bar i have created. I have all the contents pulling right but the search bar and tabs are breaking line. I have tried a few things like setting break points to xs and so on.
here is what it looks like.
enter image description here
<div class="container-fluid">
<div class="row-fluid">
</div>
<div class="row-xs pull-right" >
<div class="col-xs">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class"col-xs">
<form class="navbar-form " 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>
</div>
</div>
</nav>
</div>

You're HTML is missing numerous elements row-xs, col-xs, and row-fluid are not classes in Bootstrap3 and you have some syntax errors also.
I would suggest starting out with a standard navbar class and customizing it from there but if you have or want to use columns and row see the Docs on the right way to use these in general.
See working examples of a navbar and a variation of your code in the 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.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-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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 class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<form class="navbar-form navbar-right" 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>
</div>
</div>
</div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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>
and what does "navbar-toggle collapsed" do.
Thanks

Related

I can't make bootstrap dropdown to work

I am facing problem in the dropdown in bootstrap. I have attached all the necessary file correctly. But still its not working.
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>
Make sure your order of placing jquery and bootstrap is correct. Check below snippet which works correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>

Responsive navigation with logo search and links in Bootstrap

I'm trying to create a responsive header in Bootstrap and am having problems getting it right for mobile devices - it look good for large displays. Here is my html code for layout. I would highly appreciate your help!!! The pic is below the code. Thank you!!!
<section class="container">
<!--HEADER-->
<div class="row header" >
<div class="col-md-6">
<div class="logo">
<img src="img/logo.png" class="img-responsive" >
<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>
</div><!--/Logo-->
</div>
<div class="col-sm-6 col-lg-6">
<!--Top Utility Links-->
<div class="col-sm-12">
<ul class="utility">
<li>Home</li>
<li>contacts</li>
<li>Help</li>
</ul>
</div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->
<div class="col-md-8 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div>
<!--/input-group-btn -->
</div>
<!--/input group -->
</form>
</div><!--/col-sm-8 SEARCH-->
</div>
<!-- <nav class="navbar navbar-default" role="navigation">-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li>ABOUT</li>
<li>SERVICES</li>
<li class="dropdown">
HISTORY <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Another link</li>
<li>One More Link</li>
</ul>
</li>
</ul>
</div>
<!-- </nav>-->
</div>

Add section in a nav bar

In bootstrap 3, i have a nav bar, with an form bar.
I try to add another section just to the right of the search button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Righ now, the other section is below, like you can see on the image.
If you want to use float:right that is what navbar-right does, simply invert order of form and dropdown. right floated element must be placed BEFORE others in order to make others floats around them.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
</div>
Unless you're applying other changes to the navbar, you shouldn't need the extra classes you've applied (col-sm-12/pull-right/etc). Just use the default classes and structure and but reorder your right floated navigation elements so they're in the order you want.
See example.
<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-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li><i class="glyphicon glyphicon-log-out"></i> Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Twitter Bootstrap 3.3.5 navbar drop-down pull-right

I am trying to make the drop-down go to the extreme right, after the search input and submit button, tried pull-right, navbar-right but to no avail.
Is there a way to achieve this?
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right" 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>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
I'm trying this:
Really not sure, but what it does if you change the login part ul from:
<ul class="nav navbar-nav pull-right">
to:
<ul class="nav navbar-right pull-right">
You need to make the links after the search form :
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form" 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>
<ul class="nav navbar-nav">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
And this is the CSS for it :
#navbar{
float:right !important;
}
.navbar-form{
display:inline-block;
float:left;
}
Here's the JSFiddle
Note : For the mobile version , you only need to make this under the right media query :
#navbar{
float:none !important;
}

Bootstrap collapse button collapses; but not visible

Hi guys I'm using bootstrap for a responsive Nav for the first time.. I've looked up a couple answers to similar questions but can't seem to get my Nav toggle button to show.
The button toggles correctly and displays my Nav; but is invisible. Any insight would be greatly appreciated! :)
<!-- NAVIGATION -->
<div class="nav-container">
<div class"navbar navbar-default" role="navigation">
<div class="container inner-container">
<div class="navbar-header">
<img src="img/index/skytek-logo/Skytek_c1_S.png" width="160px" height="90px" alt="Skytek Logo"><p class="navbar-slogan">Engineering Excellence</p>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<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 class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Support & Services</li>
<li>Sales</li>
<li>News</li>
<li>Contact</li>
<li>Careers</li>
<li>Login</li>
<li class="search-bar">
<form class="navbar-form" role="form" method="get" action="#">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-success">Go</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVIGATION -->
You're missing an equals sign here:
<div class="navbar navbar-default" role="navigation">
----------^
Demo