We're using the latest Bootstrap 5.x so the first thing we want to do is set up our basic HTML skeleton to incorporate the bootstrap styles.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Panel</title> <meta charset="utf-8"> <link href="https://email@example.com/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </head> <body> </body> </html>
Next thing we do is get the sample using pill buttons and tabs from the official site and paste it into our HTML.
Copy and paste the following so that it is between your body tags.
You can click the HTML tab in the jsfiddle below to see it.
You can also click the Result tab and see it in action.
The first inner
div contains the
<a> tags which represent the pill buttons the user can click.
The second inner
div contains a set of divs, each of which represent the associated content which is displayed when the associated pill is clicked.
It's not much to see but the functionality is already there.
Now all we have to do is change the content to anything we want to display and it just works!.
Here's an example with some additional content. All I did was add some content between the second inner divs.
This is a nice quick way to get to this type of nice User Interface and functionality.
I also just created an emoji manager and wrote it up here on dev.to.