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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: This example creating an input box using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Example 3: This example creating a message box using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.