Open In App
Related Articles

Bulma | File

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.  

The file element is used to upload custom file input. The ‘file’ component comprises of several sub-elements that we have to add exclusively to design our content well. These elements are listed below.

    • file-label It is the actual interactive and clickable part of the file element.
      • file-input It is the native file input, hidden for styling purposes.
      • file-cta – It is the upload call-to-action.
        • file-icon- It is  an optional upload icon
        • file-label –  the “Choose a file…” text
      • file-name – a container for the chosen file name.

    Example 1: This example shows simple Bulma file input.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
         </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
              <div class="file">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    Simple File Input

    Example 2: This example shows file input with selected file name wrapped in a box container.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
        </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
              <div class="file has-name">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    File input with selected file name

    Example 3: This example shows file input and selected file name  with different alignment.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
      
          div.file{
            margin-bottom: 15px;
          }
      
        .file.is-right {
          justify-content:flex-start;
        }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
            </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
              <div class="file has-name">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-right">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    Different alignment file input

    Example 4: This example shows different color file inputs.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet'
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
      
          div.file{
            margin-bottom: 15px;
          }
      
        .file.is-right {
          justify-content:flex-start;
        }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
         </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
              <div class="file has-name is-primary">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-link">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                          name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-info">
                <label class="file-label">
                  <input class="file-input"
                          type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-success">
                <label class="file-label">
                  <input class="file-input"
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-warning">
                <label class="file-label">
                  <input class="file-input"
                         type="file" 
                          name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-danger">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    Different color file inputs

    Example 5: This example shows different sizes file input.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
      
          div.file{
            margin-bottom: 15px;
          }
      
        .file.is-right {
          justify-content:flex-start;
        }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
         </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-6'>
              <div class="file has-name is-small">
                <label class="file-label">
                  <input class="file-input" 
                          type="file" 
                          name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Small file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Normal file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-medium">
                <label class="file-label">
                  <input class="file-input"
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Medium file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-large">
                <label class="file-label">
                  <input class="file-input" 
                          type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Large file…
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    Different sizes file input

    Example 6: This example shows boxed-block input

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
      
          div.file{
            margin-bottom: 15px;
          }
      
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
        </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-3'>
              <div class="file has-name is-boxed is-primary">
                <label class="file-label">
                  <input class="file-input"
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-boxed is-link">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
              
      
              <div class="file has-name is-boxed is-info">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
            </div>
      
            <div class='column is-3'>
              <div class="file has-name is-boxed is-success">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-boxed is-warning">
                <label class="file-label">
                  <input class="file-input"
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
      
              <div class="file has-name is-boxed is-danger">
                <label class="file-label">
                  <input class="file-input"
                         type="file" name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose file...
                    </span>
                  </span>
                  <span class="file-name">
                    Nature-at-its-best.png
                  </span>
                </label>
              </div>
                
            </div>
          </div>
        </div>
      </body>
    </html>
    
                        

    Output:

    boxed-block input



    Last Updated : 10 Aug, 2022
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads