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.
You can get the link for the required CSS and JavaScript at the bootstrap site (you can see them in our example).
The JavaScript link is required so that the functionality of the pill buttons work to move selection and load the content of each associated div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Panel</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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.
First Inner Div
The first inner div contains the <a> tags which represent the pill buttons the user can click.
Second Inner Div
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!.
Change The Content
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.
If you liked this, check out my new book, Learn HTML5, CSS, JavaScript (Launch Your Dev Career) in my article here on dev.to about the book.
I also just created an emoji manager and wrote it up here on dev.to.
Top comments (0)