Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap File - examples & tutorial


Bootstrap 5 File

File Input is a field which the user can use to upload one or more files (photos, documents or any other file type) from local storage.

Basic example

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

          <label class="form-label" for="customFile">Default file input example</label>
          <input type="file" class="form-control" id="customFile" />

Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.

          <label for="formFileDisabled" class="form-label">Disabled file input example</label>
          <input class="form-control" type="file" id="formFileDisabled" disabled />


You may also choose from small and large file inputs to match our similarly sized text inputs.

          <label for="formFileSm" class="form-label">Small file input example</label>
          <input class="form-control form-control-sm" id="formFileSm" type="file" />
          <label for="formFileLg" class="form-label">Large file input example</label>
          <input class="form-control form-control-lg" id="formFileLg" type="file" />