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.

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:



    Simple File Input

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    File input with selected file name

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Different allignment file input

    Example 4: This example shows different color file inputs.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Different color file inputs

    Example 5: This example shows different sizes file input.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Different sizes file input

    Example 6: This example shows boxed-block input

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    boxed-block input




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.