Bulma is an open-source CSS framework that ships with pre-styled components which makes making beautiful and responsive websites easier and faster. It is based on flexbox.
In this article, we will be seeing the modifiers we can use with the file element in Bulma.
Bulma File Modifier Classes:
- has-name: This class is used on the file element when you want to show the name of the selected file.
- is-right: This class is used to move the CTA of the file element to the right and the name of the file to the left.
- is-fullwidth: This class is used to expand the file-name container to fill the remaining width.
- is-boxed: This class is used to change the file element in a boxed shape.
Syntax:
<div class="file Modifier-Class">
...
</div>Example: The example below illustrates the use of the file modifier classes discussed above.
HTML
<!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>
|
Output:
Bulma File Modifiers
Reference: https://bulma.io/documentation/form/file/#modifiers