I am creating a form which is horizontal and want to put a full word in between the two columns as below. If I use another tag it creates too much padding on either side of this word, and if I just put in a label or a plain text character surrounded by no tags, it ruins the position of the domain box. How can I make this work without overwriting the styles in the bootstrap.css?
I would like the form to be completely horizontal.
<div class="row">
<label for="www" class="col-sm-1 control-label">
Label1
</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<!-- Word to go here-->
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>
</div>
Thanks in advance
You can try to follow bootstrap's 12 col grid system and specify one column col-sm-1 for the word, so that all columns add up to 12.
http://jsfiddle.net/bRh2z/show
http://jsfiddle.net/bRh2z/
<div class="row">
<label for="www" class="col-sm-1 control-label">Label1</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<div class="col-sm-1">woooord</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>
Related
I have a form that looks like this (on a big device, e.g. pc monitor)
that is as it should be. On smaller devices it however looks like this:
the button is no longer in the same line as the input. My code looks like this:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
How can I ensure that it also is aligned correctly when using smaller devices?
PS: Bootstrap is being used
Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.
<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="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-xs-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-xs-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
<a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
</div>
</div>
</div>
</div>
Have you tried stacking the bootstrap col classes?
The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.
You could also consider putting them in the same div.
Your code modified with stacked col classes:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10 col-sm-6">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2 col-sm-6">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
I'm trying to create a form that will appear in a modal window and I have the form looking exactly what I want. Here's my HTML (only showing the first row because I believe the right solution will apply to all my rows)
<div class="container">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-8">
<form action="#" method="post">
<fieldset>
<legend style="width: 80%">Base Information</legend>
<div class='row'>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-2"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
The problem I'm facing is that I'm currently viewing this using Chrome and when I horizontally resize the browser window to less than 760 pixels, all the form elements are stacked on top of each other.
As you can see there's a lot of spacing to the right I'm trying to get rid of.
Does anyone have any suggestions on how I can eliminate the padding on the right?
col-xs instead of col-sm would help with the breakpoint issue. You also seem to have empty space on the right because you specified two columns of empty space <div class="col-sm-2"> </div>. Bootstrap's grid system is based uon 12 columns per row, so the two column spanning div would be occuping space.
Bootstrap suggests 12 columns. Your layout uses only 9 of them:
<div class="col-sm-1"> </div>
<div class="col-sm-8">
...
</div>
You can use col-sm-10 col-sm-offset-1 instead of col-sm-8, <div class="col-sm-1"> </div> and <div class="col-sm-2"> </div> (offsetting columns):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form action="#" method="post">
<fieldset>
<legend>Base Information</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
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>
Is there a way of making an input text box small (say, col-sm-1) but keep it's label as "full length" ?
All the examples I see on SO show to wrap the label and input with a div like this:
<div class="form-group row">
<div class="col-xs-2">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
<input type="text" class="form-control"/>
</div>
</div>
Which is fine, but then the label is also wrapped in this div:
If I take the label out of the div:
<div class="form-group row">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
<div class="col-xs-2">
<input type="text" class="form-control" />
</div>
</div>
The label is fine, but aligned to the right of the input!
I've created a fiddle to show what I mean:
http://jsfiddle.net/alexjamesbrown/42j2rz32/
How about using separate rows for the input and the label:
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control"/>
</div>
</div>
</div>
here's a bootply: http://www.bootply.com/EcQtj8LqFy
try:
<div class="form-group row">
<div class="col-xs-6">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
</div>
<div class="col-xs-2">
<input type="text" class="form-control"/>
</div>
</div>
You can just add separate them into different rows.
<div class="row">
<div class="col-xs-12">
<label for="code">
Short field but i have a reeally long title that I want on one line
</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" />
</div>
</div>