<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File Sizes</
title
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.file{
margin-top: 25px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>
GeeksforGeeks
</
h1
>
<
b
class
=
"is-size-4"
>Bulma File Sizes</
b
>
<
div
class
=
"container"
>
<
div
class="file has-name is-centered
is-info is-small">
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"selected-image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Small Sized File
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No Image Selected.
</
span
>
</
label
>
</
div
>
<
div
class="file has-name is-centered
is-info is-normal">
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"selected-image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Normal Sized File
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No Image Selected.
</
span
>
</
label
>
</
div
>
<
div
class="file has-name is-centered
is-info is-medium">
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"selected-image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Medium Sized File
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No Image Selected.
</
span
>
</
label
>
</
div
>
<
div
class="file has-name is-centered
is-info is-large">
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"selected-image"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Large Sized File
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No Image Selected.
</
span
>
</
label
>
</
div
>
</
div
>
</
body
>
</
html
>