<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
The two input fields do not align in the same line when i take the label off the second field how can this be corrected ?
Make the label as siblings of the form-group instead if you are planning to use only one label, and you can instead use <span> or any other element, because semantically speaking, <label> is not for this kind of naming, much like using <h1> in Contact Person instead of a <label> with style
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<label for="ex1">Name</label>
<div class="form-group row">
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
Swellar has a good solution in his answer. However, if you are looking for an alternative, you can put a dummy label element and then set its CSS property as visibility: hidden;. So, you don't have to take out your label element from second field, and this label will be hidden.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label for="ex1" style="visibility: hidden;">LName</label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<div class="col-xs-12"><h1>Contact Person</h1> </div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
</div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex2">Last Name</label>
<input class="form-control" id="ex2" placeholder="Last name" type="text">
</div>
</div>
</section>
You have to add a <label> to your last name field.
You should always include a label for better accessibility.
If you don't want to use a label (which is not recommended), you can use flex-box to align it to the bottom:
.form-group: {
align-items: flex-end;
display: flex;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- website templates CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- website templates fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1" style="margin-bottom:0">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label></label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</form>
</div>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- website template JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- custom date picker JavaScript -->
<script src="/js/myScript1.js"></script>
</html>
Related
I'm not really well-versed with HTML/Bootstrap and I need some help when it comes to my Contact Form.
I can't remove the excess padding in my form plus I wanted to make the submit button red and full-width. I'm also wondering, even if I decreased the width of the input, the "email" and "considering" can still be found below the name and phone.
Here is a fiddle that I did.
I'd appreciate the help.
<div class="col-md-3">
<div class="form-group">
<label for="form_lastname">Your Phone *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
Several things to note:
Rows in bootstrap have 12 columns, so if you want elements in your row to occupy the full width, their sizes should add up to 12. Your inputs were col-md-3, I made them col-md-6.
You can make your button full width by giving it the btn-block class. Because of what I mentioned before, giving it the col-md-20 class makes no sense, I made it col-md-12.
Buttons can be red by giving them the btn-danger class.
Containers in bootstrap will usually be as wide as possible by default. I gave your container the following property: max-width: 600px. Maybe a tidier approach would be to use media queries to give it different widths depending on the screen size, but that depends on what you're trying to do.
Here's the solution with these changes applied:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<html>
<head>
<title>Contact Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container" style="border-radius:5px;background-color:#f56b00;max-width: 600px">
<div class="row">
<div class="col-xl-8 offset-xl-2 py-5">
<h1>
<font color="#ffffff">Schedule a Call With Us Today</font>
</h1>
<p class="lead"></p>
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Your Name *</label>
<input id="form_name" type="text" name="name" class="form-control" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Your Phone *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Considering *</label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value="Request quotation">Buying</option>
<option value="Request order status">Selling</option>
<option value="Request copy of an invoice">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send btn-danger btn-block" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</body>
</html>
I think you should read the following:
Bootstrap buttons.
Bootrsrap grid.
If you want all fields in a row:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<html>
<head>
<title>Contact Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container" style="border-radius:5px;background-color:#f56b00;max-width: 600px">
<div class="row">
<div class="col-xl-8 offset-xl-2 py-5">
<h1>
<font color="#ffffff">Schedule a Call With Us Today</font>
</h1>
<p class="lead"></p>
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="form_name">Your Name *</label>
<input id="form_name" type="text" name="name" class="form-control" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="form_lastname">Your Phone *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="form_need">Considering *</label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value="Request quotation">Buying</option>
<option value="Request order status">Selling</option>
<option value="Request copy of an invoice">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send btn-danger btn-block" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</body>
</html>
I was fairly confused by what you wanted but I did what I understood from the question in this fiddle:
https://jsfiddle.net/h2yjfund/
Your input fields were stacked because you started a new row div. I put them all in the same row. I also edited the submit button like you asked and changed the header to center purely to make it all matched.
I'm not really sure what you meant by padding but if you mean the extra space between boxes, then you just need to adjust your margins for the element using margin:0px; or however many pixels you want.
style="margin:5px;"
I added all the styling as inline styling since you didn't provide a style sheet. Hope this helps. Let me know if you have a question.
I want to create a form that the textarea field is next to many inputs lines:
<form class="form-inline">
<table id="table_form">
<tbody>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</td>
</tr>
</tbody>
</table>
<div class="col-sm-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
But this code display the blocks one after the other and I want to display login, email and address on the same column and the textarea on another column.How to fix that?
Try this code, it will solve your problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
<div class="col-sm-8">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
Your textarea is already to the right of the other input fields. If you want it to become as wide as possible, use the class col-sm-8 for its container and give it width: 100%, like in my codepen :
https://codepen.io/anon/pen/jmZZQY
(It won't work well in a snippet, since it uses bootstrap, so please look at the codepen, where bootstrap is included)
I hope this works fine for you
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="row">
<div class="col-sm-4 col-md-4 col-xs-4">
<div class="form-group">
<input type="text" class="form-control" id="login" placeholder="Login" name="login">
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Email" name="email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Address" name="address">
</div>
</div>
<div class="col-sm-4 col-md-4 col-xs-4">
<textarea rows="3" class="form-control">
</textarea>
</div>
</form>
please follow the bootstrap inline form that is the good method to clear this issue...
http://getbootstrap.com/css/#forms-inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- 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">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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>
</body>
</html>
Please check it..
Do not use tables for positioning elements on the page! This is depricated. Use block-level elements instead. For example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" placeholder="login">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="comments">Comments</label>
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</div>
</form>
If you don't need labels, then use
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
<div class="col-xs-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
See Bootstrap documentation for details.
I just started with Bootstrap and having an issue with textarea HTML element - it doesn't follow left alignment with other text fields and goes across the entire page instead. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body name="viewport" content="width=device-width, initial-scale=1.0">
<div id="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name">
Name
</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" placeholder="Your name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">
E-mail
</label>
<div class="col-sm-4">
<input class="form-control" type="email" id="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="comment">
Message
</label>
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input class="btn btn-success" type="submit" value="Send" />
</div>
</div>
</form>
</div>
</body>
</html>
And the result looks like this below.
Textarea too wide and not aligning with other text elements above it
fix this:
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
to
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
You could add:
.cols-sm-4{
width: 33.33333333%;
margin-left: 15px;
display: inline-block;
}
My two column layout is stacking on top of each other instead of sitting side by side.
Can anyone help me out?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
</div>
<div class="row-fluid">
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
You have a bunch of unnecessary divs:
<body>
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</body>
Basically, anything that should be in a row needs to be within the same row or row-fluid container. This is covered in the documentation: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
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.