Bulma Navbar start and navbar end
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
.png)
