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.
Related
This is a bootstrap navigation menu which is placed above the main menu (fixed), I'm not sure what the problem exactly is! I want it to be in one row.
This is the fixed-top navbar:
and this is how the navbar that I want it to be above it looks, it covers the fixed-top navbar and it doesn't show properly:
Below is the navigation menu code:
<nav class="navbar justify-content-between">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Already have an account?</p>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b><span class="caret"></span>
</a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">Login
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">
Forget the password ?
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
I appreciate your help.
CSS
img{
width: 100%;
height: 500px;
}
.dropdown-menu{
background-color: #49f357;
}
.dropdown-menu{
right: 0 !important;
}
.dropdown-toggle{
background-color:#2de03c;
}
.dropdown-toggle > .active { color: aqua;}
.dropdown-toggle:hover {background-color: #0eb41c;}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: white!important; background-color: #e7e7e7!important;}
.dropdown-item{
background-color: #2de03c;
}
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.textwhite{
color:white ;
}
.collapse ul.navbar-nav> .nav-item > a {
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
.nav-collapse.collapse {
display: none !important;
height: auto !important;
overflow: visible !important;
}
.navbar{
position: sticky
}
HTML
<div class="d-none d-xl-block p-0">
<nav class=" navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #10c720;">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mb-2" id="navbarsExample04">
<ul class="navbar-nav">
<li class="nav-item active" style="margin-left: 150px;">
<a routerLink="/Home" class="nav-link ml-2 mt-2 mr-2 fontsize" href="#">HOME <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-2 mt-2 mr-2">
<a routerLink="/About" class="nav-link fontsize">ABOUT</a>
</li>
<li *ngIf='isMale' class="nav-item ml-2 mt-2">
<a routerLink="/Bride" class="nav-link fontsize">ABOUT</a>
</li>
<li *ngIf='isFemale' class="nav-item ml-2 mt-2">
<li class="nav-item ml-2 mt-2 mr-2">
<a routerLink="/Contact" class="nav-link fontsize">CONTACT</a>
</li>
</ul>
<div class="dropdown text-center border border-danger ">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="row border border-primary">
<div class="dropdown-menu dropdown-menu-center border border-danger" aria-labelledby="dropdownMenuButton">
<div class="">Login
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address"
required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"
required>
<div class="help-block text-right">
Forget the password ?
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">New here ? <b>Join Us</b>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Output
I want to show my login/Signup tabs and their relative form in the middle of the page and also want to small textfileds like col-md-12 to col-md-4 but when I use style="margin-left=200px;" the form will be in the middle but in mobile mode it is not showing so I removed style="margin-left=200px;"
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<br>
<h4 class="text-center">User Panel</h4>
<hr>
<!-- Nav tabs -->
<ul class="nav nav-tabs form-signin" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">SignUp</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<p>Signup</p>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</div>
</div>
I want to produce below output the tabs and form in the middle of the page but I am not able to do it. Kindly check below image what I want. Also when I click on SignUp everything is messed up.
Center the ul with the class-name nav-tabs by adding the class-name justify-content-center. Additionally, touch the active tab and the gray border by adding the class-name pb-0 to the nav-tabs.
So, it is <ul class="nav nav-tabs form-signin justify-content-center pb-0" role="tablist"> instead of <ul class="nav nav-tabs form-signin" role="tablist">.
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h4 class="text-center">User Panel</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs form-signin justify-content-center pb-0" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">SignUp</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</div>
</div>
You can use the following solution using justify-content-center on the element.
<ul class="nav nav-pills mb-3 justify-content-center">
Just use the bootstrap class "justify-content-center" in your element as
<ul class="nav nav-tabs form-signin justify-content-center" role="tablist">
link to the jsbin
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>
I have the following Bootstrap 3.x modal dialog:
<!-- Modal dialog -->
<div class="modal fade in" id="dlgUsr" tabindex="-1" role="dialog" aria-labelledby="dlgTitle">
<div class="modal-dialog modal-lg modal-dlg-full-haw" role="document">
<div class="modal-content" style="height: 100%;">
<div class="modal-dlg-drag-bar"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dlgTitle" class="title">Title</h3>
</div>
<div class="modal-body">
<? require 'some_server_generated_code.php'; ?>
</div>
<div class="modal-footer">
Close
Save
</div>
</div>
</div>
</div>
The div with id modal-body contains server generated HTML code. And here is the CSS:
.modal-dlg-full-haw .h1,
.modal-dlg-full-haw .h2,
.modal-dlg-full-haw .h3,
.modal-dlg-full-haw h1,
.modal-dlg-full-haw h2,
.modal-dlg-full-haw h3 {
margin-top: 0;
margin-bottom: 10px;
}
.modal-dlg-full-haw {
display: block;
position: absolute;
height: auto;
width: auto;
bottom: 0;
top: 0;
left:0;
right:0;
margin: 10px;
}
.modal-dlg-full-haw .modal-content {
height: 100%;
width: 100%;
margin-bottom: 10px;
}
.modal-dlg-full-haw .modal-header {
padding: 0 15px 0 15px;
}
.modal-dlg-full-haw .modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.modal-body .tab-content {
padding-top: 10px;
}
.modal-content .modal-dlg-drag-bar {
height: 15px;
cursor: -webkit-grab; cursor: -moz-grab;
}
.modal-content .modal-dlg-drag-bar:active {
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
Now, here is the rendered code (with the server side part too):
<div class="modal fade in" id="dlgUsr" tabindex="-1" role="dialog" aria-labelledby="dlgTitle" style="display: block; padding-right: 15px;">
<div class="modal-dialog modal-lg modal-dlg-full-haw" role="document">
<div class="modal-content" style="height: 100%;">
<div class="modal-dlg-drag-bar"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dlgTitle" class="title">User</h3>
</div>
<div class="modal-body">
<div class="tabbable">
<form action="#" method="post" id="formUsr" class="formo">
<ul class="nav nav-tabs" id="tabUsr">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabGen">
<input type="hidden" id="usr_id" value="2">
<div class="">
<div class="row">
<div class="col-md-6 form-group">
<label class="control-label" for="usr_nick">Nick</label>
<input type="text" value="" id="usr_nick" class="validate[required] form-control" name="usr[nick]">
</div>
<div class="col-md-6 form-group">
<label class="control-label" for="usr_pwd">Password</label>
<input type="text" value="" id="usr_pwd" class="validate[required] form-control" name="usr[pwd]">
</div>
</div>
</div>
<div class="">
<div class="row">
<div class="col-md-6 form-group">
<label class="control-label" for="usr_last_name">Last Name</label>
<input type="text" value="" id="usr_last_name" class="form-control" name="usr[last_name]">
</div>
<div class="col-md-6 form-group">
<label class="control-label" for="usr_first_name">Name</label>
<input type="text" value="" id="usr_first_name" class="form-control" name="usr[first_name]">
</div>
</div>
</div>
<div class="">
<div class="row">
<div class="col-md-6 form-group">
<label class="control-label" for="usr_email">E-Mail</label>
<input type="text" value="" id="usr_email" class="form-control" name="usr[email]">
</div>
<div class="col-md-6 form-group">
<label class="control-label" for="usr_tel">Telephone</label>
<input type="text" value="" id="usr_tel" class="form-control" name="usr[tel]">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
Close
Edit
</div>
</div>
</div>
</div>
It looks like this:
If I resize the height of the browser's window:
You can see that the dialog's footer overlaps with the modal-body. Here is another screenshot:
How can I make that modal-body (which contains the tabs and the form with inputs) scrollable while maintaining the CSS I already have and the footer sticky at the bottom with position absolute as I have already done?
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 .