Creating a simple landing page with navbar using Bulma

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

What is Bulma?

According to their official website, Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers.

Why use Bulma?

If you’ve been using Bootstrap for a while and wanted something lightweight, Bulma is a great choice that provides easy to read syntax when adding the classes. It’s not bloated with features compared to Bootstrap. With Bulma, the intention behind the framework is designed to be mobile-first. The documentation on their website provides examples of code and explanations on creating a website with Bulma.

Here is an example of the syntax when creating a stylized button:

<button class=“button is-success”>Success</button>

With the given code, it will end up creating a button using the success style (in this case, it’s green) with white text and has a hover state to show a slightly darker version of the button style.

While you can customize Bulma’s theme using your own Sass setup - for the purpose of this post, I’ll be using the predefined styles from the Bulma CSS file.

Here’s my CodePen to view the entire landing page I’ve created:

As you can tell by now, I love cows. So why not make a fun landing page on promoting a startup company in helping cows find love? I know, super cheesy.

My thought process when creating the landing page:

  1. To start off with the basics, I’ve gone ahead in centering the entire document using text-align:center within the body section in CSS.
  2. To ensure that I maximized the entire screen, I added the following code: <section class=“hero is-success is-fullheight is-bold”>. By adding this line, you’re making the entire page set to full height with the success (green) background color with a slight dark gradient.
  3. Adding the navbar-brand logo requires a bit of nesting. Not to mention that within the navbar group, I’ve also included the span tag where I’m declaring the navbar-burger burger and indicated the data target to point to the div section where it houses the links. When viewing it on the desktop, you’ll be able to see the hover effect, which is slightly darker and adds a nice contrast against the background.
  4. One caveat of using Bulma - Javascript / JQuery is not built into the framework (as it is seen with Bootstrap). To make the drop-down effect appear when the user clicks on the hamburger icon, I opted to have the vanilla Javascript included on the CodePen. This was provided by Bulma, which you can view here.
  5. I chose a simple picture from Unsplash and made the edges of the picture rounded, along with adding a box shadow effect.
  6. No additional formatting for the h1 and h2 tags is needed since I’m utilizing the title and subtitle classes that were predefined by Bulma.
  7. Finally, I added a button that is the lighter version of the success button. It’s a nice contrast against the green gradient background that was defined earlier. 

If you happen to like this post, feel free to share! For more updates on my web development journey, be sure to follow me at Twitter.

Comments (2)

Waylon Walker's photo

Thanks for sharing your thought process, I used bootstrap a long time ago. It's cool to see the comparison.

Diana Chin's photo

Yay! Thanks for checking out my article, Waylon :)