I just started learning Bootstrap and build a website.
I was wondering how to create a large empty text input box? So that someone can type in something, such as review for a product.
According to Bootstrap docs, you can size an input with input-* classes:
<input class="form-control input-sm" type="text"/>
<input class="form-control input-md" type="text"/>
<input class="form-control input-lg" type="text"/>
<head>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<div class="form-group">
<label for="inputsm">input-sm</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
</form>
</body>
I think this is what your looking for.
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<head>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<h4>Text Area Below with 15 Rows </h4>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="15" id="comment"></textarea>
</div>
</form>
</body>
You can use the textarea tag.
<textarea></textarea>
You can either add attributes in the textarea tag or use CSS to change the size of the textarea.
<textarea rows="5" cols="50"></textarea>
textarea { width : 100px; min-height : 50px;}
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Is there a downside to putting all your form input tags inside div? I find you have the most control and clean code by doing that:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
margin-top: 0.5em;
}
</style>
</head>
<body>
<form action="myFormScript.php" method="post">
<div>Name: <input type="text" size="50" name="user-name"></div>
<div>Password: <input type="password" size="50" name="pwd"></div>
<div><input type="checkbox" name="vehicle" value="Ford">I have a Ford</div>
<div><input type="checkbox" name="vehicle" value="Audi">I have an Audi</div>
<div><textarea name="" id="" cols="50" rows="10">You can type stuff here!</textarea></div>
<div><input type="submit"></div>
</form>
</body>
</html>
There so no such downside of using input inside div.
But if you want to improve your form interactive you can use label instead of keep text directly inside div
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
margin-top: 0.5em;
}
</style>
</head>
<body>
<form action="myFormScript.php" method="post">
<div>
<label for="username">Name: </label>
<input id="username" ype="text" size="50" name="user-name" />
</div>
<div>
<label for="password">Password: </label>
<input id="password" type="password" size="50" name="pwd" />
</div>
<div>
<input id="ford" type="checkbox" name="vehicle" value="Ford" />
<label id="ford"> I have a Ford </label>
</div>
<div>
<input id="audi" type="checkbox" name="vehicle" value="Audi"/>
<label for="audi"> I have an Audi </label>
</div>
<div>
<textarea name="" id="" cols="50" rows="10">You can type stuff here!</textarea>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
if you really want to use div or make a good interface then you should use bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container w-75 mx-auto">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="name">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">password</label>
<input type="password" class="form-control" id="exampleFormControlInput1" placeholder="password">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I have a Ford
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I have an Audi
</label>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
</body>
</html>
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.
<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>
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 have written a code for a form , but I want to decrease the width with out damaging the layout and I'm unable to change the width of input fields.
while decreasing the size labels are getting misaligned
<head>
<title>Add Customer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container" style="color:green">
<h2 align="center" style="color: blue">Add Customer</h2>
<form role="form">
<div class="form-group">
<label for="CustomerName">Name:</label>
<!--<input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">-->
<input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">
</div>
<div class="form-group">
<label for="email">Email:</label>
<span class="glyphicon glyphicon-envelope"></span>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Company:</label>
<input type="text" class="form-control" id="pwd" placeholder="Enter Company Name">
</div>
<div class="form-group">
<label for="pwd">Comment:</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Enter Comments"></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</body>
In your given example, you have used wrong css rules like you used width="511px" which is not corrcet. YOu have to use style="width:511px;". you can use inline css to give your custom style to input fields. see here
We should not modify the bootstrap class style but you can if you have requirements.
like this <input type="text" class="form-control" style="width:170px;" id="pwd" placeholder="Enter Company Name"> you can override the bootstrap class.
UPDATED I have added custom width to input boxes and in text area you can only resize vertical.(for test)
Since you were using the bootstrap framework, in my opinion you can use grid system to responsively adjust the width
<div class="col-md-6">
<div class="form-group">
<label for="CustomerName">Name:</label>
<input type="text" class="form-control" id="email" placeholder="Enter Customer Name">
</div>
</div>