Bootstrap 3 login form with 2 input-groups in navbar - twitter-bootstrap-3

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

Related

how to use input-group-btn in materialize css framework

I want to put + and - buttons inside input box but bootstraps input-group-btn property is not working in materialize CSS framework
<div class="row marg">
<h6 class="small">Selling Quantity</h6>
<div class="input-field input-group col s12">
<span class="suffix btn-number" data-type="minus" data-field="num">
<a class="waves-effect waves-light ">
<i class="material-icons grey-text text-darken-1 left">remove</i>
</a>
</span>
<input type="text" name="num" class="form-control input-number" value="">
<span class="suffix btn-number" data-type="plus" data-field="num">
<a class=" waves-effect waves-light "><i class="material-icons grey-text text-darken-1 left">add</i></a>
</span>
</div>
</div>
There is no class like "input-group" in Materialize.
Bootstrap and Materialize differ in class names.
Check their Forms.html - http://materializecss.com/forms.html
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>

Login modal and dropdown menu don't work

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.

want to fix all dropdown, text-field and button in one line(mobile/tablet mode)

<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

Modal dialog with a horizontal form, side by side groups

I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.

Twitter BS3 Maximum Space NavBar

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.