Open In App

Bulma | File

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.



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


Article Tags :