File upload

A custom file upload input, without JavaScript

Sizes

You can append one of the 6 available sizes:

  • is-tiny
  • is-small
  • is-normal (default)
  • is-medium
  • is-large
  • is-jumbo

Example Tiny

HTML 

<div class="file is-tiny">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Tiny file…
                        </span>
                        </span>
                        </label>
                        </div>

Example Small

HTML 

<div class="file is-small">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Small file…
                        </span>
                        </span>
                        </label>
                        </div>

Example Normal

HTML 

<div class="file is-normal">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Normal file…
                        </span>
                        </span>
                        </label>
                        </div>

Example Medium

HTML 

<div class="file is-medium">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Medium file…
                        </span>
                        </span>
                        </label>
                        </div>

Example Large

HTML 

<div class="file is-large">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Large file…
                        </span>
                        </span>
                        </label>
                        </div>

Example Jumbo

HTML 

<div class="file is-jumbo">
                        <label class="file-label">
                        <input class="file-input" type="file" name="resume">
                        <span class="file-cta">
                        <span class="file-label">
                            Jumbo file…
                        </span>
                        </span>
                        </label>
                        </div>