Bootstrap Login Form
Bootstrap is a powerful front-end framework that makes web development faster and easier. With its pre-designed components and responsive grid system, Bootstrap allows developers to create professional-looking web forms with minimal effort. A login form is a common feature in many web applications, serving as a gateway for users to access secure areas of a website.
Copy the code given below and paste it in your file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Here</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-light">
<section class=" p-3 p-md-4 p-xl-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5">
<div class="card border border-light-subtle rounded-4">
<div class="card-body p-3 p-md-4 p-xl-5">
<div class="row">
<div class="col-12">
<div class="mb-5">
<h4 class="text-center">Login Here</h4>
</div>
</div>
</div>
<form action="#!">
<div class="row gy-3 overflow-hidden">
<div class="col-12">
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="email" placeholder="name@example.com" required>
<label for="email" class="form-label">Email</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="password" value="" placeholder="Password" required>
<label for="password" class="form-label">Password</label>
</div>
</div>
<div class="col-12">
<div class="d-grid">
<button class="btn bsb-btn-xl btn-primary py-3" type="submit">Log in now</button>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-12">
<hr class="mt-5 mb-4 border-secondary-subtle">
<div class="d-flex gap-2 gap-md-4 flex-column flex-md-row justify-content-center">
<a href="#!" class="link-secondary text-decoration-none">Create new account</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>Bootstrap Elements in the Code Explain
- Including Bootstrap CSS
- The CSS from a CDN allows the use of Bootstrap’s styles and components.
- Body Class
bg-lightapplies a light background color to the body.
- Section Padding
- Different padding amounts are applied for various screen sizes using
p-3,p-md-4, andp-xl-5.
- Different padding amounts are applied for various screen sizes using
- Container Class
- Centers the content and adds horizontal padding, maintaining a structured and responsive layout.
- Row and Column Layout
rowcreates a horizontal group of columns.justify-content-centercenters the row content horizontally.col-12,col-md-9,col-lg-7,col-xl-6, andcol-xxl-5define column widths for different screen sizes.
- Bootstrap Card Component
- The
cardclass creates a flexible content container with padding. border border-light-subtleadds a subtle border.rounded-4rounds the corners.card-bodyadds padding inside the card with varying amounts for different screen sizes.
- The
- Form Layout
rowgroups form elements horizontally.gy-3adds vertical gutters (spacing) between rows.overflow-hiddenensures content that overflows the container is hidden.
- Form Controls with Floating Labels
form-floatingwraps form controls to create floating labels.form-controlstyles the input fields.mb-3adds a bottom margin.form-labelstyles the label.
- Submit Button
d-gridmakes the button span the full width of its container.btnandbtn-primarystyle the button.py-3adds vertical padding.
- Link to Create a New Account
link-secondarystyles the link with a secondary color.text-decoration-noneremoves the underline.
- Including Bootstrap JavaScript
- The JavaScript bundle from a CDN is included for interactive components like modals and tooltips.
Bootstrap Registration Form
Copy the code given below and paste it in your file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register Form</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-light">
<section class=" p-3 p-md-4 p-xl-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5">
<div class="card border border-light-subtle rounded-4">
<div class="card-body p-3 p-md-4 p-xl-5">
<div class="row">
<div class="col-12">
<div class="mb-5">
<h4 class="text-center">Register Here</h4>
</div>
</div>
</div>
<form action="#!">
<div class="row gy-3 overflow-hidden">
<div class="col-12">
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="email" placeholder="name@example.com" >
<label for="email" class="form-label">Email</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="password" value="" placeholder="Password" >
<label for="password" class="form-label">Password</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control" name="confirm_password" id="confirm_password" value="" placeholder="Confirm Password" >
<label for="password" class="form-label">Confirm Password</label>
</div>
</div>
<div class="col-12">
<div class="d-grid">
<button class="btn bsb-btn-xl btn-primary py-3" type="submit">Register Now</button>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-12">
<hr class="mt-5 mb-4 border-secondary-subtle">
<div class="d-flex gap-2 gap-md-4 flex-column flex-md-row justify-content-center">
<a href="#!" class="link-secondary text-decoration-none">Click here to login</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>Bootstrap Elements in the Code
- Including Bootstrap CSS
- Links to Bootstrap’s CSS file from a CDN, enabling the use of Bootstrap’s styles and components.
- Body Class
- Applies a light background color to the body of the page for a clean appearance.
- Section Padding
- Adds varying amounts of padding around the section for different screen sizes, ensuring proper spacing.
- Container Class
- Centers the content horizontally and adds horizontal padding, providing a structured layout.
- Row and Column Layout
- Creates a horizontal group of columns with centered alignment and responsive column widths for different screen sizes.
- Bootstrap Card Component
- Provides a styled container for content with a subtle border, rounded corners, and responsive padding.
- Form Layout
- Groups form elements horizontally with vertical spacing between rows and ensures that overflowing content is hidden.
- Form Controls with Floating Labels
- Utilizes floating labels for form controls with styled input fields and added spacing between form elements.
- Submit Button
- Styles the button to span the full width of its container, with primary button styling and vertical padding for better appearance and usability.
- Link for Login
- Styles the link with a secondary color and removes the underline for a cleaner look.
- Including Bootstrap JavaScript
- Includes Bootstrap’s JavaScript bundle from a CDN to enable interactive components like modals and tooltips.
Also Visite Here- Kyadekhe.com
its amazing