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>
Related
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.
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
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
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;}
I have a fairly simple large input along with a submit box using the bootstrap3 framework, which is displaying perfectly on desktop/tablet resolutions, but viewed under a mobile viewport the submit button slides under the input box, and it looks rather ugly.
How do I either shrink the input/submit buttons to resize appropriately so they don't tile on top of each other, or alternatively if that's not possible have the submit button center align on mobile screensize only?
<div class="col-md-8 col-md-offset-4">
<div class="input-group input-group-lg">
<form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar">
<div class="form-group">
<input type="text" class="form-control" id="focusedInput" autocomplete="off" maxlength="17" placeholder="Enter number" name="number">
</div>
<button type="submit" class="btn btn-primary submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
</form>
</div>
</div>
Fiddle is here - http://jsfiddle.net/uradA/3/
Do something like this as taken from Button addons:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control big">
<span class="input-group-btn">
<button class="btn btn-primary big" type="button">Submit</button>
</span>
</div>
</div>
Where big is:
.big {
font-size: 30px;
height: 80px;
}
Here is the updated example: jsfiddle.net/uradA
try this
<div class="col-md-8 col-md-offset-4">
<div class="input-group input-group-lg">
<form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar">
<div class="col-xs-12 col-sm-8 form-group">
<input type="text" class="form-control" id="focusedInput" style="width:100%" autocomplete="off" maxlength="17" placeholder="Enter number" name="number"/>
</div>
<div class="col-xs-12 col-sm-4 form-group">
<button type="submit" class="btn btn-primary btn-block submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
</div>
</form>
</div>
</div>