Creating a Login with Bulma

Bulma is a CSS framework designed to be simple to learn and use. It comes with modern UI components that can be used to quickly build out a cohesive user interface. Bulma is coded using sass and therefore is very modular, allowing the user to import the features they need. Class names are meant to be extremely readable, such as “button” and “title” creating a button and title object. Then with the use of simple modifiers such as “is-big” or “is-black” we can easily change the way out layout looks. When it comes to layouts, Bulma is built on top of Flexbox making it easy to use and responsive to changes in the size of the webpage.

In this tutorial, we will be using Bulma with HTML to create our login page!
To install Bulma in our application we can simply add this link inside of our head tag of our application.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

Awesome! We just installed Bulma into our application, now we can start using its classes.

We can start by adding a div with a class of “hero”. The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. We want to use this to encompass our login, so we can add the modifier is-fullheight to have the hero cover the entire page, and set the color to is-primary.

<div class="hero is-fullheight is-primary">
</div>

Lookin Good!

Now we can add a div tag with a class of hero-body that has a container that is centered within it. Inside of that, we can create a column that will stretch from 2–8 columns out of a 10 column window.

<div class="hero is-fullheight is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="column is-8 is-offset-2">
      </div>
    </div>
  </div>
</div>

Now we can start adding our title and subtitle inside of our column, telling the user to login to our application.

<h3 class="title has-text-white">Login</h3>
<hr class="login-hr">
<p class="subtitle has-text-white">Please login to see our cool stuff!</p>

Now let’s work on our login box!

Now we can build out our login box. We can add our logo inside of another box at the top of our box <div class="box">. Then add a title that will ask the user to enter in their email and password <div class=”title has-text-grey is-5">.

<div class="box">
  <div class="box">
    <img src="https://miro.medium.com/proxy/0*4fHRBbNhF_1jpdCM.jpeg">
  </div>
  <div class="title has-text-grey is-5">Please enter your email and password.</div>
</div>

Now we can add our forms for our username and password input. The Bulma control is a versatile block container meant to enhance single form controls. Adding our input tag with a class of input and type of email will allow us to have a textbox meant for email. The same will go for password, and our input will automatically be hidden since our website knows the user will enter sensitive information.

<form>
  <div class="field">
    <div class="control">
      <input class="input is-large" type="email" placeholder="Email" autofocus="">
    </div>
  </div>
  <div class="field">
    <div class="control">
      <input class="input is-large" type="password" placeholder="Password">
    </div>
  </div>
</form>

We can now add the checkbox and submit button.

<label class="checkbox" style="margin: 20px;">
  <input type="checkbox">
    Remember me
</label>
<button class="button is-block is-danger is-large is-fullwidth">Login</button>

We have our login box!

Great! Just like that, we have our login box ready to have a backend added to it! Now let’s add some finishing touches… Let’s add some links under our login for some options our user might need.

<p class="has-text-grey">
  <a href="">Sign Up</a> &nbsp;·&nbsp;
  <a href="">Forgot Password</a> &nbsp;·&nbsp;
  <a href="">Need Help?</a>
</p>

Resources

Documentation

Template From:

Free Bulma templates