Bulma-start is a tiny package for Bulma that provides basic HTML structure and predefined CSS files. Basically, it includes all the necessary files and folders, i.e., all the required dependencies that need to be installed with the help of npm, in order to start building websites using Bulma. In simple words, Bulma-start is a starting point for beginners who want to learn Bulma and start building websites.
Features of Bulma-start:
- Predefined development environment
- Easy to learn
- Modular design
Steps to getting started with bulma-start:
Step 1: Run the following command on the command line to install Bulma-start
npm install bulma-start
Step 2: Now type the following command to install node.js packages and dependencies
npm install
Step 3: Again type this command on the terminal to run watchers
npm start
Project structure: The following project structure will be generated after completing the above process:
Step 4: Now, make the changes inside the project to manipulate the output webpage.
We will utilize the above approach to illustrate the topic properly with the help of basic examples.
Example 1: In this example, we will create a navbar using Bulma.
<!DOCTYPE html> <html>
<head>
<title>
Centered Container with Bulma
</title>
<link rel="stylesheet" href=
</head>
<body>
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" 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">
Home
</a>
<a class="navbar-item">
Geeks
</a>
</div>
<div class="navbar-end">
<div class="navbar-item"></div>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Example 2: In this example, we will be creating a centered container with Bulma.
<!DOCTYPE html> <html>
<head>
<title>
Centered Container with Bulma
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container is-centered is-max-desktop">
<div class="columns is-centered">
<div class="column is-half">
<h2 class="title is-1 has-text-centered">
Centered Container
</h2>
<p class="has-text-centered">
example of how to create a
centered container with Bulma
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/overview/start/#bulma-start