I wonder what is best approach to obtain date from date to layot.
So it should be something like:
float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2
I've build already(with blessing of bootstrap):
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="float-right">
<span>date from</span>
<input>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="float-left">
<span>date to</span>
<input>
</div>
</div>
</div>
and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:
label from
input
label to
input
If You already have this one. If you have any question regarding this. ask me in comment. If I have Make any mistake. Please comment below I will try my best to solve your problem. Good luck.
$(document).ready(function () {
$('.pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
.right{float:right !important;}
.col-sm-12{width:50% !important;}
#media only screen and (max-width:768px) {
.col-sm-12{width:100% !important;}
.right{float:none !important;}
input.pickyDate{width:100%;}
/*Usefull class*/
.topMar {
margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="right">
<span class="lable">date from</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
<div class="col-md-6 col-sm-12 topMar">
<span class="lable">date to</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
</div>
</body>
If I understand correctly, you shouldn't need to use floats at all. Bootstrap will automatically take care of the alignment of your <div>s. Just reverse the order of your two input fields; the first one will be on the left.
I found nice solution using botstrap css
<form class="form-inline text-center">
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Related
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'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
The following is the code for the form which I wrote:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
I am using bootstrap here. And I have the top paragraph heading with a class="bg-primary" which gives a nice background for the heading. I have two text input fields, a checkbox and a button. I want to align the text in the above paragraph with these fields.
https://imgur.com/XinA1kT
I want the Items text to be aligned in center with the first text field, Quantity with the second text field and the In kit with the check box.
As you can see in my code, I added span tags around the text. I experimented with it by adding margin properties to these span tags, but it didn't work properly. I tried a bunch of it works okay but I atleast need 15 to 20 of them which even didn't solve my problem.
Is there any alternative for this? I could even try other alternatives for the p tag too.
Thank you.
This can at least get you started, it's just rows and columns and some minor CSS. The problem you'll have is on a mobile device, if you want this to remain completely horizontal it'll start to break down.
.well-md.well-head {
background: #3973a6;
border: none;
color: #fff;
font-size: 18px;
height: 60px;
text-align: center;
}
.checkbox {
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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row well well-md well-head">
<div class="col-xs-4">
<p>Items</p>
</div>
<div class="col-xs-3">
<p>Quantity</p>
</div>
<div class="col-xs-3">
<p>In Kit</p>
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-kit" name="in-kit">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-primary" id="add-btn">Add</button>
</div>
</div>
</div>
</form>
</div>
You need to put your text descriptors into columns that match with the columns for you inputs. Like this:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
<div class="row">
<div class="form-group col-md-5"> Items</div>
<div class="form-group col-md-2">Quantity</div>
<div class="form-group col-md-2">In Kit</div>
</div>
</p>
<form>
<div class="form-group col-md-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-md-2">
<input type="checkbox" id="in-kit">
</div>
<div class="form-group col-md-2">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</div>
</form>
</div>