I am having issues centering a form in Bootstrap. The form includes name and comment box including a post button.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name" >
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick ="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
When you run the code, the form only appears on the left side of the page. It won't center the page. Can anyone help me with this?
This would help you in making your form center of page.
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; // optional this is only to get full height
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#Form {
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="mx-auto" style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
The mx-auto class does not work for Bootstrap 3. If you use Bootstrap 4, then it will work no problem. If you need to use Bootstrap 3, then put your own style with a margin: 0 auto;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="mx-auto" style="width: 200px;">
<form id="Form" onsubmit="return false">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
</div>
<br>
<ul id="adduserinput">
</ul>
</div>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Like #MichaelvE said, the mx-auto works for Bootstrap 4, not 3.
A method I use with 3 is adding the class text-center to the form tag (or wrapping them all inside a <div class="text-center">...</div>. Works fine for me.
Note: It does not center only text, as the name implies.
If you want to go with the Bootstrap way, then you can go with col and col offset classes. Also, try to avoid fixed width elements if you want it to be responsive on all screen sizes. Even more, use form-groups classes for wrap labels and they related input. I show you an example of this (you can play with the browser's width):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="col-sm-offset-3 col-sm-6">
<br>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" type="text" id="name"/>
</div>
<div>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
</div>
<br>
<button class="btn btn-primary" onClick="myFunction()">
Post
</button>
</div>
</form>
</div>
As you can note, the formulary is centered on small, medium and large screen sizes, but it use the full width on extra small devices. Hope this helps you.
Related
I have downloaded a login template for a project and I am trying to add a logo to the site.
Below is the html code I'm using
.logo{
position:absolute;
top: 5%;
left: 10%;
height: 100px;
width: 100px;
}
<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">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>RNL Trading intern</title>
<link rel="icon" type="image/x-icon" href="img/test-image.png">
</head>
<body >
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
<div class="d-flex align-items-center light-blue-gradient" style="height: 100vh;">
<div class="container" >
<div class="d-flex justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 shadow">
<div class="card-body">
<h3>Log in</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Wachtwoord</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</div>
</body>
</html>
The favicon works so the image source is valid. I wrote a little css to size up the image and position it to the top left:
This is what shows up on the page after refreshing cache:
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
You can't use an image directly without using img tag.
The correct way should be :
<div class="logo">
<img class="" src="./icons/test-image.png" alt="rnl-logo">
</div>
OR:
<img class="logo" src="./icons/test-image.png" alt="rnl-logo">
Reference : : The Image Embed element
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
So i want this form which is in a card to be in the middle of the whole web page and responsive.I tried changing the height of everything to h-100 and align-items-center and nothing seems to work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 ">
<div class="col-md-6 h-100 ">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I was expecting this:
enter image description here
but i get this:
enter image description here
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
For more information: https://getbootstrap.com/docs/4.0/utilities/flex/#align-items
If I do not set my HTML and BODY tag class = "h-100" They are showing at like 210 pixels. I then have to keep setting lower level elements to h-100 also.
I'm really not sure how to fix it other than adding the h-100
<html class="h-100" 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100">
I believe that the correct result of bootstrap HTML and body is that it should size it self roughly to the size of the viewing medium.
Here is the full page of what I'm trying to accomplish on jsfiddle.
https://jsfiddle.net/v2cqh3n8/
The reason I am trying to have the body set to a nice size is because I want to center align the login form. Which I am also having trouble with.
Try this bootstrap solution. Hope it works better for you, without adding height to BODY and HTML Tag .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="form-group">
<label for="">Username</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="text" class="form-control">
</div>
<button class="btn btn-primary">Log-in</button>
</div>
</div>
</div>
It worked by simply adding height to body in vh unit. h-100 justify-content-center to .row
Here is working example:
https://jsfiddle.net/HarishBoke/faocwnp6/1/
If all you want to do is put the form in the centre of the page, just use flexbox.
I've added in you js fiddle with the correct bootstrap classes.
The reason you need to set h-100 on these elements is that the content within those elements is not filling the DOM.
Side-note: You also don't need all of the containers/rows if you're just centering the element.
<!doctype html>
<html class="h-100" 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100 d-flex align-items-center justify-content-center">
<form action="/login" method="POST" class="w-50">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input" placeholder="Username">
</div>
<div class="form-group">
<label for-"password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input" placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Just set the height of the html and body to 100% using css or h-100 classes and then add d-flex and align-items-center classes to the body.
html,
body {
height: 100%;
}
<!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.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col">
<form action="/login" method="POST" class="w-50 mx-auto">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input"
placeholder="Username">
</div>
<div class="form-group">
<label for="password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input"
placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
</div>
</div>
</div>
</body>
</html>
I'm using bootstrap styling for form. I want this form to be displayed at the center of the page but I'm not able to do it even though I tried margin 0 auto in css. Can anyone help.
This is the code:
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
Screenshot of my browser displaying the above form:
Try this. I've wrapped the form with
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto"></div>
</div>
</div>
.mx-auto centers the column automatically and inside the column you can add your form that has .col-3 and col-9, in my example. But adjust it according to how you need the label and input to be shown.
Here is the CodePen.
Edit: I've realized you're using Bootstrap 3, not 4. In that case, you can try something like this, but it needs a bit of work on mobile. CodePen.
If you don't like to center body, put the form in a div and center that div.
body { text-align: center; border: 1px solid;}
form { margin: auto; width: 200px; border: solid blue; display: block;}
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
I am a first-try bootstrap guy. The thing i want to achieve is to have labels and inputs same line nice and clean.
Anyone can explain me why in the below example labels are still above inputs? Am i doing something wrong?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta application-name="Test-System">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Bootstrap Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- jQuery UI from Google CDN -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<title></title>
</head>
<body>
<form class="form-horizontal">
<div class="control-group">
<label for="input1" class="control-label">Label</label>
<div class="controls">
<input id="input1" type="text">
</div>
</div>
<div class="control-group">
<label for="input2" class="control-label">Label</label>
<div class="controls">
<input id="input2" type="text">
</div>
</div>
</form>
<!-- jQuery from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</body>
</html>
<div class="controls">
<label for="input1" class="control-label">Label</label>
<input id="input1" type="text">
</div>
Is this what you are looking for?
EDIT
Horizontal label from outside of input's div.
<div class="control-group">
<label for="input1" class="control-label col-sm-2">Label</label>
<div class="controls col-sm-10">
<input id="input1" type="text">
</div>
</div>