Quick Bootstrap Login Form Example
September 03, 2021
It’s been a really long time since I’ve used Bootstrap. It almost feels like using php it’s been so long. Not to say that’s bad, it’s just been a while. In fact, I often find myself drawn to older web frameworks and technologies. They’re battle tested. They’ll work when you need them to and there’s usually a huge community using them.
For whatever reason, I thought it’d be fun to jump back into bootstrap and see what the latest version had to offer and what had changed. I thought a simple bootstrap login form would be a good place to start. Below is what I ended up with. Not the fanciest form, but I probably spent a grand total of fifteen minutes on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="d-flex flex-column py-2">
<h1>Login</h1>
<form class="border border-2 p-3 rounded rounded-3">
<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>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</body>
</html>
Not much has changed, which is nice. Bootstrap does now come with some handy utility classes, similar to tailwindcss. For example, it includes the utility class d-flex
which initializes a flexbox container via display: flex;
. Bootstrap utility classes also include flex-column
which is equivalent to css flex-direction: column;
.
I have to admit that I spent some time wrangling with bootstrap alignment. I really wanted the form a smaller width and centered in the container, but I couldn’t get it working. In the end, I decided to rely on the bootstrap container class. Which is fine. When I re-size the browser window it mostly does what I was looking to achieve with the smaller width.
Anways, I think the bootstrap login form turned out okay considering I’ve been away from the library for so long. I’m sure if I spent some more time reading the docs and looking at the examples I could make it shine. But, it’s good enough for now. I could use that somewhere I think. Maybe not the most cutting edge form I’ve ever made, but it works and it didn’t take a ton of effort.