Bootstrap 5 login forms are one of the most searched UI patterns. This page covers 5 login form designs — from a simple basic form to split screen and social login layouts — each with working copy-paste HTML.

Quick Setup

Login forms need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.form-controlStyles input, select and textarea elements
.form-labelStyles the label above an input
.form-checkWrapper for checkbox and radio inputs
.form-check-inputStyles checkbox or radio input
.form-floatingEnables floating label animation
.form-textHelper text below an input
.was-validatedTriggers validation styles on the form
.is-invalidAdds red invalid styles to an input
.invalid-feedbackError message shown when input is invalid
.w-100Makes button full width
.min-vh-100Full viewport height
.d-flex.align-items-centerVertical centering
.input-groupAttach button to input

1. Basic Bootstrap 5 Login Form

A clean, minimal login form with email, password and remember me checkbox.

2. Bootstrap 5 Login Form in Card

Login form wrapped in a Bootstrap card with shadow. Common pattern for SaaS and admin login pages.

3. Bootstrap 5 Split Screen Login

A two-column login layout with a branded left panel and form on the right. Popular for modern SaaS apps.

4. Bootstrap 5 Login with Social Buttons

Login form with Google and GitHub social sign-in buttons. Common pattern for developer tools and SaaS apps.

5. Bootstrap 5 Floating Label Login

Login form using Bootstrap 5 floating labels — labels animate up when the input is focused or filled.

4. Bootstrap 5 Dark Login Page

Dark themed login page — perfect for admin panels and developer tools.

Frequently Asked Questions

Use form-control class on inputs, form-label on labels, and btn btn-primary on the submit button. Wrap everything in a container div. For a card layout add the card and card-body classes around the form.
Wrap each input and label in a div with class form-floating. Put the input before the label and add a placeholder attribute to the input. Bootstrap handles the animation automatically when the input is focused or filled.
Add the novalidate attribute to the form element, then use Bootstrap's was-validated class on the form after submission. Add required attribute to inputs. Use is-invalid and is-valid classes plus invalid-feedback divs for custom error messages.
Use Bootstrap's flexbox utilities on the page wrapper: class='min-vh-100 d-flex align-items-center justify-content-center'. This centers the form both horizontally and vertically on the page.
Set the wrapper to min-vh-100 with d-flex align-items-center. For a split layout use row g-0 with two col-md-6 columns — one for branding and one for the form. Add a background color or gradient to the branding column.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Registration Form

View examples →

Bootstrap 5 Card Example

View examples →

Bootstrap 5 Form Validation

View examples →

Bootstrap 5 Modal with Form

View examples →