<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
title
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
div.columns{
margin-top: 100px;
}
div.file{
margin-bottom: 15px;
}
</
style
>
</
head
>
<
body
>
<
script
src
=
</
script
>
<
div
class
=
'container'
>
<
div
class
=
'columns is-mobile is-centered'
>
<
div
class
=
'column is-3'
>
<
div
class
=
"file has-name is-boxed is-primary"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-boxed is-link"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-boxed is-info"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
<
div
class
=
'column is-3'
>
<
div
class
=
"file has-name is-boxed is-success"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-boxed is-warning"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-boxed is-danger"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Choose file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>