Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Login Modal for React

A production-ready minimal login modal: a centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
import { useState } from 'react';

export default function LoginModal() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <button type="button" className="btn btn-brand fw-semibold rounded-2" onClick={() => setOpen(true)}>Sign in</button>
      <div hidden={!open}>
        <div className="position-fixed top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center p-3 overlay" role="dialog" aria-modal="true" aria-labelledby="login-title">
          <div className="position-relative w-100 mw-md p-5 bg-body border shadow-sm rounded-3">
            <button type="button" className="position-absolute top-0 end-0 m-2 btn btn-sm btn-link link-secondary text-decoration-none" aria-label="Close" onClick={() => setOpen(false)}>&times;</button>
            <h2 id="login-title" className="fs-4 fw-bold mb-1 text-body-emphasis">Welcome back</h2>
            <p className="small mb-4 text-body-secondary">Sign in to continue to your dashboard.</p>
            <form className="d-flex flex-column gap-3">
              <div>
                <label htmlFor="login-email" className="form-label small fw-medium">Email</label>
                <input id="login-email" type="email" autoComplete="email" placeholder="you@company.com" className="form-control rounded-2" required />
              </div>
              <div>
                <div className="d-flex align-items-center justify-content-between">
                  <label htmlFor="login-password" className="form-label small fw-medium">Password</label>
                  <a href="#" className="small text-brand fw-medium text-decoration-none">Forgot?</a>
                </div>
                <input id="login-password" type="password" autoComplete="current-password" placeholder="••••••••" className="form-control rounded-2" required />
              </div>
              <label className="d-flex align-items-center gap-2 small text-body">
                <input type="checkbox" className="form-check-input mt-0" /> Remember me for 30 days
              </label>
              <button type="submit" className="btn btn-brand fw-semibold rounded-2 w-100">Sign in</button>
            </form>
            <div className="d-flex align-items-center gap-2 my-4">
              <span className="flex-fill border-top"></span>
              <span className="small text-uppercase text-body-secondary">or</span>
              <span className="flex-fill border-top"></span>
            </div>
            <button type="button" className="btn btn-outline-secondary fw-semibold rounded-2 w-100">Continue with Google</button>
            <p className="mt-4 text-center small text-body-secondary">No account? <a href="#" className="text-brand fw-medium text-decoration-none">Create one</a></p>
          </div>
        </div>
      </div>
    </div>
  );
}

More Bootstrap components for React

All components →

Free Bootstrap 5 Login Modal for React by pGento

Install Bootstrap 5 for React

Create a React project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.

Use the login modal in React

// App.jsx
import LoginModal from './LoginModal';

export default function App() {
  return <LoginModal />;
}

Accessibility & customization

The dialog uses role="dialog", aria-modal="true" and aria-labelledby pointing at its title. Every field has a visible <label>, the close button has an aria-label, and inputs use the correct autocomplete tokens so password managers work.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryReact 18+ (function component)
Interactive stateopen
Dark modeYes — toggle in the editor
StyleMinimal

Frequently asked questions

How do I install this Bootstrap login modal in React?
Create a React project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the login modal?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the login modal support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the login modal accessible?
The dialog uses role="dialog", aria-modal="true" and aria-labelledby pointing at its title. Every field has a visible <label>, the close button has an aria-label, and inputs use the correct autocomplete tokens so password managers work.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 Login Modal for React

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.