I have decided to have a 6/6 column grid layout with Bootstrap and my navbar does have a brand and login fields.
Unfortunately, I can't seem to align the submit button if I place a help-block on the password input: http://www.bootply.com/eJ7QMjincO
Here's the code:
<header class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-md-6">
<!-- Login -->
<form class="navbar-form navbar-input-group">
<div class="form-group">
<input type="text" class="form-control" placeholder="E-Mail">
<input id="password" type="password" class="form-control" placeholder="Password">
<span class="help-block text-right">Forgot password?</span>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</header>
Just add:
vertical-align: top;
To the button.
Example: http://www.bootply.com/WNCOewwnBs
You can write your HTML in much better way to provide flexibility between devices. Below is the simple example for that.
<form class="navbar-form navbar-input-group">
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder="E-Mail" type="text">
</div>
<div class="col-md-4">
<input id="password" class="form-control" placeholder="Password" type="password">
<label class="help-block text-right">Forgot password?</label>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
BootPly: http://www.bootply.com/kroJXdvceD
Related
I know I am doing this wrong but I have no idea how to fix it properly.
I have a sign up form that has a display: relative, on col-lg. But I did not know how to change a css based on a screen size. So I just duplicated the sign up form and gave it a different class name and changed the css accordingly.
Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
How can I fix this issue without having to duplicate the form? I would like to not use jquery or javascript, but if I have to I will.
.form-signup {
position: absolute;
bottom: 70px;
right: 0;
margin-right: 35px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- First form -->
<div class="col-xs-4 col-sm-4 col-md-4 pull-right form-signup hidden-md hidden-sm hidden-xs">
<form role="form">
<h2>
<div class="text-center lead p-color">Tagline</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="FN" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="LN" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="EM" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="PW" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6>terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
<!-- Second Form -->
<div class="row row-offset center-block">
<div class="col-md-12 text-center hidden-lg"><img src="images/landing-md-xs.png" class="img-responsive center-block" alt=" animation" style="height: auto; width: 500px;"/></div>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 hidden-lg">
<form role="form">
<h2>
<div class="text-center lead p-color">TAGLINE</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6> terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
</div>
col-lg-x is a bootstrap class that assigns your div grid size with the value of x. it's for large screen. but removing shouldn't drastically change the design like you have presented above. It's because you have mis-linked bootstrap css file. Also on the code above you have included jquery instead of bootstrap.
Edit : for Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
For this add other classes col-md-x, col-xs-x` on the div as according to your need of x value.
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
Here is the link to my Plunker: link
The goal is to align the Sample Parking Ticket link with the textbox.
Please note the leading label has no class like col-xs-1 or something.
How can I achieve that?
You can use a bootstrap horizontal form.
Here is a plunkr:
<h1>Citation Form</h1>
<form name="citationSearchForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="citationNumber" class="col-sm-3 control-label">Citation Number:</label>
<div class="col-sm-6">
<input type="text" name="citationNumber" class="form-control" id="citationNumber" placeholder="#" required="">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>Search</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-right">
<a id="lnkSample" href="#">Sample Parking Ticket</a>
</div>
</div>
</form>
I have some bootstrap 3.0 based markup that produces an inline form like this:
The code for this is:
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<input type="text" placeholder="Github username" class="form-control" id="gh_user">
</div>
<div class="form-group">
<div class="col-lg-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey">
</div>
</div>
<button type="submit" class="btn btn-success"> Save </button>
</form>
I am trying to increase the width of the second box (API Key) to be twice what it is now, but no matter what I change the width of the div holding the second input is changing the width. Can someone show me how this done?
when I manually set the width of the second INPUT, I get this:
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey" />
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
DEMO
PS : close input tags as <input class="" />
Final edit here, I guess external bootstrap 3.1.1 was not getting included thus you got the result in 3 different lines, take a look at this
Final Demo
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
</div>
You should be able to target your ID within your css and set your desired width like so:
#gh_apikey{width:400px;}
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...