bootstrap 5 gradient button example

Bootstrap 5 Gradient Button Example

updated 25/09/22 By frontendshape

Hello friend, Toady you will learn how to use bootstrap 5 gradient button. In this section we will not use any external or internal css classes , we will create gradient button using bootstrap 5 in build classes. first you need to setup bootstrap 5 project. you can read below article.

How to install & setup bootstrap 5

How to use Bootstrap 5 Gradient button

Bootstrap 5 support Background gradient class. by adding .bg-gradient class you create gradient color.

  • First you need to create button element and give .btn.
  • Then Apply .bg-primary for background & .text-white
  • Finally you need to use .bg-gradient for gradient


<!DOCTYPE html>
<html lang="en">

        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 Gradient Button Example</title>
        <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

        <button type="button" class="text-white btn bg-primary bg-gradient">Primary</button>
        <button type="button" class="text-white btn bg-secondary bg-gradient">Secondary</button>
        <button type="button" class="text-white btn bg-success bg-gradient">Success</button>
        <button type="button" class="text-white btn bg-danger bg-gradient">Danger</button>
        <button type="button" class="text-white btn bg-warning bg-gradient">Warning</button>
        <button type="button" class="text-white btn bg-info bg-gradient">Info</button>
        <button type="button" class="text-black btn bg-light bg-gradient">Light</button>
        <button type="button" class="text-white btn bg-dark bg-gradient">Dark</button>

 Bootstrap 5 Gradient button collection

Bootstrap 5 Gradient button collection