From: Claudio B. <claudiob@users.noreply.github.com>
Date: Sun, 28 Jun 2026 15:42:28 +0000 (+0200)
Subject: v6: Remove extra bottom border on card navigation nav-tabs (#42571)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=766af22f0fee27aca2ad3eadf794533a64bcdd49;p=thirdparty%2Fbootstrap.git

v6: Remove extra bottom border on card navigation nav-tabs (#42571)

* v6: Remove extra bottom border on card navigation nav-tabs

Adding navigation to a card’s header with the current v6 adds an extra border which is visible in the documentation, see https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/card/#navigation

<img width="1834" height="766" alt="Image" src="https://github.com/user-attachments/assets/2b87d10f-1cf5-4a74-a2df-047a55ae0fb9" />

This commit removes the extra border.

* Update scss/_card.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>
---

diff --git a/scss/_card.scss b/scss/_card.scss
index 4a89d125be..ee99de756b 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -171,7 +171,7 @@ $card-tokens: defaults(
   // Combined selector because of specificity match with `.nav` base class
   .nav.card-header-tabs {
     margin-inline: calc(-.5 * var(--card-cap-padding-x));
-    margin-bottom: calc(-1 * var(--card-cap-padding-y));
+    margin-bottom: calc(-1 * var(--card-cap-padding-y) - var(--nav-tabs-border-width));
     border-block-end: 0;
 
     .nav-link.active {