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>
Related
I'm currently working on a project that involves a login and register form. I decided to use bootstrap pills for this matter.
This is login and register html form
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
<!-- Register button -->
<div class="text-center">
<p>Not a member? <a id="reg" href="">Register</a></p>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="tab-register">
<form action="/register" method="post" onchange="onFormUpdate()">
<br>
<!-- Name input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerName" name="registerName" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="registerName">Full Name</label>
</div>
<!-- Username input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" name="registerUsername" autocomplete="off" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Email input -->
<div class="form-outline mb-4 register">
<input type="email" id="registerEmail" name="registerEmail" autocomplete="off" class="form-control" />
<label class="form-label" for="registerEmail">Email</label>
</div>
<!-- Password input -->
<div id="pass" class="form-outline mb-4 register">
<input type="password" id="registerPassword" name="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Confirm Password input -->
<div id="confirm-pass" class="form-outline mb-4 register">
<input type="password" id="registerConfirmPassword" name="registerConfirmPassword" class="form-control" />
<label class="form-label" for="registerConfirmPassword">Confirm Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="confirmPasswordHelp" class="text-danger"></small>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms and conditions
</label>
</div>
<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
<!-- Login button -->
<div class="text-center">
<p>Already a member? <a id="log" href="">Log in</a></p>
</div>
</form>
</div>
</div>
<!-- Pills content -->
As you can see, the form is stretched over the page. So I tried to minimize it using bootstrap w-50 as you can see below
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 w-50 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
Now another problem arises. The from is left aligned. I searched and came to a few answers but most of them were using flex and grids. I couldn't use it in my code. I didn't find anything about nav pills and nav content.
Any help to center the form is appreciated.
Edit: I tried using justify-content-center and it didn't work also.
You could use the .mx-auto class with your .w-50 class, it will horizontally center your form
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50 mx-auto" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 w-50 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
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 switched from msn bootstrap to bootstrap which i uploaded manually.
i am doing this project on cloud 9.
when the screen is small enouth the nav bar has a button on the right,
which drops the navbar down and displays my other links
which now does not work.
it might be the jquery but i have no idea if i put it in here or if i did so correctly
any help is greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> inclass-project </title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--start of nav-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Adrw4's Site</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="active">Contact</li>
<li class="nav-item">Test</li>
</ul>
</div>
</div>
</nav>
<!--end of nav section-->
<section class="hero-section">
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">Usa</option>
<option value="canada">Canada</option>
<option value="england">England</option>
<option value="other">Other</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
<!-- start of footer-->
<footer class="footer-container">
<div class="social-media-container left">
</div>
<div class="contact-container left">
<span>dsafdsf</span>
<span class="address">fgfggf</span>
<p>Copyright © 2017 Adrw4 All rights reserved.</p>
</div>
<div class="social-media-container right">
</div>
</footer>
<!--end of footer-->
</body>
</html>
Change
data-target="navbar-collapse"
to
data-target=".navbar-collapse"
I used your navigation in here:
http://jsfiddle.net/DTcHh/
I Have included bootstrap tabs in my project.But the problem I am facing is that when I click on the tabs the content are getting changed,but the tab is not getting active.ie always the first tab is active irrespective of the click.
How can I get rid of this?
Code is given below.
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Trip Overview
</li>
<li role="presentation">Itinerary
</li>
<li role="presentation">Cost
</li>
<li role="presentation">Terms & Condition
</li>
<li role="presentation">Inquiry
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<span>{{model.overview}}</span>
</div>
<div role="tabpanel" class="tab-pane" id="itinerary">
<div ng-repeat="itenary in model.itenary.long">
<p>{{itenary.name}}</p>
<p>{{itenary.content}}</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="cost">Cost details will be uploaded soon</div>
<div role="tabpanel" class="tab-pane" id="ta">
<h3>Terms & Conditions</h3>
<div ng-repeat="term in model.tna.terms">
<ul>
<li>{{term}}</li>
</ul>
</div>
<h3>Payments</h3>
<div ng-repeat="payment in model.tna.payment">
<ul>
<li>{{payment}}</li>
</ul>
</div>
<h3>Cancellation Policy</h3>
<div ng-repeat="cancelPolicy in model.tna.payment">
<ul>
<li>{{cancelPolicy}}</li>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="book">
<div id="contact-form" class="clearfix">
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="/home">
<label for="name">Name: <span class="required">*</span>
</label>
<input type="text" id="name" name="name" value="" placeholder="<Your Name>" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span>
</label>
<input type="email" id="email" name="email" value="" placeholder="<your mail>" required="required" />
<label for="telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" value="" />
<label for="enquiry">Enquiry:{{model.name}}</label>
<label for="message">Message: <span class="required">*</span>
</label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Send" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</div>
</div>
these are the imported libraries inn my project
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
I am trying to make a form with 2 columns using bootstrap. The fields name and street appear side by side (large screen) and no problem but on second rowzip code is not vertical aligned with City because zip code has 2 edit boxs. If i use just one edit box in zip code everything looks fine but if i use two edit boxes an extra pading top appears. Why?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<legend style='text-align:center'>Delivery Address</legend>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Name: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Street: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>City: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>Zip code: (*)</span><br>
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" />
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</section>
To fix this problem I just took out the font-size:20px out of problematic div element. As to why this seems to have fixed the issue I cannot say because you have that in the other div elements as well and it doesn't seem to be a problem. I will say however that the font-size attribute does not need to be specified in the div elements as you are giving font-size to each of the elements individually, unless of course you were going to add or do have other elements that it are being used that are not in the code above. I also checked taking out the font-size attribute out of the other div elements and it has no negative effect.
I could not get the code to show what you asked about re padding top etc. I removed one of the zip inputs... still no difference. (using chrome here).
Here is the Fiddle.
I removed all of the inline styles so the code is easier to read/follow.
I removed all of those blank divs you look to be using to offset/fill. That sort of blank divs like that all bar the most top can end up floating.
I replace this with col-sm-offset-1 as you will see in the row.
I reworked the zip and city cols here.
Is this what you were looking for when you asked about vertically align the zip and the city?
I wasn't to sure.
Image is of large screen view.
<!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>Starter Template for 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;
}
.space {
margin-top: 2%;
margin-bottom: 2%;
}
.address {
font-size: 20px;
text-align:center;
}
.inputs {
width:100%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.zip {
width:14%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.labels {
font-size: 20px;
padding:0px;
padding-left:0px;
}
</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 space"></div>
<div class="container col-lg-12">
<H1>Hello</H1>
<P>Sample text here.</P>
<section id="Delivery" class="Delivery-section">
<div class="container">
<div class="row">
<!--<div class="col-sm-1">
</div>-->
<div class="col-sm-10 address" >
<legend>Delivery Address</legend>
</div>
<!--<div class="col-sm-1">
</div> -->
</div>
<div class="row col-sm-10 col-sm-offset-1">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-5">
<span class='labels'>Name: (*)</span><br>
<input class='inputs' type="text" name="name" id="name" value='' />
</div>
<div class="col-sm-5">
<span class='labels'>Street: (*)</span><br>
<input class='inputs' type="text" name="street" id="street" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
<!--</div>-->
<div class="row col-sm-5">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-12">
<span class='labels'>City: (*)</span><br>
<input class='inputs' type="text" name="city" id="city" value='' />
</div>
<div class="col-sm-12">
<span class='labels'>Zip code: (*)</span><br>
<input class="zip" type="text" name="cp1" id="cp1" value='' />
<input class="zip" type="text" name="cp2" id="cp2" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
</div>
</div>
</div>
</section>
</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>
Added to this post
Using your original code as is this is what I see in a large view, both inputs are aligned.