I am still learning the proper use of Bootstrap 3 and was wondering if you all could help me out. I would like a layout something like this:
Label Label
Textbox Textbox
Label Label
Textbox Textbox
Label Label
Textbox Textbox Textarea
I know that if I use the .form-group it will allow me to accomplish the Label over the top of the textbox. How can I assure that this happens in a column yet allows for some inline things like the example with the two textboxes alongside each other?
As mentioned earlier, you can use the grid system to layout your inputs and labels anyway that you want. The trick is to remember that you can use rows within your columns to break them into twelfths as well.
The example below is one possible way to accomplish your goal and will put the two text boxes near Label3 on the same line when the screen is small or larger.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6">
<div class="row">
<label class="col-xs-12">Label3</label>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text"/>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
http://jsfiddle.net/m3u8bjv0/2/
You could use the bootstrap grid system :
<div class="col-md-6 form-group">
<label for="textbox1">Label1</label>
<input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
<label for="textbox2">Label2</label>
<input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">
http://getbootstrap.com/css/#grid
Is that what you want to achieve?
You can use the bootstrap grid system. as Yoann said
<div class="container">
<div class="row">
<form role="form">
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Name">
</div>
<div class="clearfix"></div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
</form>
<div class="clearfix">
</div>
</div>
</div>
Related
I am trying to get a description as to how to use the form directly next to the form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<h1 class="form-inline" style="text-align: center;">Tester</h1>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
Was hoping to be able to get the "tester" message to the right of the form.
How do I solve the problem?
You can use Bootstrap's grid layout system to manage the layout.
For example:
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col">
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
<h1 class="col" style="text-align: center;">Tester</h1>
</div>
</div>
</body>
</html>
This would create:
- A container to manage the layout
- A row to manage the form and the h1 as elements that should be positioned next to each other
- The form and the h1 each marked with the col class so that they are auto laid out. You can also use different classes like col-2 col-md-2 etc. to have more control over how many columns each control is allowed to use.
I want a form in Bootstrap that renders two text fields on the same line, with text following each input:
Label 1A Input 1A Text 1A Label 1B Input 1B Text 1B
Label 2A Input 2A Text 2A Label 2B Input 2B Text 2B
Basically, the two inputs on the same line are related, so I want them next to each other. I've sort of accomplished that using this markup:
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
Also see this fiddle. If you widen the HTML output you should see the effect I'm describing.
The problem with this is the form fields are not aligned, and the layout gets really screwy for small screen sizes.
First and foremost, I'd like the fields to all align nicely when viewed in a standard desktop browser. I've tried various classes with no success.
But if there's a better way to do this, I'd love to hear that too.
Thank you for any and all help!
If I understand what you want it will work.
Try this approach:
The idea is playing with the grid, dividing each row (using grid´s bootstrap) and inside of each row, dividing again as you need.
It should be enough, but if you have any problem, you can add pull-right and pull-left class where you need it. These classes set to left or right inside a column of grid´s bootstrap.
Besides, you can add this style or class for being secure you are not overlapping layers/div.
white-space : nowrap;
<form class="form-inline" role="form">
<div class="form-group col-lg-6 col-md-6 col-xs-6">
<div class="form-group col-lg-8 col-md-8 col-xs-8">
<label for="input1" class="control-label first-label pull-left">ABCDEFG</label>
<input type="text" name="input1" id="input1" class="pull-right"> units
</div>
<div class="form-group col-lg-4 col-md-4 col-xs-4">
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max" class="pull-right"> units
</div>
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-6 pull-right">
<!-- REPEAT THE SAME IDEA -->
</div>
</form>
With this code, you have one row with 2 parts with the same size. Inside the first part you have two part as well, one of them double than the other one. Inside of these part, you have a label at the left(pull-left) and it input at thee right(pull-right).
If you have any doubt, please let me know.
Cheers mate
<style>
label { width: 12%; }
</style>
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
To align them input boxes you need to set equal width on the labels. As the labels are inline element, while your labels got different texts their sizes will be different so the following boxes will be just right after it.
For the above example you can have this following
label{
width: 80px;
}
But the above css will widen the width of the text "units" to solve this you may update your markup a bit by assigning class to the not equal labels & then declaring width on them like the follwoing
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label first-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label first-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
And assigning width to the class
.first-label{
width: 80px;
}
There is one more solution without the markup change
.form-group label:first-of-type{
width: 80px;
}
Need to add a fixed width for your control-label
.control-label {
width: 15%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">Label 1A</label>
<input type="text" name="input1" id="input1">units
<label for="input1_max" class="control-label">Label 1B</label>
<input type="text" name="input1_max" id="input1_max">units
</div>
<div class="form-group">
<label for="input2" class="control-label">Label 2A</label>
<input type="text" name="input2" id="input2">units
<label for="input2_max" class="control-label">Label 2B</label>
<input type="text" name="input2_max" id="input2_max">units
</div>
</div>
</form>
try this code it may solve your problem.you need to define cols inside row .so in this i define 2 row and each of them have 4 column for mobile as well as desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="inline-form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input1" class="control-label">ABCDE35</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1" id="input1"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input1_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1_max" id="input1_max"> units
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input2" class="control-label">ABCD</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3" id="input3"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input3_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3_max" id="input3_max"> units
</div>
</div>
</div>
</form>
</body>
</html>
How to make responsive site in which labels in one div and corresponding text box in other. I have written a small piece of code.Its working(for md device) but when window size is resized its format is not correct(Both labels are clubbed together).How to correct this (for xs devices)? PFB the screenshot.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form role="form">
<div class="row">
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
You should put your labels inside each div containing the textarea tag.
<form role="form">
<div class="row">
<div class="col-md-4 col-xs-12">
<label for="TextArea1">Text Area</label>
<textarea class="form-control" id="TextArea1"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<label for="TextArea2">Text Area</label>
<textarea class="form-control" id="TextArea2"></textarea>
</div>
</div>
</form>
Test it here (slide JSFiddles vertical axis to simulate the environment size you need)
From official docs:
Use Bootstrap's predefined grid classes to align labels and groups of
form controls in a horizontal layout by adding .form-horizontal to the
form (which doesn't have to be a ). Doing so changes
.form-groups to behave as grid rows, so no need for .row.
So I tried:
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="col-md-2 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 form-control" placeholder="Unidad">
</div>
</form>
But it seems the form-control class will make them return to an own single row each.
This is what I got:
How can I achieve both input to be placed in same row?
Add form-inline to the form class. Note that, if you make the form too small, it will still 'spill over'. In this case, and if you don't want all form-groups to be inline, use separate divs for the spacing.
Form inline example:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal form-inline">
<div class="form-group">
<input type="text" class="col-md-2 col-xs-6 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 col-xs-6 form-control" placeholder="Unidad">
</div>
</form>
</div>
</div>
Separate Div example:
fiddle
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="col-md-2 col-xs-6">
<input type="text" class=" form-control" placeholder="Cantidad" />
</div>
<div class="col-md-6 col-xs-6">
<input type="text" class=" form-control" placeholder="Unidad" />
</div>
</div>
</div>
</form>
</div></div>
HTML
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="col-md-2 pull-left" placeholder="Cantidad">
<input type="text" class="col-md-6 pull-left" placeholder="Unidad">
</div>
</form>
jsfiddle
I'd like to make a bootstrap form that looks good on web and mobile. It seems like the straightforward markup doesn't work well. It's an angular app, but I don't think angular figures in...
One problem is if I try to contain several fields by a div in order to apply a background color, the fields aren't contained, spilling off the left side of the div.
Another problem, related I think, is that the fields appear on mobile with 0px left and right margins, which doesn't look too good.
Here's the markup:
in index .html:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
That angular view directive causes the form to be included as follows...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
And here's the bad result: see how fields spill off to the left?
On Web....
About what it looks like on mobile...
Try removing the <div class="row"> tags wrapped around your <div class="form-group"> tags. Both classes have negative left and right margins, which are being combined by the nested tags.
Example here.
Add a
<div class="col-md-12">
After your
<div class="row">
in the div containing the background-color:red;.
For example:
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
</div>
Compare your code with the correct code of bootstrap documentation
http://getbootstrap.com/css/#forms