Bulma Box– Bulma Css Box is basically simple container which can contain other elements. Class .box is used to create box container in Bulma. Here in this article we are going to explain how you can create box in Bulma. You can use our online editor to edit and run the code online.
Bulma Box Example
Add class .box to create simple container with shadow, border and border radius. You can use it widely for display rich contents such as media object. Here is simple example of box.
Bulma Box Example:
<div class="box"> <h1>Tutorialsplane</h1> <p>Learn more with examples and demo.</p> </div> |
If you run the above example it will produce output something like this-
Bulma Box Example:
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<amp-img src="https://www.tutorialsplane.com/wp-content/uploads/2017/11/Screenshot-from-2017-11-15-030851.png" alt="Image" width="130" height="114" sizes="(min-width: 130px) 130px, 100vw" class="amp-wp-enforced-sizes"></amp-img>
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Dee</strong> <small>johndee@example.com</small> <small>31m</small>
<br/>
Hi My Name is John Dee and i am from London.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</div>
</nav>
</div>
</article>
</div>
|
If you run the above example it will produce output something like this-
Video Demo
You can run video demo to see the output of the above example-