How to get bootstrap html elements positioned on a single line - javascript

I'd like to create a site header like the one on stackoverflow..
I am using bootstrap but can't seem to get the header elements to appear on a single line.
Anyone have any ideas how I can achieve this?
Here is the jsfiddle - https://jsfiddle.net/31wxk9ak/2/ . depending on the size of your screen you may need to adjust the page split on this page in order to prevent you browser from stacking the elements.
Desired layout
Here is the code:
<html><head></head><body>
<div id="root">
<div data-reactroot="" class="container fill">
<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>
<a class="navbar-brand" href="/">Home</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a title="About" href="/about">About</a></li>
<li><a title="Contact" href="/contact">Contact</a></li>
<li>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group"><input type="text" class="form-control"
placeholder="Search..."
value=""><span class="input-group-btn"><input
type="button" class="btn btn-default" value="Go!"></span></div>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">
https://oss.maxcdn.com/respond/1.4.2/respond.min.js'>

You are not implementing the navbar properly, use a form for the search box.
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
JSFiddle Demo
Reference:
Bootstrap Navbar

There's obviously many ways to do this, but I'll just show a couple. The first one uses floating, simply apply this to all navbar headers.
.navBarHeader {
float: left;
}
Alternately, you can use inline-block.
.navBarHeader {
display: inline-block;
}

Related

Making my navbar form search field full width

I have this navbar below and I'd like to make the search field in the form full width, so it expands as much of the navbar as possible without pushing anything else out of the way.
How would I do this?
I've tried a couple of different things like setting the width of different elements but nothing seems to work.
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" [routerLink]="['/home']">Web App</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</nav>
This can be achieved with display:flex; and wrapping the relevant elements in divs. I set the first and second div to flex-shrink:1;, which means they shrink to the content of the div. Then I have added flex-grow: 1;to the second div so it fills the remaining space.
I also added width:100%; to the input field.
.flex {
display:flex;
}
.flex > div {
padding:0 5px;
flex-shrink:1;
}
.flex > div:nth-child(2) {
flex-grow: 1;
}
input {
width:100%;
}
.collapse {
display:none;
}
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container flex">
<div>
<a class="navbar-brand" [routerLink]="['/home']">Web App</a>
</div>
<div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false"> <span class="navbar-toggler-icon">Menu</span> </button>
<div class="collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Add with and float on the below element:
<ul class="navbar-nav mr-auto">
CSS:
width: 100px;
float: right;
The float you set does not work as the width of the element is 100%. You can also set text-align: center but depends how you want your text starts.
To align it properly now, use margin-right and margin-left to display it right where you want.
Edit:
To have full width search bar:
form, input {
width: 100%;
}
Edit 2:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<div class="row w-100">
<a class="col-2 navbar-brand" [routerLink]="['/home']" style="max-width:100px">Web App</a>
<form class="col form-inline">
<input class="form-control mr-sm-2 w-100" type="search" placeholder="Search" aria-label="Search">
</form>
<button class="col-1 navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" style="min-width:50px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-1 collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

Bootstrap 3 keep menu open and show div

I've built a Nav bar with a profile dropdown (right hand side of menu):
http://www.bootply.com/Rqj51l2VFO
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" <!--style="width:96%" -->>
<li>Open Cases</li>
<li>Closed Cases</li>
<li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li>
<li class="active">{$case['object_ref']}</li>
<!-- <li style="float:right;"><span class="glyphicon glyphicon-question-sign"/></li> -->
</ul>
<!-- http://bootsnipp.com/snippets/featured/account-in-navbar -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="menu">
<a href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>{$person['name']}</strong>
<span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login" style="width: 400px;">
<div class="row">
<div class="col-lg-4">
<p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p>
<p>Change Photo</p>
</div>
<div class="collapse" id="change_pic">
<p>Hi!</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Email Address</strong></p>
<p class="text-left small">{$person['main_location[email]']}</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<p>Logout</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
When I click the change photo link, I want a Div to open and the menu to stay open so the user can interact with an input that shows I.e the user would enter a URL to the photo they want in the profile.
This works fine but the menu disappears. So I added the following JS so the menu stays:
JS:
$('#menu .dropdown-menu').on({
"click": function(e) {
e.stopPropagation();
}
});
The issue I have is that now the menu stays open - the bootstrap collapse class isn't working to show/hide.
Could anybody explain what I'm doing wrong here please?
Here is one way to keep the dropdown open after click and keep collapse class working to show/hide. ...
add ID to your Change photo button:
<p>Change Photo</p>
use this following function:
$('#change-photo').on('click', function () {
$('#change_pic').toggle();
return false;
});
check it out here: http://www.bootply.com/8Yo0fBXgN9#

Bootstrap Dropdown menu doesn't show

I'm using bootstrap to make a dropdown menu for login form, but when I click the image for login I cannot get the dropdown menu to display.
<ul class="nav navbar-right navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" href="#">
<img src="~/Content/img/user-icon.png" />
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">enter code here
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login</button>
<br>
<br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a>
</p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about" class="cart">
<img src="~/Content/img/shopping-cart-icon.png" />
<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
I have added javascript and css from bootstrap, why doesn't my login form show?
EDIT
this is my code in fiddle here
You are missing the jQuery reference. Bootstrap requires jQuery to runt its plugins.
I have added the jQuery reference in your fiddle and the menu works ok. Try it.
Check out Bootstrap Documentation.
The parent element needs to be of class dropdown:
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul class="nav navbar-right navbar-nav dropdown">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Foobar
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<p>BAZ form</p>
</form>
</div>
</li>
</ul>
you should add jquery file also. bootstrap is build on jquery.add jquery to your file then it will work.
here is working fiddle for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default 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-1">
<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="navbar-collapse-1">
<ul class="nav navbar-nav" style="margin-left: 5em;">
<li class="active">HOME</li>
<li>STORE</li>
<li>FAQ</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
<ul class="nav navbar-right navbar-nav dropdown" >
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Login</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password"><br>
<button type="button" id="btnLogin" class="btn">Login</button><br><br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a></p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li><a href="#about" class="cart">Cart<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
http://jsfiddle.net/yugi47/20jttkzh/3/

How To Remove Default Padding From Bootstrap Nav Bar

Bootstrap JS/CSS is appending transparent space to the bottom of a NavBar inside a <td> in my home page. This shows a live preview of the issue I'm having with the default bootstrap configuration of NavBars.
Here is a complete, (minus the inclusion of the bootstrap files) and minimal example of the code I wrote to create the NavBar.
<html>
<body>
<table align="center" border="1px"><tr>
<td>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="index.html">Home</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 navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
<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>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</td></tr>
</table>
</html>
Any help is appreciated.
Cheers.
You can update the css class "navbar" with updated margin.
.navbar { margin-bottom: 0 }
Fiddle: http://jsfiddle.net/kiranvarthi/jmJWr/24/
The cleanest solution for this is, when you export your boostrap version from here, just edit the #navbar-margin-bottom field, you should set it to 0px insted of #line-height-computed (default value).

Bootstrap 3.2 Navbar not collapsing with jquery.min.map error

I am using Bootstrap for the first time and my navbar is not collapsing. So in response to this question on SO, I checked the order of jquery and Bootstrap js files and its OK.
When I checked the Network tab to check if all resources are loading correctly, I am getting jquery.min.map error that it can't be loaded.
Is my problem related due to this missing file and why Bootstrap is asking for this file?
Here is the image :
And when I further decrease the screen width, the links and search disappear and the expand button also does not appear.
Here is my code for navbar for the reference
<div class="container" id="main">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li class="dropdown">
Founders <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Naveen</li>
<li>Sumit</li>
<li>Sanjeev</li>
<li class="divider"></li>
<li>Naveen</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-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>
<ul class="nav navar-nav pull-right">
<li>
<span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
</div>
You left out part of your nav html under navbar-header:
<button type="button" class="navbar-toggle collapsed" 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>
Here is a jsFiddle

Categories