Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple way to create responsive tabs with Bootstrap 5. Tabs functionality is replaced by Accordion on small screens.

Responsive Tabs with Bootstrap 5

A simple way to create responsive tabs with Bootstrap 5. Tabs functionality is replaced by Accordion on small screens.

View sample on JsFiiddle

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 5 responsive Tabs with Accordion</title>
<meta name="description"
content="Simple way to create responsive tabs in Bootstrap 5. Tabs functionality are replaced width Accordion on small screens." />
<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" />
<style>
.responsive-tabs {
padding: 1rem;
}
.responsive-tabs .nav-tabs {
display: none;
}
@media (min-width: 768px) {
.responsive-tabs .nav-tabs {
display: flex;
}
.responsive-tabs .card {
border: none;
}
.responsive-tabs .card .card-header {
display: none;
}
.responsive-tabs .card .collapse {
display: block;
}
}
@media (max-width: 767px) {
.responsive-tabs .tab-pane {
display: block !important;
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container responsive-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-bs-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-bs-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-bs-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<a data-bs-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" data-bs-parent="#content" role="tabpanel"
aria-labelledby="heading-A">
<div class="card-body">[Tab content A]</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false"
aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" data-bs-parent="#content" role="tabpanel"
aria-labelledby="heading-B">
<div class="card-body">[Tab content B]</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a data-bs-toggle="collapse" href="#collapse-C" aria-expanded="true" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" data-bs-parent="#content" role="tabpanel"
aria-labelledby="heading-C">
<div class="card-body">[Tab content C]</div>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
@njeffers
Copy link

This worked great - thank you!

@XaibiAslam
Copy link

Thank you for providing this, it works perfectly.

@antoinebaron
Copy link

Thanks !!

@a3creativesolutions
Copy link

Thanks for this, works really well. Does anyone know how to apply a "active" state to the accordion view (card header). Can't quite figure this one out. I wan to be able to add a + and - (open close) icon, which I can add in the card header element, but i need a trigger to be able to change it from a plus to a minus (and vice versa).

@Chacapamac
Copy link

Simple, work perfectly, no JS involve, pure SCSS solution — Great Work — Thank You!

@perrin73
Copy link

perrin73 commented Sep 8, 2022

Hi this looks great! but i can´t collapse cards inside "card-body" divs ,sadly they appear always "collapse show"

@CasianBlanaru
Copy link

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment