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