Bootstrap 4 Login Template

Posted onby admin
  1. Login Template Free Download
  2. Bootstrap 4 Login Page Templates
  3. Bootstrap Log In
  4. Bootstrap Templates Free Download
  5. Web Login Template

An amazing Bootstrap 4 login form template that you can use for any project. Looks stunning, features a clean codebase, and is completely free to use. A full-blown free login form with an image background page template that keeps the user experience at an all-time high. Mar 02, 2021 Bootstrap 4 Login Template V08 The V08 is a Bootstrap 4 free login form template. Since it is a Bootstrap 4 template, you can easily incorporate this login form on any website and application. The creator has used a full-width layout in the default design with a vector design on one side and a login form template on the other. Features HTML5 and CSS3 Markup Clean And Modern Design Bootstrap 4+ Based Full responsive and Mobile friendly Flexible and well commented code Easily Customizable Forny – Login and Register Form Templates Forny – Sign Up and Sign In Templates Forny is a a pack of 8 modern and creative login and register templates.

Bootstrap 4's Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap 4 Form Layouts

Bootstrap provides two types of form layouts:

  • Stacked (full-width) form
  • Inline form

Bootstrap 4 Stacked Form

Login Template Free Download

The following example creates a stacked form with two input fields, one checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure proper margins:

Example

Login template bootstrap

Bootstrap 4 Login Page Templates

<form action='/action_page.php'>
<div>
<label for='email'>Email address:</label>
<input type='email' placeholder='Enter email'>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password'>
</div>
<div>
<label>
<input type='checkbox'> Remember me
</label>
</div>
<button type='submit'>Submit</button>
</form>
Try it Yourself »

Bootstrap Inline Form

In an inline form, all of the elements are inline and left-aligned.

Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.

Additional rule for an inline form:

  • Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form action='/action_page.php'>
<label for='email'>Email address:</label>
<input type='email' placeholder='Enter email'>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password'>
<div>
<label>
<input type='checkbox'> Remember me
</label>
</div>
<button type='submit'>Submit</button>
</form>
Try it Yourself »

Bootstrap Log In

Inline Form with Utilities

The inline form above feels 'compressed', and will look much better with Bootstrap's spacing utilities. The following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):

Example

<form action='/action_page.php'>
<label for='email'>Email address:</label>
<input type='email' placeholder='Enter email'>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password'>
<div>
<label>
<input type='checkbox'> Remember me
</label>
</div>
<button type='submit'>Submit</button>
</form>
Try it Yourself »

You will learn more about spacing and other 'helper' classes in our Bootstrap 4 Utilities Chapter.

Form Row/Grid

Bootstrap Templates Free Download

You can also use columns (.col) to control the width and alignment of form inputs without using spacing utilities. Just remember to put them inside a .row container.

In the example below, we use two columns that will appear side by side. You will learn much more about columns and rows in the Bootstrap Grids Chapter.

Example

<form>
<div>
<div>
<input type='text' placeholder='Enter email' name='email'>
</div>
<div>
<input type='password' placeholder='Enter password' name='pswd'>
</div>
</div>
</form>
Try it Yourself »

If you want less grid margins (override default column gutters), use .form-row instead of .row:

Web Login Template

Example

<form>
<div class='form-row'>
<div>
<input type='text' placeholder='Enter email' name='email'>
</div>
<div>
<input type='password' placeholder='Enter password' name='pswd'>
</div>
</div>
</form>
Try it Yourself »

Form Validation

You can use different validation classes to provide valuable feedback to users. Add either .was-validated or .needs-validation to the <form> element, depending on whether you want to provide validation feedback before or after submitting the form. The input fields will have a green (valid) or red (invalid) border to indicate what's missing in the form. You can also add a .valid-feedback or .invalid-feedback message to tell the user explicitly what's missing, or needs to be done before submitting the form.

Example

In this example, we use .was-validated to indicate what's missing before submitting the form:

<form action='/action_page.php'>
<div>
<label for='uname'>Username:</label>
<input type='text' placeholder='Enter username' name='uname' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password' name='pswd' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label>
<input type='checkbox' name='remember' required> I agree on blabla.
<div>Valid.</div>
<div>Check this checkbox to continue.</div>
</label>
</div>
<button type='submit'>Submit</button>
</form>
Try it Yourself »

Example

In this example, we use .needs-validation, which will add the validation effect AFTER the form has been submitting (if there's anything missing). Note that you will also have to add some jQuery code for this example to work properly:

<form action='/action_page.php' novalidate>
<div>
<label for='uname'>Username:</label>
<input type='text' placeholder='Enter username' name='uname' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password' name='pswd' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label>
<input type='checkbox' name='remember' required> I agree on blabla.
<div>Valid.</div>
<div>Check this checkbox to continue.</div>
</label>
</div>
<button type='submit'>Submit</button>
</form>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Try it Yourself »