I'm relatively new to having to actually style web pages and I'm having an issue with using Bootstrap. As shown in the bootply below, a simple page, using bootstrap columns and some custom styling, causes the labels to overlap the textboxes when the page is resized - for example, try narrowing the width of the page. What am I missing that is causing this behaviour?
http://www.bootply.com/ttuZZWim70
Thanks!
If you're attempting to create a horizontal form, you will want to add the appropriate Bootstrap horizontal form classes. Examples can be found at Horizontal Form. You would want to structure your html similar to the following with form-horizontal class on the form element and each group of labels/inputs with form-group. You can adjust the col-sm-* as necessary to organize your layout. It's best practice to try to get your column definitions col-*-* to add up to 12. Two get two form-group to display on a single row, you can utilize something like col-md-6 wrapped around each form-group.
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Test">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Test">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is a jsfiddle showing an example. You will need to extend the results window to be able to see the elements side by side. The horizontal form elements take up quite a bit of room so I might recommend giving each their own separate line similar to example on bootstrap.
Let me know if that helps.
Thanks!
You can try with the below link.
fiddle
<form class="well span12">
<div class="row">
<div class="span6">
<label>Long name test 1</label>
<input type="text" class="span6">
<label>Long name test 3</label>
<input type="text" class="span6">
</div>
<div class="span6">
<label>Long name test 2</label>
<input type="text" class="span6">
<label>Long name test 4</label>
<input type="text" class="span6">
</div>
</div>
</form>
Copy this and paste in your code Dam sure it will work.
<div class="form-group field">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address">
</div>
Related
I am using Bootstrap v4.0.0-alpha.6. The textbox that is supposed to look like the this doesn't appear the same when I tried to place one in my login form. This is how it looks like in chrome. Refer the code below:
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>
</div>
</div>
Also there is another issue, the above code is supposed to place the label and textbox on same line but the textbox is placed below the label. I can't find any solution for this on the web.
I'm using bootstrap now for my design, earlier I used table, tr and td and it worked fine. But now, the design gets changed and I want to see both elements in a single row.
Here is my code
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
jsfiddle is here
https://jsfiddle.net/Z4ntn/438/
On top of it I would like to build similar kind in another rows.
Plz let me know what went wrong and what needs to be updated to see both in a single row.
Bootstrap says form-inline for elements in same line
like this
<div class="row">
<div class="col-xs-6">
<div class="form-inline">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control"/>
</div>
</div>
</div>
EDIT
Bootply:
Form-inline
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>
I'm trying to create a search form using Bootstrap and it's all fine but I need two of the multi-option to sit next to each other and collectively take up 100% width of their containing DIV.
The orange is obviously only there to highlight what I'm trying to do.
You want to put those inputs into a row, then each input div take up half of the container div using col-*-6 (12 is the maximum set by the grid layout). That is what I did in the follow example:
Code
<div class="container">
<div class="form-group">
<label label-default="" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="row">
<div class="form-group col-lg-6">
<label label-default="" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group col-lg-6">
<label label-default="" for="username">username</label>
<input type="username" class="form-control" id="username"
placeholder="username">
</div>
</div>
<div class="form-group">
<label label-default="" 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>
I will add my bootply when it actually saves... but you can copy and paste it into a bootply for now to see demo.
Output
using this as a reference, you will want to put your controls into a row with the class markup for grid spans
<div class="row">
<div class="col-xs-6">
your control here with style for 100% width
</div>
<div class="col-xs-6">
your control here with style for 100% width
</div>
</div>
I am using the Grid layout in Bootstrap.
How do I make a particular control(say text area) span for 3 rows in this grid design?
Is it possible with Grid layout?
You essentially want to use a nested grid or a form group.
First, split the page into two columns, the left with more than one row and the right with only one row. In the provided example, I demonstrate how you could use a form group in the left column to get the labels/inputs exactly as in your diagram.
<div class="row">
<!-- Left Column -->
<div class="col-sm-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Input 1</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 2</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 3</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
<!-- Right Column -->
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
See this working Plnkr example
Note that the plnkr needs to be wide enough to not apply the responsive layout and stack
If instead you wanted to use a nested grid to get the same effect, you would just define a new grid with rows/columns inside the left column.
I did not test this, but try something like this:
<div class="row">
<div class="col-md-9">
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
</div>
<div class="col-md-3">.col-md-3</div>
</div>
This uses the nested columns, like #user3711852 suggested.