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.