Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Basic Collapse Using Anchor Link</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <style> body{ padding:15px; } </style> </head> <body> <div class="container"> <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"> Click me Collapsible Anchor Link </a> </p> <div class="collapse" id="collapseExample"> <div class="card"> <div class="card-body"> The card text content that display on click of the anchor link. You can add other components inside here to display when someone click on an anchor link. This is the called the collapsible content. </div> </div> </div> </div> </body> </html>
Go to
Tutorialdeep Homepage