When making nested columns with bootstrap in asp.net using webforms, how would you span the entire child?
Example:
<div class="row">
<div class="col-md-3">
<div class="row">Stuff</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
stuff
</div>
<div class="col-md-6">
stuff
</div>
</div>
<div class="row">
<div class="col-md-12">
stuff
</div>
</div>
</div>
</div>
Here is my exact code:
<div class="row" style="margin-top: 5px">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="">Destination City:</span>
<input type="text" class="form-control" id="DestinationCity" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="">ETA:</span>
<input type="text" class="form-control" id="ETA2" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row" style="margin-top: 5px">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon" id="">B/L#:</span>
<input type="text" class="form-control" id="BL" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
</div>
I am trying to make 2 columns of 6 with a column of 12 underneath it. The second column will not span the entire length of the two 6s.
I think I am missing something fundamental about Bootstrap3's gridding system.
Link to image:
https://sutong-my.sharepoint.com/personal/joseph_sutongctr_com/_layouts/15/guestaccess.aspx?docid=1070ed3a0aabe43739b7cdda19e136793&authkey=AZFGucSF7ReMr4cvabz6fDQ
You HTML work perfectly as to what you wanted... 2 column followed by 1 columns spanning the entire page. You need to check if another div is wrapping it causing it to behave differently. Try to comment your start and ending div, you'd be surprised how many of us get confused.
Problem turned out to be a limit Visual Studio puts in Site.css
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
Answer found in Stack Question
Related
I am using bootstrop to draw my page, The code is below.
<div class="row">
<div class="col-lg-6">
Test
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
I am curious why the input box can not fill all of the 'col-lg-6' but just a little short.
Here is the fiddle portal.
Thanks a lot!
The issue is that your col-lg-6 class is applied to the outer <div> rather than the inside one.
Try this:
<div class="row">
<div class="col-lg-6">
Test
</div>
<div>
<div class="input-group; col-lg-6">
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
Bootply results here.
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 using Bootstrap to try and place 2 textboxes next to a label, all on a single row, however, I can't seem to get everything to line up properly.
I'm working on trying to get the "Domestic" row working first. The other rows look exactly how I want them to look, but that's only because I cheated and added a style of "width: 49%" to them. Doing this, however, breaks the fully responsive nature of the textboxes, which I want to keep.
You'll notice that for the "Domestic" row, that the label doesn't line up with the rows below it, and neither do either of the textboxes. This is my code for the "Domestic" row -
<div class="row">
<div class="form-horizontal">
<div class="form-group col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
<label class="control-label">Domestic</label>
</div>
<div class="col-md-4 col-xs-12">
<input id="percentage" class="form-control" type="text" placeholder="Percentage">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
<div class="col-md-4 col-xs-12">
<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
</div>
</div>
Things go even more pear shaped when I run validation on the form and start displaying those input-group-addons -
All I'm essentially trying to do is split the row into thirds, 1 third for the label, 1 third for the first textbox and 1 third for the second textbox (and then, if that works, hopefully I can get it working for 1 row per control on xs displays).
Any ideas?
Edit: As requested, here is my code for the "Amex" row -
<div class="row">
<div class="form-group col-md-12 col-xs-12">
<label class="col-md-4 col-xs-12 control-label">Amex</label>
<div class="input-group col-md-8 col-xs-12 form-inline">
<div class="input-group" style="width: 49%;">
<input id="amexPercentage" class="form-control" type="text" placeholder="Percentage">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
<div class="input-group" style="width: 49%;">
<input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
</div>
</div>
The form you're creating is tricky. There's no examples in the documentation of a .form-horizontal with nested columns inside the widest column. You were missing the correct html for the input-group too. Since there is a lot of wrappers, it's good to indent your code and comment it.
What you need to do is use grid system inside the widest column and since you want two 50% columns, you would use just a .col-X-6 at the breakpoint you desire. In this case you want the columns side by side at the col-md min-width, which is 992px.
Also, often times the col-X-12 class is not necessary. An element will be 100% width below the last column class used. An element with .col-md-4 will be 100% under that, you don't have to tell it to be 100% by adding an extra and unecessary class col-sm-12 or col-xs-12
Demo: https://jsbin.com/yojoci
CSS
This adds some vertical space when the form stacks at below the min-width class choice.
#media (max-width:991px) {
.form-horizontal.custom-form .form-group .row [class*=col-]:first-child {
margin-bottom: 5px
}
}
HTML
<div class="container">
<form class="form-horizontal custom-form" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Domestic</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text One">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Two">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
<div class="form-group">
<label class="col-sm-2 control-label">Amex</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Three">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Four">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
<div class="form-group">
<label class="col-sm-2 control-label">Premium</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Five">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Six">
<span class="input-group-addon">#</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
</form>
</div>
<!--/.container (DON'T NEST) -->
Instead of trying to hack the three column layout together, I would use a framework already built to handle it. I recommend Toast by Dan Eden: https://github.com/daneden/Toast.
It will help you create a three column layout that's responsive and doesn't break.
As he said in the docs, link this in your head:
<link rel="stylesheet" href="css/toast/grid.css">
Then create your layout with the following format:
<div class="container">
<div class="grid">
<div class="grid__col grid__col--1-of-4">
</div>
<div class="grid__col grid__col--3-of-4">
</div>
<div class="grid__col grid__col--6-of-12">
</div>
</div>
</div>
There are more specific instructions in his description.
Make sure you close your input tags correctly. Currently you are missing the closing tag />. Please also post your html for the next two rows as well.
<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)" />
I have the following code, meant to vertically align a button in my Bootstrap form section:
HTML:
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label for="isbn">ISBN# (10 or 13)</label>
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
CSS:
.form-isbn {
display: table-cell;
vertical-align: bottom;
float: none;
}
For some reason, it's still not working as it should. Screenshot attached shows what is happening (seems that vertical alignment is...top by default? I need the button to sit at the bottom of the row to properly align with the input field that it's next to.
Any idea what the issue might be? I'm sort of dumbfounded, and I have looked at a couple similar questions here on SO, to no avail. :(
Try this one.
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
Hope this help.
*Try to disable the css you made for the .form-isbn
I came across this recently and wanted to achieve the same. One way to achieve with pure bootstrap classes is to push the input and button to a separate row and remove the bottom margin in the first row to bring the label as close to the input as before
<div class="form-group">
<div class="row">
<div class="col-md-9 mb-0">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button">Check ISBN</button>
</div>
</div>
</div>
I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
But this always pushes to the second input below the first.
<div class="row">
<div class="col-md-2 input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
<div class="col-md-2 col-md-offset-2 input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
Any clues?
As in given HTML there is no <form> element.
here is the
Demo using .controls-row and .control-group
<div class="container">
<div class="controls-row row">
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
You should use the "form-inline" Bootstrap class to achieve this:
<form class="form-inline">
<div class="form-group">
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group" style="width: 250px;">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
Take a look at it HERE
I think you've asked a sort of loaded question, but I'll do my best to help.
After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-x class. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2 might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.
All that said, I've got this fiddle that should help you.
HTML
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
</form>
</div>
http://jsfiddle.net/5webN/