Login Page Template Bootstrap 4

In our daily web design work it happens often that we find a good free resource, for example a form or a beautiful animated button, and we immediately think to integrate it in one of our sites.

The login page available with the Adomx Bootstrap 4 admin template features a clean and simple design. There are two text fields, Remember password, and Forgot Password options. In addition to that, you will also be able to find a Create New button that will help new users to easily create a new account.

Or it can happen that a client has purchased a premium template for his site and wants to add a login and a registration page.

Bootstrap Sign In Page

So you search on the web and find a really nice and free login form, you download it and are ready to integrate it in your client's template.

What happens oftentimes is that you find it difficult to integrate the form in your project, or it lacks support from the creator. This also happens with some of my free resources as you can see in some users' comments on this site.

1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 login form with background image snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.
2. Find Latest Free Bootstrap 4 Website Template to launch awesome website for any business retail, eCommerce, shops any online business with our Free HTML Template.

In today's tutorial we'll do something very similar. We'll take a free login form here and integrate it in the Lancar Bootstrap template, to create a beautiful login page with fullscreen background.

And if I see that the tutorial is useful to you, in the future I'll do more of these tutorials for my other free forms and resources.

Let's begin!

1. Introduction

Before we begin let's see the end result that we're going to achieve:

Do you like it? I hope so!

Now, with the live demo out of the way, you can choose to use this tutorial in two ways:

• you can follow it and learn how to integrate the form in your project;
• or you can get the ready-to-use version included in the Lancar template and save some time.

If you've chosen the first option, downloadthese free login templates, extract the .zip package and choose one of the templates. Each one of them is placed in its own folder, named 'form-1', 'form-2', etc.

I'd choose the first, but they're similar.

2. The HTML

Open the 'index.html' file inside the 'form-1' folder with your favorite code editor. I use Eclipse.

Home Page Template Bootstrap 4

Select and copy only the form's code. It looks like this:

Now create a new HTML page in your template's folder. It must have the same header and footer as the rest of the template, and an empty body where we'll add the login form.

I've created the file 'login.html'. Here is its structure, without the form's code:

Paste the form's code we copied above. It will look like this:

As you can see, apart from changing some text, I've also changed some classes' names in the HTML code, to make it more consistent and easier to read and work with, but the structure is the same.

Depending on the template you are using, you might want to use your own classes. I encourage this, because I think experimenting by yourself will help you learn better.

In this template I'm using Bootstrap v3.3.7. You can learn more about forms and their correct use from the Bootstrap documentation.

And here you can learn more about the Bootstrap grid system, if you need.

I'm also using some classes for the animation effects, like 'wow', 'fadeIn', 'fadeInUp'. They are defined in the files 'animate.css' and 'wow.min.js'. This is a topic for another tutorial.

3. The CSS

Next we style the form using CSS in the file 'style.css' in '/assets/css/'. Here is the code:

First, we style the page container and the text, classes 'login-page' and 'login-text'.

Second, we style the form's parts / components, classes 'l-form-top', 'l-form-top-left', 'l-form-top-right' and 'l-form-bottom'.

Third, we style the input fields, username and password, and the submit button.

For the 'Remember me' checkbox I've used the Awesome Bootstrap Checkbox CSS library, the file 'awesome-bootstrap-checkbox.css' in '/assets/css/'. It is a pure CSS way to make checkboxes and radio inputs look prettier and add some style to them.

Frame io customer service. I've used a few lines of code for styling the checkbox and making it match the overall look of the form.

Lastly, we style the social buttons. In the above code we define only their position. Their look is defined in the beginning of 'style.css', because these buttons are also used in other pages of the template. Here is the code:

Media Queries

In the template I use some CSS media queries to make it responsive, so it looks good when viewed from different devices, desktop computers, smartphones, tablets, etc.

The Bootstrap framework has its own media queries but, depending on the template or website I'm creating, I often need to add some other media queries to make the various page components responsive.

In this case I've added them in the file 'media-queries.css', in '/assets/css/'.

For our login form we need only a line of code to make the 'lock' icon on the top smaller when viewed on screens with a width narrower than 415 pixels, class 'l-form-top-right':

4. The JavaScript

We use some JavaScript (jQuery) for the fullscreen background and for the simple form validation that prevents users from leaving empty input fields.

We do this in 'scripts.js', in '/assets/js/'.

Fullscreen Background

For the fullscreen background I've used the Backstretch jQuery plugin, defined in 'jquery.backstretch.min.js', in '/assets/js/', and included in 'index.html'.

Then we initialize it in 'scripts.js' with the name and path to our preferred background:

Form Validation

Here is the code for our simple form validation:

As you can see we check if the username or password input fields are empty. If so, we block the form submission and add the class 'input-error' to the input field.

Here is how the form looks like if the user leaves a field empty, in this case the password field:

5. Conclusion

That's all! Here is again the DEMO and here you can get the Lancar template with this login page included, along with free support.

Or it can happen that a client has purchased a premium template for his site and wants to add a login and a registration page.

Bootstrap Sign In Page

So you search on the web and find a really nice and free login form, you download it and are ready to integrate it in your client's template.

What happens oftentimes is that you find it difficult to integrate the form in your project, or it lacks support from the creator. This also happens with some of my free resources as you can see in some users' comments on this site.

1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 login form with background image snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.
2. Find Latest Free Bootstrap 4 Website Template to launch awesome website for any business retail, eCommerce, shops any online business with our Free HTML Template.

In today's tutorial we'll do something very similar. We'll take a free login form here and integrate it in the Lancar Bootstrap template, to create a beautiful login page with fullscreen background.

And if I see that the tutorial is useful to you, in the future I'll do more of these tutorials for my other free forms and resources.

Let's begin!

1. Introduction

Before we begin let's see the end result that we're going to achieve:

Do you like it? I hope so!

Now, with the live demo out of the way, you can choose to use this tutorial in two ways:

• you can follow it and learn how to integrate the form in your project;
• or you can get the ready-to-use version included in the Lancar template and save some time.

If you've chosen the first option, downloadthese free login templates, extract the .zip package and choose one of the templates. Each one of them is placed in its own folder, named 'form-1', 'form-2', etc.

I'd choose the first, but they're similar.

2. The HTML

Open the 'index.html' file inside the 'form-1' folder with your favorite code editor. I use Eclipse.

Home Page Template Bootstrap 4

Select and copy only the form's code. It looks like this:

Now create a new HTML page in your template's folder. It must have the same header and footer as the rest of the template, and an empty body where we'll add the login form.

I've created the file 'login.html'. Here is its structure, without the form's code:

Paste the form's code we copied above. It will look like this:

As you can see, apart from changing some text, I've also changed some classes' names in the HTML code, to make it more consistent and easier to read and work with, but the structure is the same.

Depending on the template you are using, you might want to use your own classes. I encourage this, because I think experimenting by yourself will help you learn better.

In this template I'm using Bootstrap v3.3.7. You can learn more about forms and their correct use from the Bootstrap documentation.

And here you can learn more about the Bootstrap grid system, if you need.

I'm also using some classes for the animation effects, like 'wow', 'fadeIn', 'fadeInUp'. They are defined in the files 'animate.css' and 'wow.min.js'. This is a topic for another tutorial.

3. The CSS

Next we style the form using CSS in the file 'style.css' in '/assets/css/'. Here is the code:

First, we style the page container and the text, classes 'login-page' and 'login-text'.

Second, we style the form's parts / components, classes 'l-form-top', 'l-form-top-left', 'l-form-top-right' and 'l-form-bottom'.

Third, we style the input fields, username and password, and the submit button.

For the 'Remember me' checkbox I've used the Awesome Bootstrap Checkbox CSS library, the file 'awesome-bootstrap-checkbox.css' in '/assets/css/'. It is a pure CSS way to make checkboxes and radio inputs look prettier and add some style to them.

Frame io customer service. I've used a few lines of code for styling the checkbox and making it match the overall look of the form.

Lastly, we style the social buttons. In the above code we define only their position. Their look is defined in the beginning of 'style.css', because these buttons are also used in other pages of the template. Here is the code:

Media Queries

In the template I use some CSS media queries to make it responsive, so it looks good when viewed from different devices, desktop computers, smartphones, tablets, etc.

The Bootstrap framework has its own media queries but, depending on the template or website I'm creating, I often need to add some other media queries to make the various page components responsive.

In this case I've added them in the file 'media-queries.css', in '/assets/css/'.

For our login form we need only a line of code to make the 'lock' icon on the top smaller when viewed on screens with a width narrower than 415 pixels, class 'l-form-top-right':

4. The JavaScript

We use some JavaScript (jQuery) for the fullscreen background and for the simple form validation that prevents users from leaving empty input fields.

We do this in 'scripts.js', in '/assets/js/'.

Fullscreen Background

For the fullscreen background I've used the Backstretch jQuery plugin, defined in 'jquery.backstretch.min.js', in '/assets/js/', and included in 'index.html'.

Then we initialize it in 'scripts.js' with the name and path to our preferred background:

Form Validation

Here is the code for our simple form validation:

As you can see we check if the username or password input fields are empty. If so, we block the form submission and add the class 'input-error' to the input field.

Here is how the form looks like if the user leaves a field empty, in this case the password field:

5. Conclusion

That's all! Here is again the DEMO and here you can get the Lancar template with this login page included, along with free support.

Remember: this is the front-end part of the login page. Now you have to implement the back-end part to make it fully functional: user validation, session creation, etc., with your favorite platform and programming language. I might create another tutorial for this.

So, I hope you liked this article. If you have any question or want to suggest a specific tutorial, let me know in the comments below.

All the best,
Anli

Stay Updated

Subscribe to the Azmind Newsletter and I'll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:

To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here. Libreoffice calc extensions.

Bootstrap 4 Login form template snippet is created by Jatin Singh using Bootstrap 4, Javascript. This snippet is free and open source hence you can use it in your project.Bootstrap 4 Login form template snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Download limit exceeded

You have exceeded a daily download limit. BBBootstrap.com offers every user to download 3 snippets daily.Upgrade to download unlimited snippets!

Login Page Template Bootstrap 4 Download

Basic Bootstrap Templates

Say Thanks to Jatin Singh

Login Page Template Bootstrap 4 Github