I have a extremely simple Bootstrap 3 horizontal form with a row with 3 columns
Column 1 is a label referencing column2
Column 2 is a input textbox
Column 3 is a descripting text
Column 1 is aligned vertically with column2 textbox but column3 appears to be upper than the other.
¿What i´m doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form class="form-horizontal" name="frmBuscar" id="frmBuscar" method="post">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">Campo 1:</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3 ">
Unidad 1
</div>
</div>
</form>
</body>
</html>
Change this
<div class="col-lg-3">
Unidad 1
</div>
TO
<div class="control-label col-lg-1">
Unidad 1
</div>
I don't think using columns is necessarily the best way to go with this; you could use display: flex on the .form-group container and just align everything to the end of the container; also you need to remove the margin for the label and there you go.
Also for some reason I was not able to get the look on your picture with just the HTML you provided, but I works almost the same way with the CSS I worte, second form is your markup
.form-group {
display: flex;
align-items: flex-end;
}
label {
margin-bottom: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="" name="frm" id="frm">
<div class="form-group">
<label class="" for="txt1">
Campo 1:
</label>
<div class="">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="">
Unidad 1
</div>
</div>
</form>
<form class="form-horizontal" name="frm" id="frm">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">
Campo 1:
</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3">
Unidad 1
</div>
</div>
</form>
Related
I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<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" />
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.
For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2
Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW
I am a bit new to angular and bootstrap so bear with me. I think form is only a part of bootstrap to make it easier.
I can't seem to align it well with the rest of my html. The form is at the bottom and the top of the form where it says Job Name is against the edge of the panel right above it. I want to space it more to look better. But padding/margin/css isn't working so IDK how to do it. Thanks!
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" ng-model="reviewCtrl.review.author" required />
<!-- $ referencing property on the form, valid comes with angular-->
<div> reviewForm is {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</div>
</form>
You'll need to post a minimal, complete, and verifiable example. Adding a margin-top or padding-top both work on the form element. It must be something else in your code that is causing this problem. Is the element above the form using the float property?
form {
margin-top: 25px;
padding-top: 25px;
// Both margin-top and padding-top work.
}
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" required/>
<div>Text</div>
<input type="submit" value="Submit" />
</div>
</form>
Add bootstrap panel element and don't forget to add container.You maybe forgot to add css class properly, unless it works fine with bootatraps current margins and paddings.
.form{
margin:10px;
}
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel panel-default">
<form class="form-horizontal form" name="jobForm" >
<div class="form-group">
<label class="control-label col-sm-2" for="jobName">Job Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >By:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div> reviewForm is {{reviewForm.$valid}}</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
You can use form class on form tag & add following CSS
form {
margin-top: 25px;
}
Hi below is the simplest solution, You have to put simple div element above the form with some height, now their is an empty div of height 50px above the form
<div style="height:50px;"></div>
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" ng-model="reviewCtrl.review.author" required />
<!-- $ referencing property on the form, valid comes with angular-->
<div> reviewForm is {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</div>
</form>
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>
Been trying for a few hours meow, (really need to get better at html) but all I want is essentially 3 inputs on a modal, with form-control would be nice cause I like the appearance but doesn't have to be at this point, on a bootstrap modal for payment.
Here is what I'm trying to get
I know right, you think I'd be able to get this
<div class="modal-body text-center form-horizontal" id="modal_body">
<form action="/made_payment" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-group">
<div class="col-xs-12">
<label>
<input class="form-control" type="text" size="20" data-stripe="number" placeholder="Card Number">
</label>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12" style="display: inline-flex;">
<data class="col-xs-6">
<input class="form-control" type="text" size="4" data-stripe="exp_month" placeholder="Exp (MM/YY)">
</data>
<data class="col-xs-6">
<input class="form-control" type="text" size="4" data-stripe="cvc" placeholder="CVC">
</data>
</div>
</div>
</div>
First your html structure need reorganising unless it was intentional. Based on this post - create a no-gutter class and apply to the row where you want to remove the spacing(gutter) between the columns - (I have replaced the data tags with divs for readability) :
.no-gutter {
margin-left: 0;
margin-right: 0;
}
.no-gutter > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="modal-body text-center form-horizontal" id="modal_body">
<form action="/made_payment" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="row">
<div class="form-group no-gutter col-xs-6">
<div class="col-xs-12">
<input class="form-control" type="text" data-stripe="number" placeholder="Card Number">
</div>
<div class="col-xs-6">
<input class="form-control" type="text" size="4" data-stripe="exp_month" placeholder="Exp (MM/YY)">
</div>
<div class="col-xs-6">
<input class="form-control" type="text" size="4" data-stripe="cvc" placeholder="CVC">
</div>
</div>
</div>
</form>
</div>
As for the rest of the styling that's up to your css and bootstrap check this out bootstrap input groups - Good luck
I've defined a number of Bootstrap elements and want to position each label and input set in a stacked layout. At the moment the layout positioning forces the label to be positioned left of the corresponding control when the browser in maximized.
In order to re-position to a stacked layout I tried placing the label inside the same div as the input. I also tried setting the col-xs-1 property on the parent div mentioned here or increasing the col size which only pushes the label right covering the input instead of on top.
So the layout at present looks like this where my label is left aligned to the input:
Instead I'm aiming to position like this:
The window does resize to stack the labels when I reduce the size of my browser window, but when it's maximized the labels appear alongside.
Question:
Can someone explain how to stack sets of label and input controls in Bootstrap 3?
Sample of my layout:
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-1 control-label" for=
"Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label" for=
"EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
The reason here is you have parent column of 12( col-lg-12 - right inside .form-horizontal) grid. Now the child columns you have is col-md-1 (for label) and col-md-4(for input). So they are suppose to be in same parent row having column size of 12(col-lg-12).
What you could do is as following:
Give the label column of 9 and input column of 4(as it is). So in sum it exceeds 12. Which forces input to bring down(stacked as you want).
But in giving label column of 9 your text would appear on right(far far away...), so don't forget to add CSS: text-align:left; to .control-label. Also this class .control-label must be selected by parent, so it won't effect any other similar class in your document.
UPDATE: Scenario -
Image 1:
Image 2:
Image 3:
.control-label { text-align: left !important; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class="form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-9 control-label" for="Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-9 control-label" for="EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
</div>
</div>
</div>
</div>
</form>
<!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
See the basic form on Bootstrap's website.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Just remove:
The div with class="form-horizontal" (and it's closing tag)
Then remove your col-md-4, col-md-9 class references for the label and input tags.
Revised code:
https://jsfiddle.net/4bnndd8b/3/
Edit: if you want your form only 4 cols at md and large adjust your : class="col-lg-12" reference... i.e. col-md-4 (md and larger will only be a 4 col form).
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="col-lg-12">
<div class="form-group">
<label class="control-label" for=
"Application">Application</label>
<div class="">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label" for=
"EscID">EM</label>
<div class="">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>