Login form with bootstrap
Here's an example of a login form using Bootstrap:
html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6">
<h2 class="mb-4">Login</h2>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>In this example, the login form is wrapped inside a container for proper spacing. The form consists of two input fields (email and password) and a submit button.
Bootstrap classes such as `container`, `row`, `col-*`, `mb-*`, `form-label`, `form-control`, and `btn` are utilized to structure and style the form.
The `justify-content-center` class is added to the row to horizontally center the login form. The `col-lg-4 col-md-6` classes are used to define the column size for medium and large screen sizes, ensuring a responsive layout.
The `mt-5` class is used to add margin-top to the container for spacing purposes. Similarly, the `mb-4` class is used to add margin-bottom to the heading.
The `required` attribute is added to the email and password fields to make them mandatory.
The `btn-primary` class is applied to the login button to style it as a primary button.
Remember to include the Bootstrap CSS and JavaScript files using a CDN or by hosting them locally.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.