Bulma is a free and open-source CSS framework that has its own pre-styled components which makes it easier to build fast and responsive websites. In This article, we will be seeing two Bulma classes, which are, navbar-start and navbar-end.
Bulma Navbar start and navbar end Classes:
- navbar-start: It is the direct child of the Bulma navbar-menu container which lies inside the navbar component and can contain any number of navbar items. On desktop and upwards screen sizes ( >= 1024px), the navbar-start container will appear to the left.
- navbar-end: It is the direct child of the Bulma navbar-menu container which lies inside the navbar component and can contain any number of navbar items. On desktop and upwards screen sizes ( >= 1024px), the navbar-end container will appear to the right.
Syntax:
<nav class="navbar">
<div class="navbar-menu">
<div class="navbar-start">
...
</div>
<div class="navbar-end">
...
</div>
</div>
</nav>
Example: In the below example, the background color of the navbar-start is set to primary color and the background color of the navbar-end is set to link color to make it easy to distinguish between the two.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Bulma Navbar start and Navbar end
</ title >
< link rel = 'stylesheet' href =
< style >
.navbar {
margin-top: 20px;
padding: 10px;
}
</ style >
</ head >
< body class = "has-text-centered has-navbar-fixed-bottom" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ h1 >
< b >
Bulma Navbar start
and Navbar end
</ b >
< div class = "container" >
< nav class = "navbar is-transparent" >
< div class = "navbar-barand" >
< img src =
</ a >
< div class = "navbar-burger" data-target = "nav1" >
< span ></ span >
< span ></ span >
< span ></ span >
</ div >
</ div >
< div id = "nav1" class = "navbar-menu" >
< div class = "navbar-start has-background-primary" >
< a class = "navbar-item" href = "#" >
Home
</ a >
< a class = "navbar-item" href = "#" >
Practice
</ a >
</ div >
< div class = "navbar-end has-background-link" >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< button class = "button is-info" >
Algorithms
</ button >
</ p >
< p class = "control" >
< button class = "button is-info is-outlined" >
Data Structures
</ button >
</ p >
</ div >
</ div >
</ div >
</ div >
</ nav >
< p class = "mt-6" >
< b >Here the
< i >navbar-start</ i >
has primary color background and the
< i >navbar-end</ i >
has link color background
</ b >
</ p >
</ div >
</ body >
</ html >
|
Output:

Reference: https://bulma.io/documentation/components/navbar/#navbar-start-and-navbar-end
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
14 Feb, 2022
Like Article
Save Article