Bootstrap container has two forms horizontally.
Hovering over Form1 will increase the width and decreases the width of form2.
but reverse is not happening. Any suggestions please.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<style>
#row{
background-color: lightblue;
border-style: groove;
}
#form1{
background-color: lightgreen;
width: 50%;
transition: width 0.75s ease;
}
#form1:hover{
width: 75%;
}
#form1:hover + #form2{
width: 25%
}
#form2{
background-color: orange;
width: 50%;
transition: width 0.75s ease;
}
#form2:hover{
width: 75%;
}
#form2:hover ~ #form1{
width: 25%
}
</style>
</head>
<body>
<div class="container" >
<div id="row" class="row" >
<div id="form1" class="col-sm-6">
<!-- form1 -->
<form class="form-horizontal">
<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">
</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">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 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>
<div id="form2" class="col-sm-6">
<!-- form 2 -->
<form class="form-horizontal">
<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">
</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">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 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>
</div>
</div>
</body>
</html>
Please see the below image. When hovering on Green form, form goes left to right ,Orange form decreases the width and Green form increases the width but this is not happening while hovering on Orange form(Reverse direction).
Basically I'm trying to achieve form like THIS
You can do this with flexbox. As Selva has mentioned, CSS can only select the next sibling, not the previous. However, with flexbox this is much easier:
.flexible{display: flex; flex-direction: row;}
#form1:hover{
width: 100%;
}
#form2:hover{
width: 100%;
}
https://jsfiddle.net/2g4krj0f/
The solution with pure CSS exists. You need to define css-rule for selector which selects form1 when this form is unhovered while row is hovered: #row:hover > #form1:not(:hover)
#row:hover > #form1:not(:hover){
width: 25%;
}
http://www.codeply.com/go/0Q2gFDoc4y
look at snippet (for some reason it works in full screen mode):
#row{
background-color: lightblue;
border-style: groove;
}
#form1{
background-color: lightgreen;
width: 50%;
transition: width 0.75s ease;
}
#form1:hover{
width: 75%;
}
#form1:hover + #form2{
width: 25%
}
#form2{
background-color: orange;
width: 50%;
transition: width 0.75s ease;
}
#form2:hover{
width: 75%;
}
#row:hover > #form1:not(:hover){
width: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" >
<div id="row" class="row" >
<div id="form1" class="col-xs-6">
<!-- form1 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="email">Email:</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="pwd">Password:</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<div id="form2" class="col-xs-6">
<!-- form 2 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="email">Email:</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="pwd">Password:</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
Related
Desired result: "between X% and Y%", and the input groups, all on the same line.
This works with regular form fields, but not with input-group:
between
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
Use classes d-inline-flex align-items-center w-auto on input-group:
body { padding: 1em; }
input.form-control { width: 3em; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group d-inline-flex align-items-center w-auto">
between <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
and <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
you could try something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<label for="between" class="mr-2">between</label>
<input type="text" class="form-control" id="between" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="and" class="mr-2 ml-2">and</label>
<input type="text" class="form-control" id="and" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</form>
I cant get the control label to line up checkbox input. Its even worse on mobile. I want the text to line up. What am I doing wrong? I thought a div was missing or something but it works fine with any other input. I tried adjusting margins with css but now working either. Any help would be appreciated. Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!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">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<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 Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><!--?php echo lang('login_forgot_password');?--></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
You can add some CSS styling to control the position of .checkbox-inline
The media query will move the checkbox for smaller screens.
Also note I added the class .form-small to your last .form-group to control the position of the checkbox on smaller screens.
.checkbox-inline {
top: -7px;
}
#media only screen and (max-width: 991px) {
.checkbox-inline {
top: -40px;
right: -115px;
}
.form-small {
margin-bottom: 0 !important;
max-height: 20px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!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">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<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 Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group form-small">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><!--?php echo lang('login_forgot_password');?--></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
I'm using a horizontal bootstrap form and need a <input> absolute positioned for reasons too boring to explain. However, I'm battling getting it the same width as it used to be prior to absolute. So in the linked example, I want the password field to be the same width as the email field.
<form class="form-horizontal" style="max-width: 400px">
<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">
</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 abs" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 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>
CSS:
.abs {
position: absolute;
width: inherit; /* 100%; */
}
How can I modify this fiddle?
jsFiddle
Using Louis' answer as inspiration, I think I was able to simplify this a little bit.
.abs-container {
position: absolute;
width: 100%;
padding-right: 30px;
}
Seems to work fine regardless of width of the form as well.
https://jsfiddle.net/8aco78L7/4/
There is one way to do it, although it does require a few divs.
The idea is to not apply the position: absolute property to the input element itself but to a container which has the same structure as the form. This way, we can be certain they will both always share the same size.
.password-container {
width: 100%;
position: absolute;
padding-left: 15px;
}
.password-container > .form-horizontal {
max-width: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
<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">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="password-container">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-10 col-md-offset-2">
<input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
</div>
<div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 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>
Since it only uses divs semantics is not affected.
.col-sm-10 {
position: relative;
}
input {
max-width: 400px;
}
.abs {
position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
<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">
</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 abs" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 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 class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id=""> Email:</label>
<label class="Control-label col-sm-4" id=""> Username:</label>
<label class="Control-label col-sm-4" id=""> Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
and my CSS code is :
.form-control{
width: 150px;
}
h1{
color:red;
}
Good Day mate, i am just confuse if im doing right or not. i want to resize the input on my website which defined as class "form-control" but when i do the css above nothing changes. can someone help me if my selector or wrong or my codes is? thank you
P.S the test below is just a xample if the css is being link in my editor and yes the color red is being executed
The more specific the selector, the more precedence it has. For example :
.mydiv .myclass {
background-color: blue;
}
.myclass {
background-color: red;
}
Even tho the red background is defined after the blue one, the first one is more specific in the class that it is applied to, and in case you have the following code, the blue background will be applied :
<div class="mydiv">
<div class="myclass">
</div>
</div>
So what you want to do in your case, and this is the most basic but still the better solution, is to add a class to your form in order to be able to specify the width of the form-control elements for this form :
<form class="form-inline cool-form">
<div class="well">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
</div>
</form>
And then specify the width in your css :
.cool-form .form-control {
width: 250px;
}
try this:
note: and you are missing to close your first div i.e <div class="container">
.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id="">Email:</label>
<label class="Control-label col-sm-4" id="">Username:</label>
<label class="Control-label col-sm-4" id="">Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
You are using Bootstrap and form-control class is used from Bootstrap CSS.
Use (Easy way)
.form-control{
width: 150px !important;
}
to override your code over Bootstrap CSS
The best practice -
In your case the class is .form-control (Bootstrap class)
To overcome this is to define new class and add new changes to your own class.
.form-control-override{
width: 150px;
}
and use this form-control-override in your HTML code instead of form-control
I am trying to build a form group but they are not aligned correctly with Bootstrap 3.
I am trying to aligned them vertically. This is giving me a nightmare so need some of your help
Please see below for screen shot
Below is the code for the form
<div class="container">
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="//placehold.it/100" class="avatar img-circle" alt="avatar">
<h6>Upload a different photo...</h6>
<input type="file" class="form-control">
</div>
</div>
<!-- edit form column -->
<div class="col-md-9 personal-info">
<!-- <div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
This is an <strong>.alert</strong>. Use this to show important messages to the user.
</div> -->
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Jane">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="janesemail#gmail.com">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Time Zone:</label>
<div class="col-lg-8">
<div class="ui-select">
<select id="user_time_zone" class="form-control">
<option value="Hawaii">(GMT-10:00) Hawaii</option>
<option value="Alaska">(GMT-09:00) Alaska</option>
<option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="Arizona">(GMT-07:00) Arizona</option>
<option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US & Canada)</option>
<option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" value="janeuser">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="reset" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
</div>
</div>
</div>
<hr>
my css sheet
/* CSS declarations go here */
.stylish-input-group .input-group-addon{
background: white !important;
}
.stylish-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
* {
margin-bottom: 0px;
margin-top:0px;
margin-right: 0px;
margin-left: 0px;
}
.bg{
background: url(fundog.jpg);
background-size: cover;
color: white;
height: 500px;
margin-bottom: 0px;
margin-top:0px;
}
.navbar{
margin-bottom: 0px;
margin-top:0px;
}
.help{
text-align: right;
margin-bottom: 0px;
height: 300px;
}
.spread{margin-bottom: 0px;}
body {
/* set this equal to navbar's height */
}
.usp{
text-align: center;
}
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.profile{
margin-bottom: 100px;
margin-top:30px;
margin-right: 100px;
margin-left: 100px;
}
Your own css is causing problems:
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Specifically, your combination of float:none and display: table-cell. Remove them and let bootstrap lay them out how it normally does.
Also not sure about setting everything's margin to zero. Like it or not, Bootstrap utilises negative margins to correctly layout some of its classes.
Here's the updated version that has your header, and all of the columns inline vertically.
http://www.bootply.com/b38G8GZgjw
Here's the code in case bootply is not available:
<div class="container">
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="//placehold.it/100" class="avatar img-circle" alt="avatar">
<h6>Upload a different photo...</h6>
<input type="file" class="form-control">
</div>
</div>
<!-- edit form column -->
<div class="col-md-9 personal-info">
<!-- <div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
This is an <strong>.alert</strong>. Use this to show important messages to the user.
</div> -->
<div class="row">
<h3 class="col-lg-3 text-right">Personal info</h3>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Jane">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="janesemail#gmail.com">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Time Zone:</label>
<div class="col-lg-8">
<div class="ui-select">
<select id="user_time_zone" class="form-control">
<option value="Hawaii">(GMT-10:00) Hawaii</option>
<option value="Alaska">(GMT-09:00) Alaska</option>
<option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="Arizona">(GMT-07:00) Arizona</option>
<option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US & Canada)</option>
<option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" value="janeuser">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="reset" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
</div>
</div>
</div>