Bulma | File
Bulma is a free, 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 file element is used to upload custom file input. The ‘file’ component comprises of several sub-elements that we have to add exclusively to design our content well. These elements are listed below.
-
-
file-label – It is the actual interactive and clickable part of the file element.
- file-input – It is the native file input, hidden for styling purposes.
- file-cta – It is the upload call-to-action.
- file-icon- It is an optional upload icon
- file-label – the “Choose a file…” text
- file-name – a container for the chosen file name.
Example 1: This example shows simple Bulma file input.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
</
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
=
"file"
>
<
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 a file…
</
span
>
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
Example 2: This example shows file input with selected file name wrapped in a box container.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
</
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
=
"file has-name"
>
<
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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
Example 3: This example shows file input and selected file name with different alignment.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</
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
=
"file has-name"
>
<
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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-right"
>
<
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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
Example 4: This example shows different color file inputs.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</
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
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name 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 a file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
Example 5: This example shows different sizes file input.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</
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-6'
>
<
div
class
=
"file has-name is-small"
>
<
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"
>
Small file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name"
>
<
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"
>
Normal file...
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-medium"
>
<
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"
>
Medium file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
<
div
class
=
"file has-name is-large"
>
<
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"
>
Large file…
</
span
>
</
span
>
<
span
class
=
"file-name"
>
Nature-at-its-best.png
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
Example 6: This example shows boxed-block input
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File</
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: 100px;
}
div.file{
margin-bottom: 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'
>
<
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
>
Output: