When I make the screen smaller, the content of the box pushes the submit button out.
Do I need a media query to solve this? If so, what do I need?
I've included the code to have a look at. I have had a go at some media queries but I am probably doing the wrong thing as I can't work out what it is that needs to happen when the screen size is changed. Most notably, going smaller.
TIA
#register {
height: 95%;
padding: 2rem 1rem;
}
p {
text-align: left !important;
}
.jumbotron1 {
background-color: #e9ecef
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron1 jumbotron-fluid" id="register">
<div class="container1">
<h1 class="display-4">Register your interest!</h1>
<p class="lead">Don't miss out - register now! </p>
<form>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstname">First name</label>
<input type="text" class="form-control" id="firstname" placeholder="Enter first name">
</div>
<div class="col">
<label for="lastname">Last name</label>
<input type="text" class="form-control" id="lastname" placeholder="Enter last name">
</div>
</div>
<br>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<h4>Which product are you interested in?</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Shave butter</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Shave foam</label>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">Shave gel</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">After care shave</label>
</div>
<br>
<br>
<div> <button type="submit" class="btn btn-primary">Submit</button></div>
The issue is this rule:
#register {
height: 95%;
…
}
If you remove it, the button no longer breaks out of the container.
https://jsfiddle.net/w0bekp8q/
<form class="form" role="form" method="post" action="">
<div class="form-group">
<div class="col-md-4">
<label for="reportee_first_name" class="control-label">First Name</label>
<input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_middle_name" class="control-label">Middle Name</label>
<input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_last_name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_address_1" class="control-label">Address</label>
<input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value="">
</div>
<div class="col-md-6">
<label for="reportee_address_2" class="control-label">Address 2</label>
<input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_city" class="control-label">City</label>
<input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value="">
</div>
<div class="col-md-6">
<label for="reportee_zip" class="control-label">Zip</label>
<input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_phone" class="control-label">Phone</label>
<input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_email" class="control-label">Email Address</label>
<input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button>
</div>
</div>
</form>
In my above JSFIDDLE, if you drag it out, you can see that my submit button butts up against the Email Address Input Box.
This is how it looks on my dev site -
What am I missing here that causes my submit button to not have space between it and the input?
just change the form class to form-horizontal:
<form class="form" role="form" method="post" action="">
to
<form class="form-horizontal" role="form" method="post" action="">
EDIT:
when you use form class all col-md-* classes you used inside form-group will get a float: left; in large screens which causes the form-group doesn't take it's children height. so it goes to top of the root element, so the margin-bottom of the form-group will not apply exactly on above of your button and instead on top of the root element. using form-horizontal prevents that behaviour.
I don't know why but your .form-group is losing it's height from bootstraps md view port width and large. There is a few things you can do. You can apply you margin-bottom to the inner div, with the col-md-12, instead of .form-group.
.col-md-12 {
margin-bottom: 15px;
}
You can also try using col-xs-12, instead of md. Then you have consistent styles and can add the needed margins without any #media.
<div class="form-group">
<div class="col-xs-12">
.....
</div>
</div>
Edit: Adam pointed out the redundant bootstrap classes.
Newbie Coder here. I'm trying to build a simple form (first, last, email, country), and I have labels corresponding to each. Positioning wise, I want to have the labels ABOVE each input. However, what I'm having some issues with is putting the first and last inputs next to each other (positioned horizontally) while keeping the labels above.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
and the CSS
.firstlast div {
float: left;
clear: none;
display:inline;
}
I can use a linebreak to position the first over the input, but the linebreak still applies to the second label and form.
Any ideas on this?
Thanks!
Try This:
<form name="" method="post">
<div style="float:left;margin-right:20px;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<div style="float:left;">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</form>
And CSS:
input, label {
display:block;
}
You'll need to nest them in their own containers and float them. Or just do the one.
<div id="firstlast" class="grid_8">
<div style="float:left;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
You define .firstlast Class in css . But you used ID in your html code why
-----------------------------------------------------
Now you can try this
Define your label display block in css as like this
label{
display:block;
magin-top:20px;
}
Demo
============================
Try Second Method is this
HTML Code
<div id="firstlast">
<div class="grid_8">
<div class="control-group">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
</div>
<div class="grid_8">
<div class="control-group">
<label for="first">email</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">country</label>
<input type="text" name="last" id="last">
</div>
</div>
</div>
Css
.grid_8{overflow:hidden;margin-top:20px;}
.control-group{
float:left;
width:50%;
}
.control-group label{
display:block;
}
Demo
If i understand your question, you want first label and input field in horizontal and for rest you want label text just above the input field.
Here is the css code should like..
input[type="text"]{
padding:10px;
}
label{vertical-align:top;
padding:10px 0;
display:block;
}
#firstlast {
width:250px;
}
label:first-child, input:first-child{ display:inline; padding:0 5px 0 0;}
HTML should like this.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">e-mail</label>
<input type="text" name="email" id="email">
</div>
And here is the working Demo.
http://jsbin.com/nugucelu/1/edit
I want a form to have three controls in each row. But the width of the control in every row is different(less to be exact). Must I always use columns? Is that regular behaviour of css? Sometimes the css feels like a labyrinth to me
Here's what I have so far:
bootply
<form action="" method="post" role="form" class="form-inline">
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_firstname">First Name</label>
<input type="text" name="firstname" class="form-control" id="id_firstname">
</div>
<div class="form-group">
<label for="id_middlename">Middle Name</label>
<input type="text" name="middlename" class="form-control" id="id_middlename">
</div>
<div class="form-group">
<label for="id_lastname">Last Name</label>
<input type="text" name="lastname" class="form-control" id="id_lastname">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_address">Address</label>
<input type="text" name="address" class="form-control" id="id_address">
</div>
<div class="form-group">
<label for="id_postalcode">Postal Code</label>
<input type="text" name="postalcode" class="form-control" id="id_postalcode">
</div>
<div class="form-group">
<label for="id_city">City</label>
<input type="text" name="city" class="form-control" id="id_city">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_telephone">PHone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
<div class="form-group">
<label for="id_mobile">Mobile</label>
<input type="text" name="mobile" class="form-control" id="id_mobile">
</div>
<div class="form-group">
<label for="id_email">E-mail</label>
<input type="text" name="email" class="form-control" id="id_email">
</div>
</div>
</div>
</form>
Sorry thought you only wanted the link. I also wrapped every .form-group with .col-md-4 but still the width of the inputs differ from each other
From Bootstrap Documentation on Inline Forms
Requires custom widths: Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Just apply the following css if you want all the inputs to be the same size
.form-group {
width: 300px;
}
.form-group input {
width: 300px;
}
bootply with css
OR fix the width of each of your form groups by adding col-md-4 class to each group like this:
<div class="form-group col-md-4">
<label for="id_telephone">Phone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
bootply with classes
I would like to have the labels not above the input field, but on the left side.
<form method="post" action="" role="form" class="form-inline">
<div class="form-group">
<label for="rg-from">Ab: </label>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<div class="form-group">
<label for="rg-to">Bis: </label>
<input type="text" id="rg-to" name="rg-to" value="" class="form-control">
</div>
<div class="form-group">
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</div>
</form>
This code gives me:
I would like to have:
You can use form-inline class for each form-group :)
<form>
<div class="form-group form-inline">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
Put the <label> outside the form-group:
<form class="form-inline">
<label for="rg-from">Ab: </label>
<div class="form-group">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<!-- rest of form -->
</form>
The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled "Requires custom widths", which states:
Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within.
If you use your browser and Firebug or Chrome tools to suppress or reduce the "width" style, you should see things line up they way you want. Clearly you can then create the appropriate CSS to fix the issue.
However, I find it odd that I need to do this at all. I couldn't help but feel this manipulation was both annoying and in the long term, error prone. Ultimately, I used a dummy class and some JS to globally shim all my inline inputs. It was small number of cases, so not much of a concern.
Nonetheless, I too would love to hear from someone who has the "right" solution, and could eliminate my shim/hack.
Hope this helps, and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern.
You can create such form where label and form control are side using two method -
1. Inline form layout
<form class="form-inline" role="form">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</form>
2. Horizontal Form Layout
<form class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-3">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-3">Password</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
You can check out this page for more information and live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Like this
DEMO
HTML
<div class="row">
<form class="form-inline">
<fieldset>
<label class="control-label"><strong>AB :</strong></label>
<input type="text" class="input-mini" >
<label class="control-label"><strong>BIS:</strong></label>
<input type="text" class="input-mini" >
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</fieldset>
</form>
</div>
I had the same problem, here is my solution:
<form method="post" class="form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="your.email#example.com"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
You can see from the existing answers that Bootstrap's terminology is confusing. If you look at the bootstrap documentation, you see that the class form-horizontal is actually for a form with fields below each other, i.e. what most people would think of as a vertical form. The correct class for a form going across the page is form-inline. They probably introduced the term inline because they had already misused the term horizontal.
You see from some of the answers here that some people are using both of these classes in one form! Others think that they need form-horizontal when they actually want form-inline.
I suggest to do it exactly as described in the Bootstrap documentation:
<form class="form-inline">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
</div>
</form>
Which produces:
You must float left all elements like so:
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
give some margin to the desired elements :
.form-group { margin-right:5px }
and set the label the same line height as the height of the fields:
.form-group label { line-height:--px; }
I think this is what you want, from the bootstrap documentation "Horizontal form
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row". So:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/
You can use a span tag inside the label
<div class="form-group">
<label for="rg-from">
<span>Ab:</span>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</label>
</div>
I managed to fix my issue with. Seems to work fine and means I dont have to add widths to all my inputs manually.
.form-inline .form-group input {
width: auto;
}
I am sure you would've already found your answer... here is the solution I derived at.
That's my CSS.
.field, .actions {
margin-bottom: 15px;
}
.field label {
float: left;
width: 30%;
text-align: right;
padding-right: 10px;
margin: 5px 0px 5px 0px;
}
.field input {
width: 70%;
margin: 0px;
}
And my HTML...
<h1>New customer</h1>
<div class="container form-center">
<form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
<div style="margin:0;padding:0;display:inline"></div>
<div class="field">
<label for="customer_first_name">First name</label>
<input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
</div>
<div class="field">
<label for="customer_last_name">Last name</label>
<input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
</div>
<div class="field">
<label for="customer_addr1">Addr1</label>
<input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
</div>
<div class="field">
<label for="customer_addr2">Addr2</label>
<input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
</div>
<div class="field">
<label for="customer_city">City</label>
<input class="form-control" id="customer_city" name="customer[city]" type="text" />
</div>
<div class="field">
<label for="customer_pincode">Pincode</label>
<input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
</div>
<div class="field">
<label for="customer_homephone">Homephone</label>
<input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
</div>
<div class="field">
<label for="customer_mobile">Mobile</label>
<input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
</div>
<div class="actions">
<input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
</div>
</form>
</div>
You can see the working example here... http://jsfiddle.net/s6Ujm/
PS: I am a beginner too, pro designers... feel free share your reviews.
No CSS required. This should look fine on your page. You can set col-md-* as per your needs
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<div class="col">
<div class="form-group">
<label for="inputEmail" class="col-sm-3">Email</label>
<input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputPassword" class="col-sm-3">Email</label>
<input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
</div>
</div>
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</form>
</div>
</div>
<div class="control-group">
<label class="control-label" for="firstname">First Name</label>
<div class="controls">
<input type="text" id="firstname" name="firstname"/>
</div>
</div>
Also we can use it Simply as
<label>First name:
<input type="text" id="firstname" name="firstname"/>
</label>
It seems adding style="width:inherit;" to the inputs works fine.
jsfiddle demo