Bulma | Box - GeeksforGeeks

18 Jun, 2020
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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- custom css -->    <style>        div.columns {            margin-top: 80px;        }          .buttons {            margin-top: 12px;        }    </style></head>  <body>    <!-- font-awesome cdn -->    <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- custom css -->    <style>        div.columns {            margin-top: 80px;        }          .buttons {            margin-top: 15px;        }    </style></head>  <body>    <!-- font-awesome cdn -->    <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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="https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png">                            </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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?