I cannot figure out how to align the div containing the "Go" button vertically to bottom.
I tried several things but none worked.
Here is a jsfiddle: https://jsfiddle.net/2fzq3xb3/2/
and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</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>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row" style="position: relative;">
<div class="col-xs-10">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date'>
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date'>
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);">
<button type="submit" class="btn btn-primary btn-xs">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
Add this CSS to the parent div.
display:table-cell;
vertical-align:middle;
Here is the solution that I found. Any suggestions for improvements are welcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</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>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row">
<div class="col-xs-10" style="max-width: 500px;">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date' style="max-width: 230px;">
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date' style="max-width: 230px;">
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="height:74px;">
<button type="submit" class="btn btn-primary btn-ss" style="position:absolute; bottom: 15px;">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
just make sure row has its position property set to static (default value). I don't know why, but if you change it to relative or absolute it won't work.
.col-xs-12 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-xs-12">
some text...
</div>
</div>
Related
I'm creating a simple login page with Angularjs, and am trying to add CSS to it using UI Bootstrap. One of the dependencies that UI Bootstrap required was Bootstrap CSS, so I have that included in my page too. Right now, my form looks as intended; what I want to do is to center the container itself vertically, so that it sits in the middle of the page. Is there a good way for me to go about doing that? I've searched up a lot of solutions, and they either do not change anything, or squash/change the form itself in a way that I don't want. And to be honest, I'm not sure if the reason I'm having difficulty centering the container has to do with UI Bootstrap or anything.
Here is an image of what the form looks like:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>
Any help would be greatly appreciated, thank you very much.
Try this
html, body {
height: 100%
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component" class="wrapper">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>
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 have a HTML page with forms ad content that i built with bootstrap which occupies full width and height of Opera,IE,Firefox and Chrome but when i run it in Edge it only occupies like 75 % ,only when i set the zoom to 125% in edge it renders the same way as it did in other browsers . Is there like any meta tag
like
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to make Edge use the same settings like IE?
I was using this meta tag ,right after the header tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
my html page:
html {
min-height: 100%;
width: 100%;
height: 100vh;
}
body {
margin-top: 50px;
min-height: 100%;
width: 100%;
height: 100vh;
}
.fullwidth {
width: 100%;
}
.halfwidth {
width: 50%;
}
.fullscreen {
height: 100%;
width: 100%;
}
.halfscreen {
height: 50%;
width: 100%;
}
.verticalscrollbar {
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Best Taxi</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<link rel="icon" href="Images/favicon.ico" type="image/x-icon">
</head>
<body class="background-plain">
<div id="page">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Best Taxi</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>City Attractions</li>
<!--Code for drop down link ,sub menu-->
<!-- <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop Down Link
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>The Museum</li>
<li>The Palace</li>
<li>The Zoo</li>
</ul>
</li>-->
<li>Tour Packages</li>
<li>Pricing</li>
<li class="active">Contact Us</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<section id="Main" class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 fullscreen">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<div id="Address" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h2>Address</h2>
<hr />
<div id="col-lg-6 col-md-6" style="float: left;">
<h5>Address:Flat Number 1,</h5>
<h5>Building Number 1000</h5>
<h5>EverGlade Street,</h5>
<h5>Way Number 15678,</h5>
<h5>DownTown,Thimphu</h5>
<h5>Bhutan</h5>
<h5>Phone:0000000000</h5>
<h5>Mail:info#besttaxi.com</h5>
</div>
<div id="AddressImage" class="col-lg-6 col-md-6 visible-lg visible-md">
<img src="Images/taxi_mail.png" class="img-responsive" />
</div>
</div>
<div id="ContactUsForm" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<form>
<h2>Contact Us</h2>
<hr />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Name:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactName" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Email:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactEmail" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Subject:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactSubject" type="text" class="form-control" required placeholder="joe#gmail.com" />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Message:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<textarea rows="5" cols="70" class="form-control"></textarea>
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"></div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<br />
<button type="submit" class="btn btn-default btn-yellow">Submit</button>
</div>
</form>
</div>
</div>
<div id="AddressMap" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<br />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3539.890031078142!2d89.6358250609653!3d27.47268275781882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1485174584064" class="fullwidth" height="260"></iframe>
</div>
<hr />
</section>
<footer class="container navbar-fixed-bottom hidden-xs hidden-sm">
<p class="hidden-xs hidden-sm">Copyrights © 2017 Best Taxi rights reserved | Developed by Nakki </p>
</footer>
</div>
</body>
</html>
I am currently trying to put a whole page background but it is being shifted to the bottom because of the bootstrap form. I want the image to take the entire page and the bootstrap form to stay where it is. Also, how do I shrink the form slightly so it takes maybe half a page width?
This is my code:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
html{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div">
<div class="panel panel-default">
<form id="iForm">
<div class="row">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Would mean a lot if someone could kindly help me out, as I am quite novice to web development
Thanks
Instead of setting the background in html you should set it in the body instead.
E.g.
body{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
Fiddle
first set your picture to body background body{background:url("images/watchBackground.jpg") no-repeat center center fixed;}
then transparent elements that you want by inline css styling:style="background-color:transparent;"
your correction code is this:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
body{
background:url('k.jpg') no-repeat center center fixed;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div" style="background-color:transparent;">
<div class="panel panel-default" style="background-color:transparent;">
<form id="iForm" style="background-color:transparent;">
<div class="row" style="background-color:transparent;">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
#benj Your css is all good. It's just that your body color is set to white (bootstrap default - coming from scaffolding in your case) and that white color is overlapping over your background image. You need to set it to transparent.
body {
background-color: transparent;
}
for form container width (shrink issue)...just wrap the whole panel into the bootstrap grid column..for example...
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
.........
......Your form code.......
...............
</div>
</div>
Adjust column width and offset value as per your requirement
I want to set the modal dialog position lower , I've tried to change so many properties of bootstrap.css file but no one of that changes works,what is the property that I have to change and in what class?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Login Form</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!--login modal-->
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">Sign In</button>
<span class="pull-right">Register</span><span>Need help?</span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>