Open In App

Bulma | Box

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 18 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads