Login Form Bootstrap 4 Template

Posted onby admin
  1. About a code Bootstrap Registration Page. The registration page is created using Bootstrap 4, a little bit of jQuery, and HTML5 form elements. Enhance user experience using Font Awesome icons to identify first names, last names, contact numbers, and other relevant information.
  2. A clean, modern and free Bootstrap 4 login form template that adapts to different website themes with ease. Login Form V10 With this free social media login form, you give your users a chance to use their profile to access their account and not email and password.
  3. Download free Bootstrap 4 templates. The below templates are created using the latest version of the Bootstrap framework.

Bootstrap 4's Default Settings

Bootstrap 4's Default Settings. Form controls automatically receive some global styling with Bootstrap: All textual, and elements with class.form-control have a width of 100%. Bootstrap Flat Modal Login Form with Icons. Tags Bootstrap 4 modal. × Note: See the tutorial on.

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 form bootstrap 4 templates

Bootstrap 4 Login Form 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

<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

Free bootstrap 4 templates

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 »

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

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:

Example

Login Form Bootstrap 4 Template Download

<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 »

Download
ScriptAction
Bootstrap 4 CSShttps://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.csscopycopy script
Bootstrap 4 JShttps://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.jscopycopy script
Jqueryhttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.jscopycopy script
159Bootstrap 5
5.1KBootstrap 4

Form Bootstrap 4 Template

3.2KBootstrap 4
820Bootstrap 5

Bootstrap Website Templates

49.9KBootstrap 4
About this snippet

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!


Upgrade - Go Pro

Embed this snippet

Bootstrap

Say Thanks to Jatin Singh

Login Form Bootstrap 4 Templates

Our creators love hear from you and seeing how you've used their snippets. Show your appreciation by donating and following.