Johno89

Posted 5 months ago

How to style a form using Bulma

View Profile

You may of seen Bulma before a free and open source CSS framework based on Flexbox. Bulma can be downloaded or installed using NPM and is easy to get into once looking over the documentation.

We are going to create a login panel for users to login using your websites own login method or via social login such as facebook & twitter.

Firstly we will be using Cards.

<div class="card">
<div class="card-content">
</div>
</div>

This will be our starting point for our new login panel.

Next we will need to begin adding in the content.

<div class="card">
<div class="card-content login">
<p class="title">
Already a member?
</p>
<p class="subtitle">
Sign in to continue.
</p>
</div>
</div>

First off is our heading & our subtitle prompting the user to what it actually does.

followed by our input fields name & password fields

<div class="card">
<div class="card-content">
<p class="title">
Already a member?
</p>
<p class="subtitle">
Sign in to continue.
</p>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="text" placeholder="Email address">
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="email" placeholder="My password">
</div>
</div>
</div>


Then lastly we will add our second subheading with the social buttons.

<div class="card">
<div class="card-content">
<p class="title">
Already a member?
</p>
<p class="subtitle">
Sign in to continue.
</p>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="text" placeholder="Email address">
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="email" placeholder="My password">
</div>
</div>
<h6 class="subtitle is-6 has-text-centered">or</h6>
<div class="has-text-centered">
<a class="button is-link">Facebook</a>
<a class="button is-info">Twitter</a>
</div>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
Register
</span>
</p>
</footer>
</div>

Now that we have the following in order we are going to add a bit of a twist to our panel by using the card footer to create a fullwidth Register button along the bottom.

<div class="card">
<div class="card-content login">
<p class="title">
Already a member?
</p>
<p class="subtitle">
Sign in to continue.
</p>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="text" placeholder="Email address">
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="email" placeholder="My password">
</div>
</div>
<h6 class="subtitle is-6 has-text-centered">or</h6>
<div class="has-text-centered">
<a class="button is-link">Facebook</a>
<a class="button is-info">Twitter</a>
</div>
</div>
<footer class="card-footer">
<p class="card-footer-item register">
<span>
Register
</span>
</p>
</footer>
</div>


Now we have our form built :) and currently it looks ok as it is following the Bulma default colours etc


But we want our form to look more appealing and inviting to the users so we will customise the card with custom classes.

Below is the CSS and we have added .login class to our .card-content section to customise the height , colour & remove the border.

The footer section with our register button uses .card-footer-item and adding a new class .register  adds the background fill to make our footer stand out! The rest of the class tags within our CSS has removed styling or slightly altered how they look using defaults.

.button {
border-radius: 0;
border: none;
}

.card-content.login {
background-color: #f9f6f6;
border: none;
height: 400px;
padding: 20px;
}
.card-footer-item.register {
background-color: #284863;
color: white;
}

.input{
border-width:1px;
border-radius:15px;
}

.card-footer {
border: none;
}
.label {
font-weight: lighter;
}


Hopefully you find this new form style useful , its also fully responsive and allows you to change up the way most forms look.


Must be logged in to comment
How to style a form using Bulma / Welcome to Signl