Skip to content
Related Articles

Related Articles

Improve Article

Bulma | File

  • Last Updated : 31 Jul, 2020

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 allignment.




    <!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 allignment 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




    My Personal Notes arrow_drop_up
Recommended Articles
Page :