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/acc01/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/acc01/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/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Borders - examples & tutorial

Borders

Bootstrap 5 Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.


Basic examples

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive


            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>
          

Subtractive


            <span class="border-0"></span>
            <span class="border-top-0"></span>
            <span class="border-end-0"></span>
            <span class="border-bottom-0"></span>
            <span class="border-start-0"></span>
          

Color

Change the border color using utilities built on our theme colors.


          <span class="border border-primary"></span>
          <span class="border border-secondary"></span>
          <span class="border border-success"></span>
          <span class="border border-danger"></span>
          <span class="border border-warning"></span>
          <span class="border border-info"></span>
          <span class="border border-light"></span>
          <span class="border border-dark"></span>
          <span class="border border-white"></span>
        

Border-radius

Add classes to an element to easily round its corners.


          <img src="..." class="rounded" alt="..." />
          <img src="..." class="rounded-top" alt="..." />
          <img src="..." class="rounded-end" alt="..." />
          <img src="..." class="rounded-bottom" alt="..." />
          <img src="..." class="rounded-start" alt="..." />
          <img src="..." class="rounded-circle" alt="..." />
          <img src="..." class="rounded-pill" alt="..." />
          <img src="..." class="rounded-0" alt="..." />
        

Sizes

Use .rounded-lg or .rounded-sm for larger or smaller border-radius.


          <img src="..." class="rounded-0" alt="..." />
          <img src="..." class="rounded-1" alt="..." />
          <img src="..." class="rounded-2" alt="..." />
          <img src="..." class="rounded-3" alt="..." />