I am still new to web dev, and in the beginning stages of working on this project. My issue right now, is when resizing my display below 1200 pixels the content of my second form on the left side shifts. The content of the TEXT changes from 2 lines to 3 lines and makes the bottom section extend further that the right side. Trying to find a way to keep the content even across the bottom as the page resizes.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
)
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
<!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="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="scripts/script.js"></script>
</body>
</html>
Account Name is too long, so if you add a padding-right:0; to that element, it will have enough room.
Check my snippet in its full-page mode.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
);
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
#ml-2{
padding-right:0;
}
<!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="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label" id="ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="scripts/script.js"></script>
</body>
</html>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Trying to get the card vertically centered between header and footer, and the card must be in second floor since header and footer are in the first floor, to avoid responsive wrong behavior, like over impression of the card over header and footer.
This is my current situation: LINK
Im newer of bootstrap, every suggestion it is appreciate.
.card {
margin: 0 auto;
/* Added */
float: none;
/* Added */
margin-bottom: 10px;
/* Added */
}
footer {
position: fixed;
height: 55px;
bottom: 0;
width: 100%;
background-color: #343A40;
vertical-align: middle;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="/img/unknow16.png" height="32" alt="Unknow TV">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Sign In <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class=" w-50 card ">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username">
<!-- <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">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<!-- <div class="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">Submit</button>
</form>
</div>
</div>
<footer class="footer text-center">
<p> </p>
<div class="container ">
<span class="text-muted">
© <script type="text/javascript">
document.write("2018 - "+ new Date().getFullYear());
</script>2018 - 2020 Weyland-Yutani</span>
</div>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class=" w-50 card ">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username">
<!-- <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">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<!-- <div class="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">Submit</button>
</form>
</div>
</div>
CSS:
.card { <!-- Delete existing card code -->
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This should fix it exactly in the center just delete the existing code to fix it horizontally center to remove some problems.
Try adding a new element in the DOM, make the card a child of it and add the following styles, using Flexbox Model this is easily achievable.
Of course, remove the br tags as they are not needed.
.card-container {
display: flex;
align-items: center;
height: calc(100% - 110px);
justify-content: center;
}
<div class="card-container">
<div class="w-50 card">
...
</div>
</div>
Good luck!
thanks to suggestions, now the card is centered, the dropdown never shift content anymore, but with less resolutions, the card is over the haeder, I need to place it in second floor and the header one the first one
I have the following login page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
And my problem is that the login form is not too center as I want to as this image shows.
What I want to do is to display like that:
So do you know how to move the whole login form towards the center I tried the bootstrap's d-flex align-items-center justify-content-center class combination and somehow it does center but the flexbox is as height as my login form.
So my guess is on how I can make the flexbox take over the whole remaining height. DO you know how to do that?
You should give height to your container-fluid div in view-port
height: calc(100vh - 60px);
60px is your header height (View in full-screen mode of snippet)
.custom {
height: calc(100vh - 60px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="custom container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
I am having an issue where my dropdown menu is not working. Like sometimes when I change something in my css or html and refresh the page it will work once but then never again. Can't for the life of me figure out why. I'm referring to the ul with the class of nav navbar-nav pull-right.
Hopefully pick the brains of you guys for some assistance.
Here is the code for my page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="Richmond Movie Club" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end responsive-dropdown -->
RichmondMC
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Movie Database</li>
<li>Gallery</li>
<li>Ratings</li>
</ul>
<!-- end navbar-nav -->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Register New User</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-play"></span> Sign In</li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end dropdown -->
</ul>
<!-- end myAccount-dropdown -->
</div>
<!-- end nav-collapse -->
</div>
<!-- end container -->
</div>
<!-- end navbar -->
<div class="modal fade" id="registerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
</div>
<!-- end modal-header -->
<div class="modal-body">
<h5>Enter the New Members details including username/password to complete registration</h5><br>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-lg-4 control-label">First Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-lg-4 control-label">Last Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
</form>
<!-- end form -->
</div>
<!-- end modal-body -->
<div class="modal-footer">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">×</span></button>
<h4>Success!</h4>
<p>New user registered successfully</p>
</div><!-- end alert -->
</div>
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->
</div>
<!-- end modal -->
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>
window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>
EDIT
Forgot to include that these are .php files.
This is my header.php and I include it into all my pages with a
<?php include "header.php" ?>
if that makes any difference.
It is working fine in the below snippet. There must be some problem in your custom css or js file which is coming in the way of the dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="Richmond Movie Club" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end responsive-dropdown -->
RichmondMC
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Movie Database</li>
<li>Gallery</li>
<li>Ratings</li>
</ul>
<!-- end navbar-nav -->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Register New User</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-play"></span> Sign In</li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end dropdown -->
</ul>
<!-- end myAccount-dropdown -->
</div>
<!-- end nav-collapse -->
</div>
<!-- end container -->
</div>
<!-- end navbar -->
<div class="modal fade" id="registerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
</div>
<!-- end modal-header -->
<div class="modal-body">
<h5>Enter the New Members details including username/password to complete registration</h5><br>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-lg-4 control-label">First Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-lg-4 control-label">Last Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
</form>
<!-- end form -->
</div>
<!-- end modal-body -->
<div class="modal-footer">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">×</span></button>
<h4>Success!</h4>
<p>New user registered successfully</p>
</div><!-- end alert -->
</div>
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->
</div>
<!-- end modal -->
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>
window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>
I have a landing section in my HTML and I have icons below the landing. I can't figure out why the icons keep appearing in my landing div. I've checked for unclosed tags numerous times. I think I need another pair of eyes. Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Fitness Food Tracker</title>
<script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
<script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="brand" alt="Brand" src="assets/styles/apple.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<i class="material-icons">account_circle</i> <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sign Up</li>
<li>Sign In</li>
<li class="hidden" id="nav-li-user-stats">Update User Stats</li>
<li class="hidden" id="nav-li-sign-out">Sign Out</li>
<li class="hidden" id="nav-li-change-password">Change Password</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class='landing'>
<!--- Sign Up Form ---->
<form class="form-horizontal hidden" id=sign-up-form>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="credentials[password]" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" name="credentials[password_confirmation]" class="form-control" id="inputPassword3" placeholder="Password Confirmation">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign Up</button>
</div>
</div>
</form>
<!-- Update User -->
<form id='update-user-form' class='hidden'>
<div class="form-group row">
<label for="weight-input" class="col-sm-2 form-control-label">Weight</label>
<div class="col-sm-10">
<input type="" class="form-control" id="weight-input" name="user[weight]" placeholder="Enter Your Weight">
</div>
</div>
<div class="form-group row">
<label for="height-input" class="col-sm-2 form-control-label">Height</label>
<div class="col-sm-10">
<input type="" class="form-control" id="height-input" name="user[height]" placeholder="Enter Your Height">
</div>
</div>
<div class="form-group row">
<label for="age-input" class="col-sm-2 form-control-label">Age</label>
<div class="col-sm-10">
<input type="" class="form-control" id="age-input" name="user[age]" placeholder="Enter Your Age">
</div>
</div>
<div class="form-group row">
<label for="gender-input" class="col-sm-2 form-control-label">Gender</label>
<div class="col-sm-10">
<input type="" class="form-control" id="gender-input" name="user[gender]" placeholder="Enter Your Gender (m or f)">
</div>
</div>
<div class="form-group row">
<label for="activity-input" class="col-sm-2 form-control-label">Activity Level</label>
<div class="col-sm-10">
<input type="" class="form-control" id="activity-input" name="user[activity_level]" placeholder="Enter Acitivty Multiplier">
</div>
</div>
<button type="submit" class="btn btn-primary auth-form-element">
Submit Your Info
</button>
</form>
<!-- Sign In form -->
<form class="form-horizontal hidden" id=sign-in-form>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="credentials[password]" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign In</button>
</div>
</div>
</form>
<div class="jumbotron">
<div class="container">
<h1 class='landing-header'>Fitness Food Tracker</h1>
<h3>An App For Tracking Your Calories and Maintaining Your Physique.</h3>
</div>
</div>
</div>
<!---Below Landing --->
<!-- Food Search-->
<div class="col-md-6 search-input hidden">
<label>Search For Food</label>
<div class="input-group">
<input type="text" id='search-input-field' class="form-control" placeholder="Search for foods">
<span class="input-group-btn">
<button class="btn btn-primary" id='food-search-btn' type="button">Search!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<!-- Meal Builder Display-->
<div id="meal-content" class='hidden'>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Search Results</li>
<li>Your Meal</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div class="search-table table-responsive table-bordered hidden">
</div>
</div>
<div class="tab-pane" id="orange">
<div class="meal-table table-responsive table-bordered hidden">
<table class="table table-condensed">
<tr>
<th class='hidden'>id</th>
<th>Description</th>
<th>Calories</th>
<th>Grams Per Serving</th>
<th>Fat Mono</th>
<th>Fat Poly</th>
<th>Fat Sat</th>
<th>Carbs</th>
<th>Sugar</th>
<th>Fiber</th>
<th>Protien</th>
<th>Sodium</th>
<th>Cholesteral</th>
</tr>
</table>
</div>
<label> Meal Macro Totals</label>
<div class="meal-total-table table-responsive table-bordered hidden">
<table class="table table-condensed">
</table>
</div>
</div>
</div>
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">create</i><br>
Log Your Meals
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">fitness_center</i><br>
Maintain Your Fitness
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">track_changes</i><br>
Track Changes Over Time
</div>
</body>
</html>
EDIT:
Here is my CSS:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
#import '~bootstrap-sass/assets/stylesheets/bootstrap';
$orange: #EB8921;
$lite-orange: #F5AD28;
$white: #FFFFFF;
$gray: #2E2F2F;
$darker-gray: #1E1E1E;
$black: #000000;
body {
font-family: 'Montserrat', sans-serif;
background-color: $gray;
color: $lite-orange;
};
.landing {
background-image: url("http://wallpapercave.com/wp/EnDM8YS.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
min-width: 100%;
margin-top: 5%;
height: 600px;
}
form {
width: 40%;
margin: 0 auto;
}
#meal-content {
margin-top: 8%;
}
.landing-header {
color: $orange;
}
.icon-div {
text-align: center;
background-color: $gray;
}
.icon {
padding-top: 10%;
font-size: 8em;
color: $white;
margin-bottom: 5%;
}
.jumbotron {
background: rgba(0, 0, 0, 0);
text-shadow: .25px 0 0 $black, -.25px 0 0 $black, 0 .25px 0 $black, 0 -.25px 0 $black, .25px .25px $black;
padding-top: 10%;
padding-bottom: 30%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 10%;
}
.btn-primary {
background: $orange;
border-color: $black;
}
.table-responsive {
max-height: 400px;
overflow: auto;
font-size: .75em;
margin-left: 5%;
margin-right: 5%;
background-color: $darker-gray;
margin-bottom: 10%;
}
.input-group-sm {
min-width: 50px;
}
.search-input {
margin-bottom: 10%;
padding-top: 10%;
float: none;
margin-right: auto;
margin-left: auto;
}
.add-food-btn {
border-radius: 100%;
}
.table {
border: $black;
}
.a.dropdown-toggle {
padding: 0 !important;
}
.brand {
height: 100%;
margin: 5%;
}
.navbar-brand {
padding: 0;
margin-bottom: 5%;
}
The problem here is that the icons end up behind the navbar because the navbar is fixed. Simply adding padding-top to the body should create some whitespace under the navbar and fix your problem.
I want to center a form containing two inputs(username and password):
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
but when I run the page, the form isn't in the center of the page. I added in the style.css:
.form-horizontal{
display:block;
margin-left:auto;
margin-right:auto;
}
but that didn't work.
To center a div on the page, you need to set the width of your container, then apply margin:0 auto; to it and it will center left and right on the page.
.form-horizontal{
display:block;
width:50%;
margin:0 auto;
}
If you want to center text, just add text-center to the class of the div your text is in. Bootstrap will do the rest.
Edit 1
<div class="contact-form">
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
Slim Hmidi Hi there, You were close with your class of .form-horizontal.
Using this will center the form in the middle of the page.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.
Here is a screenshot, the blue div that holds the form is centered horizontally.
Here is the form with the classes in the form changed to fill and work on all screen sizes.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to center a form using Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 300px;
padding-top: 15px;
background-color: darkorange;
}
.block2 {
min-height: 160px;
padding-top: 15px;
}
.center {
position: absolute;
/* top: 0;
bottom: 0; */
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="row col-xs-6 block2 bg-primary center">
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" >
<label class="control-label col-sm-3" for="username">username<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">password<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Wrap the whole form in <div class="container">your form HTML</div>.
Like this: http://codepen.io/anon/pen/pJLrOq. Code centers form container to the middle of a site. Edit a CSS and input text's classes to get the layout you want.
You can add text-align: center; in css .