Bulma | Box
Last Updated :
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 =
< 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 =
< style >
div.columns {
margin-top: 80px;
}
.buttons {
margin-top: 12px;
}
</ style >
</ head >
< body >
< 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 =
< style >
div.columns {
margin-top: 80px;
}
.buttons {
margin-top: 15px;
}
</ style >
</ head >
< body >
< 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.
Share your thoughts in the comments
Please Login to comment...