<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma File Modifiers</
title
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container>p{
margin-top: 25px;
}
.file{
margin-top: 10px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>GeeksforGeeks</
h1
>
<
b
class
=
"is-size-4"
>Bulma File Modifiers</
b
>
<
div
class
=
"container is-fluid"
>
<
p
><
b
>File element with <
i
>has-name</
i
> modifier</
b
></
p
>
<
div
class
=
"file has-name is-centered"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"resume"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Select a file
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No file Selected.
</
span
>
</
label
>
</
div
>
<
p
><
b
>File element with <
i
>is-right</
i
> modifier</
b
></
p
>
<
div
class
=
"file has-name is-right"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"resume"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Select a file
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No file Selected.
</
span
>
</
label
>
</
div
>
<
p
><
b
>File element with <
i
>is-fullwidth</
i
> modifier</
b
></
p
>
<
div
class
=
"file has-name is-fullwidth"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"resume"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Select a file
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No file Selected.
</
span
>
</
label
>
</
div
>
<
p
><
b
>File element with <
i
>is-boxed</
i
> modifier</
b
></
p
>
<
div
class
=
"file is-centered has-name is-boxed"
>
<
label
class
=
"file-label"
>
<
input
class
=
"file-input"
type
=
"file"
name
=
"resume"
>
<
span
class
=
"file-cta"
>
<
span
class
=
"file-icon"
>
<
i
class
=
"fas fa-upload"
></
i
>
</
span
>
<
span
class
=
"file-label"
>
Select a file
</
span
>
</
span
>
<
span
class
=
"file-name"
>
No file Selected.
</
span
>
</
label
>
</
div
>
</
div
>
</
body
>
</
html
>