I am using Twitter Bootstrap 3.3.6. I am new to it. I have designed a form with following input fields.
<div class="form-group row">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
When I check above using Firefox responsive design mode for width less than 768 Second label "Address 2:" is wrapped to a new line but it shows some margin on left. I don't see any problem when I check inspect using firebug.
EDIT: Actually I want above 2 labels and inputs on same line for large screens but broken down to 2 lines for screens below 768px.
I have added col-xs-12 do the label and also 'text-center' class for better positioning on small, but this is up to you.
<div class="form-group row">
<label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
You don't need to put that input inside another div. Just put your input after label tag and use two different .form-groups for two inputs. Your code should be like this.
<div class="form-group">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<div class="form-group">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
If you need to make a inline form , add form-inline class to your <form> element.
<form class="form-inline">
Best Regards !
Related
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.
I'm new to Bootstrap, I'm creating a registration form with two input fields:
<div class="input-group">
<div class="form-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
class="form-control" id="user_password" name="user_password"
placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label">Show Password</label>
<div class="controls">
<input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
data-ng-click="switchPasswordType()">
</div>
</div>
However I don't know what css style I'm missing but the label and the input field appeas one below the other at the left of the grid-container, so no like usual form. I have tried to put both inside a "" with the style="display:inline-block" and still same problem.
Any ideas how to sove that?
Thank you for your time.
Found the solution, I just created a row with two columns inside one for the label and other for the input and it made the job.
<div class="row">
<div class="col-sm-6">
<label class="control-label" class="" for="user_email">Email</label>
</div>
<div class="col-sm-6">
<div class="controls">
<input type="email" auto-focus autofocus="true" data-ng-model="user.email"
id="user_email" name="user_email"
placeholder="Insert your email" required>
</div>
</div>
</div>
Okay. I'm trying to recreate this form in particular using as much default bootstrap styling as possible.
The problem I'm having is having the left and right sidelooking like this.
I'm using a Modal class for the dark background.
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="form-group col-lg-3">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div><br />
<div class="form-group>
<label for="form-elem-4"> Enquiry</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
</div>
</form>
</div>
</div>
I don't need much help on the color and those smaller things. just on how to position the Enquiry to the right and making it looks as close to the example as possible.
There isn't any css yet that affects much of the code above. And I'm failry new to the fomr function. How would I have the form actually work too.
Is this what you need, now you have add some your styles for button, and background
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="col-md-3" for="comment">Comment:</label>
<div class="col-md-9">
<textarea class="form-control" rows="13" id="comment"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9098/
Try to re-build that form using responsive Table. Set the table with two columns and get the required design without change in CSS.
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
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.
You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.
Example:
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
</div>
You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.
<div class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
To learn more click here