Bulma Centered level
source link: https://www.geeksforgeeks.org/bulma-centered-level/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bulma Centered level
Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It uses classes to create beautiful designs.
Bulma Centered Level is used to level the items in the center. To center the level, we use a has-text-centered class. In this article, we will discuss Bulma Centered Level.
Bulma Centered Level Classes:
- level: A multi purpose horizontal level. This class is used to create the level.
- level-item: This class is used to create the level item.
- has-text-centered: This class is used to center the level.
Syntax:
<nav class="level">
<div class="level-item has-text-centered">
....
</div>
....
</nav>
Example 1: The following code demonstrates the Bulma Centered Level on the big screen.
<!DOCTYPE html> <html> <head> <title> Bulma Centered Level </title> <link rel='stylesheet'href= </head> <body> <div class="has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle"> Bulma Centered Level </h3> </div> <br> <br> <nav class="level"> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 1 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 2 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 3 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 4 </button> </div> </div> </nav> </body> </html> |
Output:
Bulma Centered Level on the big screen
Example 2: The following code demonstrates the Bulma Centered Level on the small screen.
<!DOCTYPE html> <html> <head> <title> Bulma Centered Level </title> <link rel='stylesheet' href= </head> <body> <div class="has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle"> Bulma Centered Level </h3> </div> <br> <br> <nav class="level"> <div class="level-item "> <div> <button class='button is-warning'> GFG 1 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 2 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 3 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 4 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 5 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 6 </button> </div> </div> </nav> </body> </html> |
Output:
Bulma Centered Level on the small screen.
Reference: https://bulma.io/documentation/layout/level/#centered-level
“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK