How to use btn and btn-link Classes In Bootstrap
In this approach, we are using the Bootstrap 5 classes of btn and btn-link to create a button that looks like a link. When the user clicks on the button, the alert shows the message “The Button is Clicked“. Using these classes, we can create link-based buttons that look like actual links rather than a simple button.
Syntax:
<button class="btn btn-link">Click me</button>
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html> <html> <head> <title>Using btn and btn-link Classes</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-light"> <div class="container mt-5"> <h1 class="text-success"> w3wiki </h1> <div class="alert alert-info" role="alert"> <h3 class="mb-3"> Approach 1: Using btn and btn-link classes </h3> <button class="btn btn-link" onclick="alert('The Button is Clicked')"> Click me </button> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"> </script> </body> </html> |
Output:
Create Button Like a Link with Bootstrap 5
Bootstrap 5 has various classes that can be used to create different elements with highly customizable styling. By using Bootstrap Classes, we can create a button that looks similar to the link. In this article, we will create a button that looks like a link with Bootstrap 5 classes. We will explore two different approaches with their Syntax, and practical implementation in terms of example and output demonstration.