- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - File
Description
It is used to upload files from user data by using the .file element in the input tag. The .file element is a main container, which includes below sub elements −
.file-label − It is considered as clickable part of the element.
.file-input − It is hidden for some styling purposes.
.file-cta − It calls the uploading process.
.file-icon − It specifies the upload icon.
.file-label − It defines the text for file label.
.file-name − It returns the name of the chosen file.
Let's create a simple example for file upload by using above sub elements as shown below −
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title>Bulma Forms Example</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <section class = "section"> <div class = "container"> <span class = "title"> File Upload </span> <br> <br> <div class = "file"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Upload a file… </span> </span> </label> </div> </div> </section> </body> </html>
It displays the below output −
Colors and Sizes
Bulma provides following 10 modifiers to style the file element.
is-white
is-black
is-light
is-dark
is-primary
is-link
is-info
is-success
is-warning
is-danger
You can also use file element by using 3 additional sizes −
is-small
is-medium
is-large
The below example describes usage of above modifiers and sizes of file element −
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title>Bulma Forms Example</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <section class = "section"> <div class = "container"> <span class = "is-size-5"> File Upload Color Modifiers </span> <br> <br> <div class = "field"> <div class = "file is-primary"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Primary File Upload… </span> </span> </label> </div> </div> <div class = "field"> <div class = "file is-info has-name"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Info File Upload… </span> </span> </label> </div> </div> <div class = "field"> <div class = "file is-warning"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-cloud-upload-alt"></i> </span> <span class = "file-label"> Warning File Upload… </span> </span> </label> </div> </div> <div class = "field"> <div class = "file is-danger has-name is-boxed"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-cloud-upload-alt"></i> </span> <span class = "file-label"> Danger File Upload… </span> </span> </label> </div> </div> <br> <br> <span class = "is-size-5"> File Upload Sizes </span> <br> <br> <div class = "field"> <div class = "file is-small"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Small File Upload... </span> </span> </label> </div> </div> <div class = "field"> <div class = "file"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Normal File Upload... </span> </span> </label> </div> </div> <div class = "field"> <div class = "file is-medium"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Medium File Upload... </span> </span> </label> </div> </div> <div class = "field"> <div class = "file is-large"> <label class = "file-label"> <input class = "file-input" type = "file" name = "fileupload"> <span class = "file-cta"> <span class = "file-icon"> <i class = "fas fa-upload"></i> </span> <span class = "file-label"> Large File Upload... </span> </span> </label> </div> </div> </div> </section> </body> </html>
Execute the above and you will get the below output −