Bulma | Box
Bulma is a free, and open source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The box element is simply a container with a shadow, a border, a radius, and some padding. We can use this in many places in our project design. It gives an interactive look to our project.
Example 1: This example creating a box container using Bulma.
<!DOCTYPE html> <html> <head> <title>Bulma Box</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns { margin-top: 80px; } .buttons { margin-top: 15px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class='box'> <h1 class='title' style='color:green'> Geek for Geeks </h1> <p class='is-family-monospace'> 'GeeksforGeeks' is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </p> <div class='buttons'> <button class='button is-fullwidth'> Know more about GfG </button> </div> </div> </div> </div> </div> </body> </html> |
Output:
Example 2: This example creating an input box using Bulma.
<!DOCTYPE html> <html> <head> <title>Bulma Box</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns { margin-top: 80px; } .buttons { margin-top: 12px; } </style> </head> <body> <!-- font-awesome cdn --> <script src= </script> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="box"> <div> <h1 class='title has-text-centered'> Login </h1> </div> <form action='#' method='post'> <div class='field'> <label class='label' id='username'>Username</label> <div class='control has-icons-left'> <input class='input' type='text' for='username' placeholder='Username'> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> </div> </div> <div class='field'> <label class='label' id='password'> Password </label> <div class='control has-icons-left'> <input class='input' type='password' for='password' placeholder='Password'> <span class="icon is-small is-left"> <i class="fas fa-lock"></i> </span> </div> <div class='buttons'> <button class='button is-link'> Login </button> </div> </div> </form> </div> </div> </div> </div> </body> </html> |
Output:
Example 3: This example creating a message box using Bulma.
<html> <head> <title>Bulma Box</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns { margin-top: 80px; } .buttons { margin-top: 15px; } </style> </head> <body> <!-- font-awesome cdn --> <script src= </script> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src= </figure> </div> <div class="media-content"> <div class="content"> <p> <strong>GeeksforGeeks</strong> <small>@geeks</small> <br> Welcome to GeeksforGeeks </br> 'GeeksforGeeks' is a computer science portal. It was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction . </p> </div> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item"> <span class="icon is-small"> <i class="fas fa-reply"></i> </span> </a> <a class="level-item"> <span class="icon is-small"> <i class="fas fa-retweet"></i> </span> </a> <a class="level-item"> <span class="icon is-small"> <i class="fas fa-heart"></i> </span> </a> </div> </nav> </div> </article> </div> </div> </div> </div> </body> </html> |
Output:
Note: Here in all the above examples, we use some extra Bulma classes like container, column, title, button, media, image, input, label, etc to design our content well.
Please Login to comment...