I created this piece of code but for some reason both the login modal and the dropdown menu don't work.
jsfiddle.net
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Parks <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alcazar Park</li>
<li>Municipality Park</li>
<li>OSE Park</li>
</ul>
</li>
<li><a href="contactus.html"><span class="fa fa-envelope-o"
aria-hidden="true"></span> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#loginModal">
<span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Email" class="form-control input-sm">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" class="form-control input-sm">
</div>
<div class="checkbox">
<label style="color:black;">
<input type="checkbox"><small>Remember Me</small>
</label>
</div>
<button type="submit" id="signIn" class="btn btn-info btn-sm">Sign In</button>
<button type="button" id="cancelModal" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
Any ideas what could be wrong? I find it very weird,as I can't find any mistake.
Thanks,
Theo.
it is missing jquery library.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://jsfiddle.net/nwen88pk/3/
For both Bootstrap features you're looking for (Modal and Dropdown), jQuery is required. Your code in your fiddle is missing the jQuery library.
https://code.jquery.com/jquery-3.2.1.min.js
Also, you must include the jQuery library before including the Bootstrap JavaScript.
Related
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form class="form-inline" role="form">
<div style="display:inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" name="city" data-toggle="dropdown">CITY
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>DELHI</li>
<li>MUMBAI</li>
<li>CHENNAI</li>
<li>KOLKATA</li>
</ul>
</div>
<input type="text" class="form-control" id="search" name="search" placeholder="Search"/>
<button class="btn btn-warning" id="serach_button"style="background-color:yellow !important;border-color:yellow !important; color:black !important;">Search</button>
</div>
</form>
</div>
This may help
If you want only in mobile/tablet mode.Remove col-md-12 col-lg-12
HTML
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CITY<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>DELHI</li>
<li>MUMBAI</li>
<li>CHENNAI</li>
<li>KOLKATA</li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search!</button>
</span>
</div>
</div>
</div>
Working demo
I have an inner navbar on page:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
Some left side content
</div>
<div class="col-sm-8">
Some right side content
<div class="navbar navbar-inverse">
<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="#">Sub Nav Bar</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn btn-default navbar-btn">Edit</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
However when I try and pull the button to the right with 'navbar-right' it pulls the button off of the navbar.
Am I doing this wrong?
plunk:
http://plnkr.co/edit/lk61BS5xH9csMhYBabAO?p=preview
I have a linear component I'm developing and I have pretty much all set, JSfifiddle:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filter <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<!--action="{{ url_for('search') }}" method="post">-->
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Now, what I want to achieve is to actually POST the "search" when I press on the Go! button. I have no experience in front-end, so I need your help with this one, I tried to add but that breaks the bootstrap awesome look.
TL;DR. how to make the Go! button post the text in the textbox.
You have to include a form element in your code.
<!--Search bar-->
<div class="row" style="margin-top:50px;">
<div class="col-md-6 col-md-offset-3">
<form class="navbar-form" method="post" action="{{ url_for('search') }}" role="search">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Filter
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</form>
</div>
</div>
Please find the update of your JSFiddle
I have two different forms on my navbar and would like to maximize the space being used. As you can see in this example - http://jsfiddle.net/zb4dc/6/, the search would ideally be taking up the remaining space. Is there anyway to make this work?
<body>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">My Account</li>
</ul>
<form class="navbar-form navbar-left searchArea" role="search">
<div class="form-group">
<input id="searchBar" class="form-control typeahead" type="text" placeholder="Search">
</div>
</form>
<form class="navbar-form navbar-right" role="tag">
<div class="form-group">
<input id="userTags" type="text" class="form-control" placeholder="Tags">
</div>
<button id="addTags" type="submit" class="btn btn-default">Add Tags</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
Try this..
http://www.bootply.com/119937
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-left navbar-nav">
<li class="active">My Account</li>
</ul>
<form class="navbar-form navbar-right" role="tag">
<div class="form-group">
<input id="userTags" type="text" class="form-control" placeholder="Tags">
</div>
<button id="addTags" type="submit" class="btn btn-default">Add Tags</button>
</form>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
Seems like the only way to get it to work is using "inline" and the input group.
I am trying to place a login form in a Bootstrap 3 navbar. I am trying to make the username and password input boxes into input groups. I know a similar question has been asked and answered here before, but none of the solutions work because I need two input groups in a single form.
This is what I have so far:
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button">
<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="/">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<form action="/login" class="navbar-form navbar-right" method="post" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input class="form-control" name="andrew_id" placeholder="Andrew ID" type="text" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control" name="secret" placeholder="Secret Words" type="password" />
</div>
</div>
<button class="btn btn-primary" type="submit">Log In</button>
</form>
</div>
</div>
</div>
Also in a JSFiddle: http://jsfiddle.net/x6hk4/
Pretty much the two inputs and the button should be right aligned and be inline with the rest of the navbar.
This needs some work still, but perhaps it will put you in the right direction:
http://jsfiddle.net/technotarek/5rGFX/
<div class="container">
<nav class="navbar navbar-inverse navbar-default">
<div class="col-sm-3">
<a class="navbar-brand">Brand</a>
</div>
<form class="navbar-form">
<div class="col-sm-3 col-sm-offset-2">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-1">
<button class="btn btn-primary btn-block" type="button">GO</button>
</div>
</form>
</nav>
</div>
It's loosely based off of my responses to Two rows in a navbar with a column spanning two rows