I have a form that I created using Bootstrap form generator. This form is currently responsive which makes the form elements spread out throughout the browser and looks as follows.
What I would like the form to look like is something as follows though the browser size is in full screen
The View in Context
<head>
<title>Registration Form</title>
<script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></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>
</head>
<body>
<?php
echo "<div class='error_msg'>";
echo validation_errors();
echo "</div>";
echo form_open('userAuthenticationController/new_user_registration');
?>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Registration Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="phoneNumber">Contact Number</label>
<div class="col-md-4">
<input id="phoneNumber" name="phoneNumber" type="text" placeholder="Enter your Contact Number" class="form-control input-md" required="">
<span class="help-block">In the format of (0*********) E.g. 0771524376</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter a username " class="form-control input-md" required="">
<span class="help-block">Should contain at least 6 characters</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Enter a Password" class="form-control input-md" required="">
<span class="help-block">Minimum 5 characters</span>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="userType">User Type</label>
<div class="col-md-4">
<select id="userType" name="userType" class="form-control">
<option value="Student">Student</option>
<option value="Industry Rep">Industry Rep</option>
<option value="Academic Staff">Academic Staff</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="identification">Identification</label>
<div class="col-md-4">
<input id="identification" name="identification" type="text" placeholder="Enter an identification" class="form-control input-md" required="">
<span class="help-block">Sliit ID Number(If Student)/ Sliit email( If Academic Staff Memeber)<br> Leave this field blank if you're neither</span>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-info" type="submit">Register</button>
<button id="login" name="login" class="btn btn-info" type="button" onclick="<?php echo base_url() ?>index.php/userAuthenticationController/index">Login</button>
</div>
</div>
</table>
</fieldset>
</form>
<?php
echo form_close();
?>
</body>
Any help in this regard will be highly appreciated.
Simply change col-md-4 to col-md-12 everywhere, and read bootstrap documentation.
Your approach has mistake, here is the correct approach:
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
</div>
</div>
You may use col-md-12 instead or col-md-6 (whatever) but for better view and user experience col-md-4 or -3 works better. Use the above approach in order to view everything correctly.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to move my "Seller" container right below my "Corporation Store" container. I added a visual presentation.
I tried using clear:bothand clear:left; however, it was messing the other containers: "Customer" and "Product".
So, I tried putting the "Seller" container into a new row and tried using clear:both to put the "Seller" container below "Corporation" container.
Because the "Customer" container is big, it creates a huge gap between "Seller" and "Corporation" containers. Is there a way I can fix this problem or approach this problem different?
Thank you
jsfiddle
I achieved what your end result by wrapping both "Corporation Store" and "Seller ID" in their own "col-xs-3" container and then stripping them of that same class.
<!DOCTYPE html>
<html>
<head>
<title>Corp Simulator</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/sweetalert2.min.css">
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default">
<!-- container -->
<div class="container">
<!-- header -->
<div class="navbar-header">
<div class="col-xs-12 navbar-header-padding">
<span class="col-xs-3"><img src="../img/corp-logo-flat.png"/></span>
<span class="col-xs-9"><a class="navbar-brand">Corp Simulator</a><a type="button" data-toggle="modal" data-target="#buildModal" class="label label-default pull-right ">Build</a></span>
</div>
</div>
</div>
</nav>
<!-- begin content -->
<div class="col-sm-12">
<div class="col-xs-8">
<!-- corporation -->
<div class="col-xs-12">
<h2>Corporation</h2>
<!-- begin form -->
<form id="cForm">
<!-- begin row -->
<div class="row">
<div class="col-xs-3">
<!-- corporation store -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Corporation Store</div>
<div class="panel-body">
<div class="col-xs-12 no-left-right-padding">
<div class="col-xs-6 no-right-padding">
<div class="form-group">
<label for="corpId">Corporation ID #</label>
<input type="text" class="form-control" tabindex="1" name="corpId" id="corpId" schoolId="corpId">
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="datetime-local" class="form-control" tabindex="2" name="startDate" id="startDate" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endTime">End Time</label>
<input type="datetime-local" class="form-control" tabindex="3" name="endTime" id="endTime" placeholder="End Time">
</div>
</div>
</div>
</div>
<!-- seller info -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Seller ID</div>
<div class="panel-body">
<div class="form-group">
<label for="sellerId">SE ID</label>
<input type="text" class="form-control" tabindex="4" name="sellerId" id="sellerId" placeholder="SE ID">
</div>
<div class="form-group">
<label for="seFirstName">SE First Name</label>
<input type="text" class="form-control" tabindex="5" name="seFirstName" id="seFirstName" placeholder="SE First Name">
</div>
<div class="form-group">
<label for="seLastName">SE Last Name</label>
<input type="text" class="form-control" tabindex="6" name="seLastName" id="seLastName" placeholder="SE Last Name">
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!--customer -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Customer</div>
<div class="panel-body">
<div class="col-xs-6">
<div class="form-group">
<label for="customerId">Customer ID</label>
<input type="text" class="form-control" tabindex="7" name="customerId" id="customerId" placeholder="Customer ID">
</div>
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" tabindex="9" name="companyName" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="customerFirstName">First Name</label>
<input type="text" class="form-control" tabindex="11" name="customerFirstName" id="customerFirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="customerAddress1">Address 1</label>
<input type="text" class="form-control" tabindex="13" name="customerAddress1" id="customerAddress1" placeholder="Address 1">
</div>
<div class="form-group">
<label for="customerCity">City</label>
<input type="text" class="form-control" tabindex="15" name="customerCity" id="customerCity" placeholder="City">
</div>
<div class="form-group">
<label for="customerPostalCode">Postal Code</label>
<input type="text" class="form-control" tabindex="17" name="customerPostalCode" id="customerPostalCode" placeholder="Postal Code">
</div>
<div class="form-group">
<label for="customerPhone1">Phone 1</label>
<input type="text" class="form-control" tabindex="19" name="customerPhone1" id="customerPhone1" placeholder="Phone 1">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="relationshipType">Relationship</label>
<input type="text" class="form-control" tabindex="8" name="relationship" id="relationship" placeholder="Relationship">
</div>
<div class="form-group">
<label for="nationalId">National Identifier</label>
<input type="text" class="form-control" tabindex="10" name="nationalId" id="nationalId" placeholder="National ID">
</div>
<div class="form-group">
<label for="customerLastName">Last Name</label>
<input type="text" class="form-control" tabindex="12" name="customerLastName" id="customerLastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="customerAddress2">Address 2</label>
<input type="text" class="form-control" tabindex="14" name="customerAddress2" id="customerAddress2" placeholder="Address 2">
</div>
<div class="form-group">
<label for="customerState">State/Province</label>
<input type="text" class="form-control" tabindex="16" name="customerState" id="customerState" placeholder="State/Province">
</div>
<div class="form-group">
<label for="customerCountryCode">Country Code</label>
<input type="text" class="form-control" tabindex="18" name="customerCountryCode" id="customerCountryCode" placeholder="Country Code">
</div>
<div class="form-group">
<label for="customerPhone2">Phone 2</label>
<input type="text" class="form-control" tabindex="20" name="customerPhone2" id="customerPhone2" placeholder="Phone 2">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="customerEmail">Email</label>
<input type="email" class="form-control" tabindex="22" name="customerEmail" id="customerEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
<!-- product -->
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Product</div>
<div class="panel-body">
<div class="form-group">
<label for="prodId">Product ID</label>
<input type="text" class="form-control" tabindex="23" name="prodId" id="prodId" placeholder="PRODUCT ID">
</div>
<div class="form-group">
<label for="modelYear">Year</label>
<input type="text" class="form-control" tabindex="24" name="modelYear" id="modelYear" placeholder="Year">
</div>
<div class="form-group">
<label for="model">Model</label>
<input type="text" class="form-control" tabindex="25" name="model" id="model" placeholder="Model">
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</form>
<!-- end form -->
</div>
</div>
</div>
</body>
</html>
The snippet is limited in its view, but you will see the layout you wanted to achieve.
In the following Bootstrap Horizontal form if I want to add a caption right below Order label as <small class="text-muted">Must be at least 200</small> where do I place it? NOTE: Question is related to how to place a muted caption in small muted font right underneath a Bootstrap horizontal form's label. I know the role of placeholder attribute but in actual app I do need to place such a caption underneath a form's label.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> 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">Submit</button>
</div>
</div>
</form>
</div>
You can put wrap the <label> with a new div, move the col-sm-2 to that div and add the small element inside:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="email">Email:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="pwd">Password:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> 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">Submit</button>
</div>
</div>
</form>
</div>
Open in Full page to see the actual result
How can I move down the search button at the same level with other textfields?
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="row align-center">
<input type="submit" value="search" class="btn btn-primary" />
</div>
</form>
An easy way to fix is to add same structure as other input fields (also avoid to add additional CSS which may not cover all cases), for the label, use as a placeholder.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-1 form-group align-center">
<label for="created_at_lt"> </label>
<input type="submit" value="search" class="btn btn-primary form-control" />
</div>
</form>
Another simple way would be to add the height of the label as a margin.
Make sure you go into fullpage view of the snippet to see the proper result:
.lowered {
margin-top: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-2 form-group align-center">
<input type="submit" value="search" class="btn btn-primary form-control lowered" />
</div>
</form>
Try using br tag at end of label tag
<div class="row">
<div class="col-md-6">
<label for="search">Title</label><br>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-6">
<label for="year">Year</label><br>
<input type="text" name="year" id="year" class="form-control" />
</div>
</div>
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'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.