I want to design bootstrap form menu, but if I used view on tablet, the menu is not responsive. Please check the attached pictures below:
My code:
<fieldset>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-12">
<div class="form-group input-group">
<!-- nested form-group acting like row -->
<div class="col-sm-2 ">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-6 -->
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-6 -->
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-4 -->
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-2 -->
<div class="col-sm-1">
<button type="submit" class="btn btn-danger btn-block">Add</button>
</div>
</div>
<!-- /nested form-group acting like row -->
</div>
<!-- /col-sm-offset-3 col-sm-9 -->
</div>
<!-- /form-group -->
</fieldset>
And, here is the link of jsfiddle
You can add col-xs-12 to each grid.
Check answer in JSFiddle: http://jsfiddle.net/1vjLcjow/1/
You are using
<div class="form-group">
<div class="col-sm-offset-0 col-sm-12">
<div class="form-group input-group">
<div class="col-sm-2 ">
By the last line your defining the Bootstrap cell on tablet-View
try to use
<div class="col-md-2 col-sm-12">
Now it will use the full parent size with the default bootstrap padding
Use Bootstrap Grid system
put your input elements inside Bootstrap Grid
if you want to learn about bootstrap grid
here is the link
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Just an example
try like this
1st use Bootstrap CDN bootstrap#4.0.0-beta (latest version )
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
you can learn it
https://getbootstrap.com/docs/4.0/components/forms/#form-controls
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Related
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
I'm trying to make a search bar for an ebay-type website, but for some reason, the submit button takes the column size of the previous asset, and also goes directly under this asset.
CODE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</body>
You forgot to close <select>. You can reduce border-radius of input to get it more closer like ebay.
.NoPadding{
padding:0 !important;
}
input,select{
border-radius:1px !important
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-3 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</select>
</div>
<!-- BUTTON -->
<div class="col-sm-2 frm-group ">
<input type="submit" class="form-control btn-primary">
</div>
</form>
</div>
</body>
You simply didn't close select and div.form-group
Also, I would suggest adding col-md-#, where # is a number.
See here for the closed tags: https://jsfiddle.net/8z7cL5x0/
Try wrapping your columns in a div with class "row":
<body>
<div class="container">
<div class = "row">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</div>
</body>
I'm using bootstrap from getbootstrap.com. I want to have a space between the SAVE and CLEAR button. I also want them to align center to be proportioned on the textboxes. How can I achieve that?
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
<input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
</form>
may be you are looking for this class="text-center" will do a trick, and some CSS for spacing
.btn-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group btn-block text-center">
<input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
<input type="reset" class="btn-default btn-lg btn-spacing col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
For the last form-group class rename it to form-group1 and in the CSS put this. .form-group {text-align:center;}. Also, if you want space between those two buttons, do this. .btn-primary btn-lg col-sm-4 {margin:10px;}
here is an example. jsFiddle
To add space between clear and submit button you can add below CSS.
.form-group .btn-primary {
margin-right:10px;
}
Hi Everyone I am having an issue where I have a Modal window that has two legend tags. The Line under the Legend tag goes outside the modal window.
When I use the same code outside of a modal window it looks fine. I am sure it is something simple that I just cannot see at this point.
This is just a test so the html is quite ugly..
I have created this jsfiddle! to demonstrate the issue
Here is the relevant code
<div class="container">
<!-- Email Row -->
<div class="form-group">
<fieldset>
<legend>Login Information</legend>
<div class="row">
<form class="form-inline" role="form">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Primary Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Secondary Email">
</div>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Primary Phone -->
<div class="form-group">
<fieldset>
<legend>Phone Details</legend>
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Primary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Secondary Phone -->
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Secondary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Container -->
You have a <div class="container"> in your modal to which bootstrap gives a responsive width which can be wider than the modal, depending on viewing size. If you remove either the container class or the div then your legend should act as expected. Please note that this will cause your "phone details" forms to wrap.
I'm trying to migrate my Bootstrap 2 form to Bootstrap 3.
My current code and fiddle: http://jsfiddle.net/mavent/Z4TRx/
.navbar-sam-main .navbar-toggle{
z-index:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br/><br/>
<div class="form-group">
<label for="name">My Label 2</label>
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
<div class="form-group">
<label for="email">My Label 3</label>
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">My Label 4</label>
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
</form>
</div>
</div>
I want inline behaviour, my label 2 will be next to text input, my label 3 will be next to text input. I also need horizontal behaviour, my label 4 will be on top of the textarea. My label 2's and my label 3's text box will be 4 column width, my label 4's width will be full width of the form.
How can I do this in Bootstrap 3 ?
Just because the docs suggest you should use the form controls does not mean you have to. You can just use the built-in grid system to achieve the layout. See http://bootply.com/82900 for a working example. Code below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<form role="form">
<div class="row">
<label class="col-xs-4" for="inputEmail1">Email</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="row">
<label class="col-xs-4" for="inputPassword1">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="row">
<label class="col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
Screenshot of above code rendered:
UPDATE: Just realized I dropped the label tags. Updated the answer, swapping <label> for <div>.
UPDATE: Updating code to reflect need to stay in this layout in small widths, as requested in comments below. See JS fiddle for a working example.
What you are looking for is not really in-line behaviour at all, just horizontal.
This code should help:
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br><br>
<div class="form-group">
<label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
<div class="col-lg-7 col-sm-7">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
<div class="col-lg-7 col-sm-7">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-3">My Label 4</label>
<div class="col-lg-10 col-sm-10">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
</form>
</div>
</div>
And looks like this:
The col-sm-* tags are optional - they just stop the elements from stacking as you size the window down.
You can try it out here: http://bootply.com/82889
I had the same problem, here is my solution:
<form method="post" class="col-md-12 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 try the code below
<div class="" id="myDialog1">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<div class="clearfix igr col-md-12">
<label>Please fill the form</label>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="name">My Label 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="email">My Label 3</label>
</div>
<div class="col-md-3">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-12">
<label for="message">My Label 4</label>
</div>
<div class="col-md-3">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
</div>
</div>
</form>
</div>
and use the styles as:
label,textarea{
margin:5px 0;
}
.igr{
margin:15px 0;
}
Adding the class control-label to your labels should do the trick for you.