Login page Using Bootstrap and JavaScript

Report · Jan 29, 2018

Greetings. I am creating a Business Department website for my school and I have created a login page. I am having trouble with several things. Firstly, how could I center the image in the form of a circle at the top of the login area? Secondly, how could I put the login area at the center of the page? Thirdly, how could I make this apply to the mobile version of the website? Fourthly, how could i insert JavaScript to this so that the login would work? P.S. I am very new to HTML, CSS, Bootstrap, and JavaScript (I have been only learning for a couple of months). It would be greatly appreciated if you could explain your code simplistically.

Here is my code (forgive me if there is irrelevant code in this):

<!DOCTYPE html>

<head>

<title>Business Department</title>

<style>

.navbar {

margin-bottom: 0;

border-radius: 0;

/* background-color; he put it purple make it stay gray or change to dark gray */

color: #474747; /* text color */

padding: 1% 0;

font-size: 1.2em; /* This increases text font */

border: 0; /* the black thing */

}

.navbar-brand {

float: left;

min-height: 55px;

padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a {

color: #D5D5D5; /* text color?? */

}

.carousel-caption { /* this moves the text in the sliders up */

top: 50%;

transform: translateY(-50%);

text-transform: uppercase;

}

.btn { /* get started button */

font-size: 18px;

color: #FFF;

padding: 12px 22px;

background: #000000;

border: 2px solid #FFF;

}

.container {

margin-top: 30px;

margin-bottom: 26px;

}

#icon {

max-width: 200px; /* to change the size of 3 images */

margin: 1% auto;

margin-top: 30px;

margin-bottom: 26px;

}

footer { /* to design footer (no text) */

width: 100%;

background-color: #222222;

padding: 5%;

color: #FFF; /* text color */

}

.fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

}

.fa:hover {

color: #D5D5D5;

text-decoration: none;

}

@media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */

.carousel-caption {

display: none;

}

#icon {

max-width: 150px;

}

h2 { /* h4 size in mobile */

font-size: 1.7em;

}

.container1 { margin: 4% auto;

}

body{

margin: 0;

padding: 0;

background: url(img/Tower2.jpg);

background-size: cover;

background-position:center;

font-family: sans-serif;

}

.login-box{

width: 320px;

height: 420px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

top: 50%;

left:50%;

position:absolute;

transform: translate(-50%, -50%);

box-sizing: border-box;

padding: 70px 30px;

}

.avatar{

width: 100px;

height: 100px;

border-radius: 50%;

position: absolute;

top: -50px;

left: calc(50% - 50 px);

}

h1{

margin: 0;

padding: 0 0 20px;

text-align: center;

font-size: 22px;

}

.login-box p{

margin: 0;

padding: 0;

font-weight: bold;

}

.login-box input{

width: 100%;

margin-bottom: 20px;

}

.login-box input[type="text"], input[type="password"]

{

border: none;

border-bottom: 1 px solid #fff;

background: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 16px;

}

.login-box input[type="submit"]

{

border: none;

outline: none;

height: 40px;

background: #1c8adb;

color: #fff;

font-size: 18px;

border-radius: 20px;

}

.login-box input[type="submit"]:hover

{

cursor: pointer;

background: #39dc79;

color: #000;

}

.login-box a{

text-decoration: none;

font-size: 14px;

color: #fff;

}

.login-box a:hover

{

color: #39dc79;

}

</style>

</head>

<body>

</button>

<a class="navbar-brand" href="indexReference.html"><img src="img/w3newbie.png"></a>

</div>

<li class="active"><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</nav>

</ol>

<h1>impact the future</h1>

<button type="button" class="btn btn-default">Learn More</button>

</div>

</div>

<h1>Aspiring to becoming a successful entrepreneur?</h1>

</div>

<h1>having trouble with your business assignment?</h1>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

<h1>Impact the Future</h1>

<form>

<p>Username</p>

<p>Password</p>

<a href="#">Forget Password</a>

</form>

</div>

<h3>Contact Us</h3>

<h4>Our Address and contact info here.</h4>

</div>

<h3>Connect</h3>

</div>

</div>

</footer>

</body>

</html>

Report · Jan 29, 2018

I will leave your bootstrap specific questions for someone who uses bootstrap to answer.

Your question about creating the javascript log-in though is a little more complicated, because if you wish javascript code to be used for a secure section of your site, then you will have to have a javascript based server-side set-up.

Most users who use Dreamweaver use a php/mysql server side and database set-up, (check with your server admin or provider for what you have available). If you have angular.js or node.js on your server then you can use javascript for a secure section of your site, but Dreamweaver would not be the best program to use for this, (you could still use bootstrap for your framework) as it has very little support for javascript on the server and is missing all the essential de-bug tools you would require.

Report · Jan 29, 2018

Making a basic log-in form is the easy part.

Creating a secure backend system is much more advanced. Ask your IT dept or web hosting provider which server-side scripts and databases you can use.

Basic form on mobile.

Desktop:

Bootstrap Code:

<!doctype html>

<head>

<title>Bootstrap Log-in Form</title>

<style>

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin-top: 25%;

padding: 2%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

<form>

<label for="Email">Email address</label>

</div>

<label for="Password">Password:</label>

</div>

</form>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 29, 2018

Im going to gate-crash your code a bit Nancy because I feel like gate-crashing tonight!!! and position that image circle and the login panel in the center of the window.

<!doctype html>

<head>

<title>Bootstrap Log-in Form</title>

<style>

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

.login {

display: flex;

justify-content: center;

align-items: center;

position: relative;

height: 100vh;

}

.login .img-circle {

display: block;

width: 150px;

margin: -80px auto 0 auto;

}

.login h3 {

margin-top: 20px;

}

.login form {

padding: 3%;

background: rgba(0,0,0,0.7);

color: #FFF;

max-width: 500px;

width: 50%;

}

@media screen and (max-width: 768px) {

.login form {

width: 70%

}

@media screen and (max-width: 480px) {

.login form {

width: 90%;

}

</style>

</head>

<body>

<form>

<label for="Email">Email address</label>

</div>

<label for="Password">Password:</label>

</div>

</form>

</div>

</body>

</html>

Report · Jan 29, 2018

If I wanted to use Flexbox, I think I would use Bootstrap 4 instead of 3.7. But what you have is acceptable.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 29, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
If I wanted to use Flexbox, I think I would use Bootstrap 4 instead of 3.7. But what you have is acceptable.
Nancy

Yeah I'd get rid of the Bootstrap stuff normally

Report · Jan 30, 2018

Hello, I tried your code. It's a cool design but when I try to view it in mobile, the login area moves without staying in it's original spot. For example, when I minimize the screen, it goes on top of the footer or navigation bar. http://prntscr.com/i7z0pr http://prntscr.com/i7z0uj

Report · Jan 31, 2018

guest48289919 wrote
Hello, I tried your code. It's a cool design but when I try to view it in mobile, the login area moves without staying in it's original spot. For example, when I minimize the screen, it goes on top of the footer or navigation bar. http://prntscr.com/i7z0pr http://prntscr.com/i7z0uj

Then you aint using the code I provided you're using some crap you produced, probably based on what I provided

Report · Jan 30, 2018

Hello, I tried your code. How can I put the login spot in the center of the page (in between the navigation and footer) with the background image behind it?

I want to put the login area on top of this image.

Here is the code:

<!DOCTYPE html>

<head>

<title>Business Department</title>

<style>

.navbar {

margin-bottom: 0;

border-radius: 0;

/* background-color; he put it purple make it stay gray or change to dark gray */

color: #474747; /* text color */

padding: 1% 0;

font-size: 1.2em; /* This increases text font */

border: 0; /* the black thing */

}

.navbar-brand {

float: left;

min-height: 55px;

padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a {

color: #D5D5D5; /* text color?? */

}

.carousel-caption { /* this moves the text in the sliders up */

top: 50%;

transform: translateY(-50%);

text-transform: uppercase;

}

.btn { /* get started button */

font-size: 18px;

color: #FFF;

padding: 12px 22px;

background: #000000;

border: 2px solid #FFF;

}

.container {

margin-top: 30px;

margin-bottom: 26px;

}

#icon {

max-width: 200px; /* to change the size of 3 images */

margin: 1% auto;

margin-top: 30px;

margin-bottom: 26px;

}

footer { /* to design footer (no text) */

width: 100%;

background-color: #222222;

padding: 5%;

color: #FFF; /* text color */

}

.fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

}

.fa:hover {

color: #D5D5D5;

text-decoration: none;

}

@media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */

.carousel-caption {

display: none;

}

#icon {

max-width: 150px;

}

h2 { /* h4 size in mobile */

font-size: 1.7em;

}

.container1 { margin: 4% auto;

}

body {

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin-top: 25%;

padding: 2%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

</button>

<a class="navbar-brand" href="indexReference.html"><img src="img/w3newbie.png"></a>

</div>

<li class="active"><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</nav>

</div>

</div>

</div>

<form>

<label for="Email">Email address</label>

</div>

<label for="Password">Password:</label>

</div>

</form>

</div>

<h3>Contact Us</h3>

<h4>Our Address and contact info here.</h4>

</div>

<h3>Connect</h3>

</div>

</div>

</footer>

</body>

</html>

Report · Jan 31, 2018

Do not place a login form over a Carousel slider. It will create problems. Use a background image on the BODY.

REVISED HTML & CSS CODE:

<!doctype html>

<head>

<title>Business Department</title>

<style>

.navbar {

margin-bottom: 0;

border-radius: 0;

/* background-color; he put it purple make it stay gray or change to dark gray */

color: #474747; /* text color */

padding: 1% 0;

font-size: 1.2em; /* This increases text font */

border: 0; /* the black thing */

}

.navbar-brand {

float: left;

min-height: 55px;

padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a { color: #D5D5D5; /* text color?? */ }

.btn { /* LOGIN button */

font-size: 18px;

color: #FFF;

padding: 12px 22px;

background: #000000;

border: 2px solid #FFF;

}

#icon {

max-width: 200px; /* to change the size of 3 images */

margin: 1% auto;

margin-top: 30px;

margin-bottom: 26px;

}

footer {

width: 100%;

background-color: #222;

padding: 5%;

color: #FFF;

}

.fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

}

.fa:hover {

color: #D5D5D5;

text-decoration: none;

}

@media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */

#icon { max-width: 150px; }

h2 { /* h4 size in mobile */ font-size: 1.7em; }

}

body {

height: 100%;

/**FULL SCREEN BACKGROUND IMAGE**/

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin: 15% auto 15% auto;

padding: 5%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</nav>

<label for="Email">Email address</label>

</div>

<label for="Password">Password:</label>

</div>

</form>

</div>

<h3>Contact Us</h3>

Our Address and contact info here.

</address>

</div>

<h3>Connect</h3>

</div>

</div>

</footer>

</body>

</html>

Keep in mind this is only a form. It does not do anything until you create a PHP script to make it work.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 29, 2018

How many user IDs and passwords will you need?

If the same user ID and password is used by everyone, you can simply password protect the site folder on your server with C-Panel or Plesk.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 29, 2018

Hello, sorry for the late response but I will need 3 usernames and passwords. They will just be used to access a web page where they can download any web page and edit its code.

Report · Jan 30, 2018

Use .htaccess and .htpasswd as per https://davidwalsh.name/password-protect-directory-using-htaccess

Wappler, the only real Dreamweaver alternative.

Login page Using Bootstrap and JavaScript

1 Correct answer