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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File Sizes</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<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:
