Bulma is a component-rich, open-source CSS framework based on flexbox. In this article, we will be seeing the different sizes of the File element we can use in Bulma. The File element comes in 4 different sizes: small, normal, medium, and large. The normal size is the default size of the file element.
Bulma File Size Classes:
- is-small: This class is used to make the File element small in size.
- is-normal: This class is used to make the File element normal in size.
- is-medium: This class is used to make the File element medium in size.
- is-large: This class is used to make the File element large in size.
Syntax:
<div class="file is-small"> ... </div>
Example: The below example illustrates the use of Bulma file size classes.
HTML
<!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" >
<!-- Small Sized File -->
< 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 >
<!-- Normal Sized File -->
< 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 >
<!-- Medium Sized file -->
< 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 >
<!-- Larged Sized File -->
< 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 >
|
Output:
Reference: https://bulma.io/documentation/form/file/#sizes