No Time Dad

A blog about web development written by a busy dad

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>

bootstrap_login_form

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.