Bulma | Image
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 image class is kind of a container since images took few minutes to load, an image container is reserved space for that image so that website’s layout not going to break while image loading or even in image errors.
Example 1: This example using Bulma to display the image.
<!DOCTYPE html>
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< script src =
</ script >
< style >
div.columns {
margin-top: 20px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
color: green !important
}
p {
font-family: calibri;
font-size: 16px;
text-align: justify;
}
div p {
margin-top: 10px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div >
< h1 class = 'title has-text-centered' >
Display image
</ h1 >
</ div >
< div class = 'box' >
< div >
< figure class = "image is-5by3" >
< img src =
</ figure >
</ div >
< div >
< p >
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer
programming. Modern computers have
the ability to follow generalized
sets of operations, called programs.
These programs enable computers to
perform an extremely wide range of
tasks.
</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example using Bulma to display loading error or image error.
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< script src =
</ script >
< style >
div.columns {
margin-top: 20px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
color: green !important
}
p {
font-family: calibri;
font-size: 16px;
text-align: justify;
}
div p {
margin-top: 10px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div >
< h1 class = 'title has-text-centered' >
Image Error
</ h1 >
</ div >
< div class = 'box' >
< div >
< figure class = "image is-5by3" >
</ figure >
</ div >
< div >
< p >
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer programming.
Modern computers have the ability to
follow generalized sets of operations,
called programs. These programs enable
computers to perform an extremely wide
range of tasks.
</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Explanation: Bulma image class acts as a container that reserved space for the image so that website layout is not going to break even when image error occurs. Here we provide a false image URL but in spite of that space is reserved for the image to load.
Example 3: This example using Bulma to create a rounded Image.
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< script src =
</ script >
< 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" >
< article class = "media" >
< div class = "media-left" >
< figure class = "image is-128x128" >
< img class = 'is-rounded'
src =
</ figure >
</ div >
< div class = "media-content" >
< div class = "content" >
< p >
< strong >Bill Gates</ strong >
< small >@BillGates</ small >
< small >36m</ small >
< br >
The horrifying killings of
George Floyd, Ahmaud Arbery,
Breonna Taylor and far too
many other Black people—and
the protests they sparked—are
shining a light on the brutal
injustices that Black people
experience every day...
</ 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:
Example 4: This example using Bulma to create different size of images.
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< style >
div.columns {
margin-top: 80px;
}
p {
font-size: 20px
}
th {
font-size: 20px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div class = "box" >
< table class = 'table is-fullwidth' >
< thead >
< tr >
< th >Size</ th >
< th >Image</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< p >24x24px</ p >
</ td >
< td >
< figure class = 'image is-24x24' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >32x32px</ p >
</ td >
< td >
< figure class = 'image is-32x32' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >48x48px</ p >
</ td >
< td >
< figure class = 'image is-48x48' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >64x64px</ p >
</ td >
< td >
< figure class = 'image is-64x64' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >96x96px</ p >
</ td >
< td >
< figure class = 'image is-96x96' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >128x128px</ p >
</ td >
< td >
< figure class = 'image is-128x128' >
< img src =
</ figure >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 5: This example uses Bulma to create a responsive image with aspect ratio.
<!DOCTYPE html>
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< style >
div.columns {
margin-top: 20px;
}
p {
font-size: 20px
}
th {
font-size: 20px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div class = "box" >
< table class = 'table is-fullwidth' >
< thead >
< tr >
< th >Size</ th >
< th >Image</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< p >1by1</ p >
</ td >
< td >
< figure class = 'image is-1by1' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >5by4</ p >
</ td >
< td >
< figure class = 'image is-5by4' >
< img src =
</ figure >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 6: This example uses Bulma to create a responsive image with aspect ratio.
<!DOCTYPE html>
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< style >
div.columns {
margin-top: 20px;
}
p {
font-size: 20px
}
th {
font-size: 20px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div class = "box" >
< table class = 'table is-fullwidth' >
< thead >
< tr >
< th >Size</ th >
< th >Image</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< p >4by3</ p >
</ td >
< td >
< figure class = 'image is-4by3' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >3by2</ p >
</ td >
< td >
< figure class = 'image is-3by2' >
< img src =
</ figure >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 7: This example uses Bulma to create a responsive image with aspect ratio.
<!DOCTYPE html>
< html >
< head >
< title >Bulma Image</ title >
< link rel = 'stylesheet' href =
< style >
div.columns {
margin-top: 5px;
}
p {
font-size: 20px
}
th {
font-size: 20px;
}
</ style >
</ head >
< body >
< div class = 'container has-text-centered' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-6' >
< div class = "box" >
< table class = 'table is-fullwidth' >
< thead >
< tr >
< th >Size</ th >
< th >Image</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< p >5by3</ p >
</ td >
< td >
< figure class = 'image is-5by3' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >16by9</ p >
</ td >
< td >
< figure class = 'image is-16by9' >
< img src =
</ figure >
</ td >
</ tr >
< tr >
< td >
< p >2by1</ p >
</ td >
< td >
< figure class = 'image is-2by1' >
< img src =
</ figure >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Note: Here in all the above examples, we use some extra Bulma classes like container, column, title, table, etc. to design the content well.
Share your thoughts in the comments
Please Login to comment...