I want to create to different login form. How do i put my login container besides each other? I tried adjust the column grid but it didn't work. I tried add col-sm-12 and add col-sm-6 to each login-container.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
You need to adjust your HTML structure. Currently you're first col-sm-6 is closed inside a container and row before you reach your second col-sm-6. Both columns should be inside the container and row. See Grid System.
See example Snippet.
/**FOR DEMO ONLY**/
body {
padding-top: 50px;
}
.login-container {
background: #f2f2f2;
padding: 20px 15px 5px;
}
/**FOR DEMO ONLY**/
#media (max-width: 767px) {
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Stacks # Under 768px</h3>
<div class="row">
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password">
</div>
<div class="form-group">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</div>
</form>
</div>
</div>
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password">
</div>
<div class="form-group">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<h3>Never Stacks</h3>
<div class="row no-gutter">
<div class="col-xs-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password">
</div>
<div class="form-group">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</div>
</form>
</div>
</div>
<div class="col-xs-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password">
</div>
<div class="form-group">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
Use this
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
This should work
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
<input class="form-control" placeholder="Username" name="username" type="text">
<input class="form-control" placeholder="Password" name="password" type="password">
<button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
</form>
</div>
</div>
</div>
</div>
You're closing the .row div too early. Take one of the </div>'s out of the middle and place it at the end.
I'd also update your column divs to <div class="col-xs-12 col-sm-6"> just to maintain some consistent padding for small screens.
Related
I have a form and am having a problem trying to style it.
Here is what it looks like now:
I need it to look like this:
I need to style the first row and column for the Title and the 2nd row 3rd column for to date of birth.
I'm having trouble targeting the correct selector/element. Here is what the html looks like:
<h6 class="title">Personal Information</h6>
<div class="row">
<div class="col-3">
<select name="title"></select>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="firstname" value="" id="firstname"
maxlength="50" size="50" class="" placeholder="First name*"
style="background-image: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=");
background-repeat: no-repeat; background-attachment:
scroll; background-size: 16px 18px;
background-position: 98% 50%; cursor: auto;">
<!--<input type="text" placeholder="First name*">-->
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="lastname" value="" id="lastname"
maxlength="50" size="50" placeholder="Last name*">
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="dob" value="" id="dob" maxlength="50"
size="50" placeholder="Date of birth (DD/MM/YYYY)*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="mobile" value="" id="mobile"
maxlength="50" size="50" placeholder="Mobile*">
<div class="form_error"></div>
<!--<input type="tel" placeholder="Mobile*">-->
</div>
<div class="col-3">
<input type="email" name="email" value="" id="email"
maxlength="50" size="50" placeholder="Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Email*">-->
</div>
<div class="col-3">
<input type="text" name="emailconf" value="" id="emailconf"
maxlength="50" size="50" placeholder="Confirm Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Confirm Email*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-1">
<input type="text" name="address1" value="" id="address1"
maxlength="50" size="50" placeholder="Address*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Address*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="suburb" value="" id="suburb"
maxlength="50" size="50" placeholder="Suburb*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Suburb*">-->
</div>
<div class="col-3">
<select name="stateid">
</select>
</div>
<div class="col-3">
<input type="text" name="postcode" value="" id="postcode"
maxlength="4" size="10" placeholder="Postcode*">
<div class="form_error"></div>
</div>
</div>
Any help is greatly appreciated
to make the structure better I would say load bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
and use this markup:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Personal Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="First name">
</div>
<div class="col-md-4">
<input type="text" placeholder="Last name">
</div>
<div class="col-md-2">
<input type="date">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Mobile">
</div>
<div class="col-md-4">
<input type="email" placeholder="Email">
</div>
<div class="col-md-4">
<input type="email" placeholder="Confirm Email">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Address">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Suburb">
</div>
<div class="col-md-4">
<select>
<option value="mr">NSW</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="Post Code">
</div>
</div>
</div>
and you can customize the look of the form fields, just put this code after you load the Bootstrap
input, select { width:100%; padding:14px; margin:10px 0; border:2px solid #6aa295; }
You should use something like this. And bootstrap is responsive so You could see how it look on the expand view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-12">
<h2><p class="text-center">Personal Information</p></h2>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<select class="form-control">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="firstname" class="form-control" placeholder="First name *">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="lastname" class="form-control" placeholder="Last name *">
</div>
<div class="col-md-2">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="mobile" class="form-control" placeholder="Mobile *">
</div>
<div class="col-md-4">
<input type="email" id="email" class="form-control" placeholder="Email *">
</div>
<div class="col-md-4">
<input type="email" id="emailconf" class="form-control" placeholder="Confirm Email *">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" id="address1" class="form-control" placeholder="Address *">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="suburb" class="form-control" placeholder="Suburb *">
</div>
<div class="col-md-4">
<select class="form-control">
<option class="collapse" value="mr">Info</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="postcode" class="form-control" placeholder="Post Code *">
</div>
</div>
</form>
</div>
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</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">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
I know I am doing this wrong but I have no idea how to fix it properly.
I have a sign up form that has a display: relative, on col-lg. But I did not know how to change a css based on a screen size. So I just duplicated the sign up form and gave it a different class name and changed the css accordingly.
Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
How can I fix this issue without having to duplicate the form? I would like to not use jquery or javascript, but if I have to I will.
.form-signup {
position: absolute;
bottom: 70px;
right: 0;
margin-right: 35px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- First form -->
<div class="col-xs-4 col-sm-4 col-md-4 pull-right form-signup hidden-md hidden-sm hidden-xs">
<form role="form">
<h2>
<div class="text-center lead p-color">Tagline</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="FN" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="LN" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="EM" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="PW" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6>terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
<!-- Second Form -->
<div class="row row-offset center-block">
<div class="col-md-12 text-center hidden-lg"><img src="images/landing-md-xs.png" class="img-responsive center-block" alt=" animation" style="height: auto; width: 500px;"/></div>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 hidden-lg">
<form role="form">
<h2>
<div class="text-center lead p-color">TAGLINE</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6> terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
</div>
col-lg-x is a bootstrap class that assigns your div grid size with the value of x. it's for large screen. but removing shouldn't drastically change the design like you have presented above. It's because you have mis-linked bootstrap css file. Also on the code above you have included jquery instead of bootstrap.
Edit : for Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
For this add other classes col-md-x, col-xs-x` on the div as according to your need of x value.
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...