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://firstname.lastname@example.org/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
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.