How to Build Company Website With Bulma CSS
Intro to how to build company website with Bulma CSS
Today you will learn how to build company website with Bulma CSS.
In the previous episodes, you’ve learned how to build a website with Bootstrap 5: https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/
And, you’ve learned how to build admin template with Bootstrap 5: https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/
Now, it is the time for something the same fantastic, and maybe even sweeter for the UI.
Bulma CSS framework is a very popular, great to use, and a beautiful CSS framework that you can use to build great UI.
With Bulma CSS, you can quickly build beautiful websites, e-commerce, apps, and even admin panels.
In today’s episode, we’ll focus on how to build a company website with Bulma CSS, which as a company website, we’ll build the responsive web development agency website.
Let’s start!
And if you prefer video, here is the Youtube version:
How to create header
As the first step, we need to create the project’s structure.
The first that we need to do is create a file named index.html. Next, we should create styles, named style.css (in the same directory), and the last one should be directory named “img”.
In the img directory, we’ll handle all the images.
So, if we have structure, we can go into the index.html file and create a simple HTML template, with the first header element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Company website with Bulma</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
</head>
<body>
<header class="section has-background-link py-4 has-text-white">
</header>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll('.navbar-burger'),
0
);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>
</html>How to add columns and icons to header
In the next step, we should create the missing elements in the “header” element.
To do that, we need to create a few columns and put text with icons there.
You can see how it should look in the example below:
<header class="section has-background-link py-4 has-text-white">
<div class="container">
<div class="columns">
<div class="column">
<span class="icon">
<i class="far fa-envelope"></i>
</span>
email@company.com
</div>
<div class="column">
<i class="fas fa-phone-volume"></i>
+44-754-443-222
</div>
<div class="column has-text-right-tablet">
<i class="fas fa-headphones-alt"></i>
Support
</div>
</div>
</div>
</header>How to create sections
Great! We have our skeleton almost ready.
Now, we have to add all the sections that will create a template structure (together with the header).
Let’s take a look at the example below:
<section class="section" id="hero">
</section>
<section class="section">
</section>
<section class="section" id="contact">
</section>How to create a menu in the hero section
The next thing that we need to create is the top menu in the hero section.
To do that, we can copy the whole menu from the Bulma website, or retype it if you’d like to practice.
The menu should contain three main sections. The first one is a logo that should be positioned on the left.
The next one is the proper menu, which should be after the logo.
And the last one is the signup/login buttons group, that we should put on the right of the top menu section.
<section class="section" id="hero">
<div class="container">
<nav
class="navbar is-transparent"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
class="navbar-burger burger has-text-white"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-white">
Home
</a>
<a class="navbar-item has-text-white">
Services
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link has-text-white">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider" />
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-info">
<strong>Sign up</strong>
</a>
<a class="button is-warning">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>How to create columns in a hero
Our hero is slowly going into better shape.
Now we can focus on the two columns that should be added below the top menu, but still in the section “hero”.
In the next steps, we’ll add the content inside these columns.
Let’s take a look at the example below.
<div class="columns pt-6">
<div class="column mt-6">
</div>
<div class="column mt-6">
</div>
</dev>How to create left column content in the hero
It’s the time to fulfill “hero” columns with the necessary content.
In this step, we’ll focus on the left one column. We need there a few elements, the first one that we should add is the big icon.
Next, we need to add an h1-size heading and some text below.
As the last element there, we should add the yellow button.
Let’s take a look at the code example below:
<span class="icon has-text-warning">
<i class="far fa-chart-bar fa-lg"></i>
</span>
<h1 class="is-size-1 has-text-white has-text-weight-semibold">
Web design<br />
& App Development
</h1>
<p class="has-text-white">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at
natus dicta tempora? Distinctio vero aut, eveniet perferendis
maiores corporis.
</p>
<button class="button is-warning mt-4">
Learn more
</button>Add image to hero
Now is the last step here, and it’s very easy because we need to add only one element here.
In the right column, you need to add the image from the “img” directory.
We used bought images, but you can visit any website like freepic, or you can find free images somewhere else.
Let’s take a look at the code example below:
<img src="img/hero-image.png" />How to create services header
We can now go into the next section where we will show what services our agency can provide.
As the first step in the services section, we need to add the section header.
To create a header like that, we can use just a combination of title and subtitle.
To do that, you need to add a class “title” to the first element, and class “subtitle” to the second one.
<section class="section" id="services">
<div class="container">
<div class="has-text-centered">
<h2 class="title is-2">Full Service Web Development Agency</h2>
<h6 class="subtitle is-6 has-text-grey">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
</h6>
</div>
</dev>
</section>How to create card
Now, we can go into the services, and focus on the element named “card”.
First, we need to add div “columns”, and the div “column” inside that.
Next, we should create a card with an icon, title, content, and footer.
Let’s take a look at the example below.
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-code"></i>
</span>
</div>
<p class="title is-4">
Web development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</dev>How to create cards with services
Now you know how to create a card, but one is not enough.
We will need eight cards, every with different icons and titles, but don’t worry.
You do not need to write them one-by-one.
We can copy whole column div, change the icon, and title, but remember, about the double “columns” div, to not have 8 cards in one row.
Let’s take a look at the code example below:
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-code"></i>
</span>
</div>
<p class="title is-4">
Web development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-paint-brush"></i>
</span>
</div>
<p class="title is-4">
Web design
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-server"></i>
</span>
</div>
<p class="title is-4">
Web hosting
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-mobile-alt"></i>
</span>
</div>
<p class="title is-4">
Mobile development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</div>
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="far fa-chart-bar"></i>
</span>
</div>
<p class="title is-4">
SEO Boost
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-ad"></i>
</span>
</div>
<p class="title is-4">
Marketing
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-funnel-dollar"></i>
</span>
</div>
<p class="title is-4">
Sales funnels
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-cog"></i>
</span>
</div>
<p class="title is-4">
Maintenance
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</div>How to add group of buttons
Below the cards, we should add two buttons.
The first one should be yellow, and the second one should be blue.
To have them in one group, we need to use class “is-grouped”, and style them a bit in “style.css” to have them centered.
Styles, we’ll add in the next steps, now let’s add just HTML.
Let’s take a look at the code example:
<div class="field is-grouped mt-6 is-flex service-buttons">
<p class="control">
<button class="button is-warning">
Free consultation
</button>
</p>
<p class="control">
<button class="button is-info">
Request pricing
</button>
</p>
</div>How to create divider in Bulma CSS
Unfortunately, in Bulma CSS there is not a divider component.
We can install the npm package to have that or add a few lines in style to create that.
We’ll add it to the styles later, but take a look at the code example below, so you’ll know how to create a divider in seconds.
.logos:before {
content: '';
position: absolute;
width: 50%;
left: 25%;
top: 0;
border-top: 1px solid #ebebeb;
}How to add client logos
This is the last step in the services section. Congratulations!
In this step, we need to add clients’ logos that we were working for.
To do that, we just need to create a simple gird, and add four divs with class “column”, and image inside them.
<div class="columns mt-6 pt-5 logos is-relative">
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
</div>
</div>How to create contact form
Woohoo! We go into the last section now, and your web dev agency website will be ready for the clients soon!
As the first step, we need to create two columns in the last section.
Next, in the first (left) column, we should create a simple card with the empty body, and yellow header.
In the next step, we should add a form with few inputs, and the submit button.
Let’s take a look at the example below:
<section class="section" id="contact">
<div class="container">
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header has-background-warning">
<p class="card-header-title">
Free Consultation
</p>
</header>
<div class="card-content">
<div class="field">
<label class="label">Name</label>
<p class="control">
<input class="input" type="text" placeholder="Name">
</p>
</div>
<div class="field">
<label class="label">Phone number</label>
<p class="control">
<input class="input" type="text" placeholder="Phone number">
</p>
</div>
<div class="field">
<label class="label">Email</label>
<p class="control">
<input class="input" type="email" placeholder="Email">
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-warning">
Submit
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>How to add testimonials
As the next step, we can add the testimonials with the reviews that our clients gave us.
To do that, we just need to create two big quote icons in the right column.
Next, you need to add a white text between them.
<div class="column has-text-white pt-6 pl-6">
<span class="icon is-size-1 pb-6 my-3 has-text-grey-lighter">
<i class="fas fa-quote-left"></i>
</span>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime placeat, dolorem, quam expedita deleniti accusantium animi adipisci neque rem nobis at necessitatibus iusto vero exercitationem illum amet hic eligendi sapiente!</p>
<p class="has-text-weight-bold pt-3 is-size-4">John Doe</p>
<span class="icon is-size-1 pt-6 pr-3 my-3 has-text-grey-lighter is-pulled-right">
<i class="fas fa-quote-right"></i>
</span>
</div>Add custom styles
It’s the last step on our company website and the crucial one.
In this step, we need to move into the style.css and style a few elements.
Remember to get your own photos that you need to use for the background.
You can find free photos on the internet easily.
Let’s take a look at our styles, that we’ve added in the code example below:
#hero {
background: url('img/hero-bg.png');
height: 1079px;
background-position-x: center;
background-size: cover;
}
#hero .navbar.is-transparent {
background-color: transparent;
}
.service-buttons {
justify-content: center !important;
}
.logos:before {
content: '';
position: absolute;
width: 50%;
left: 25%;
top: 0;
border-top: 1px solid #ebebeb;
}
#contact {
background: url('img/contact-bg.png');
background-size: cover;
}
@media screen and (max-width: 1023px) {
.navbar-menu a.has-text-white {
color: #4a4a4a !important;
}
.navbar-menu a.has-text-white:hover {
color: #3273dc !important;
}
}Conclusion of how to build company website with Bulma CSS
Congratulations, your website for Web Development Agency is ready for the first clients!
Today, you’ve learned how to build a company website with Bulma CSS, and I hope you’re much closer to your own online business.
In the AWS course Lesson1: How to host a website on S3 with Cloudflare, you can find the step-by-step tutorial on how to host own website, so go ahead and host your website after you build it.
Here is the URL to the AWS course Lesson1: https://www.blog.duomly.com/aws-course-lesson-1-how-to-host-website-on-s3-with-cloudflare/
Don’t forget to show us your website after it will be ready and hosted on S3!
Thanks for reading,
Radek from Duomly
Professional Career Courses
Management Courses
Entrepreneurship Courses
Sales Courses
Marketing Courses
IT & AI Courses
Personal Development Courses