Skip to content

Commit

Permalink
Fix missing bottom border for bootstrap 4.6.0
Browse files Browse the repository at this point in the history 
In Bootstrap 4.6.0, as a result of twbs/bootstrap#32211, the bottom border is not visible in the responsive-tab in small mode.

This fixes it.
  • Loading branch information
@jrochkind
jrochkind committed Sep 9, 2021
1 parent 6d53662 commit 16909a8
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 24 deletions.
27 changes: 14 additions & 13 deletions dist/css/responsive-tabs.css
View file
Expand Up @@ -4,31 +4,32 @@

@media (min-width: 768px) {
.responsive-tabs .dropdown-arrow {
display: none;
}
display: none;
}
}

@media screen and (max-width: 767px) {
.responsive-tabs {
position: relative;
position: relative;
border: 1px solid #ccc;
}
.responsive-tabs li {
width: 100%;
margin: 0 !important;
width: 100%;
margin: 0 !important;
}
.responsive-tabs li > a {
display: none;
border: 0 !important;
display: none;
border: 0 !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
.responsive-tabs.open li > a, .responsive-tabs li > a.active {
display: block;
}
.responsive-tabs .dropdown-arrow {
.responsive-tabs .dropdown-arrow {
position: absolute;
top: 15px;
right: 15px;
right: 15px;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
Expand All @@ -37,10 +38,10 @@
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all ease .5s;
cursor: pointer;
cursor: pointer;
}
.responsive-tabs.open .dropdown-arrow {
transform: rotate(-135deg);
transition: all ease .5s;
}
}
transition: all ease .5s;
}
}
22 changes: 11 additions & 11 deletions home.html
View file
Expand Up @@ -2,16 +2,16 @@
<html>
<head>
<title>Bootstrap 4 Tabs Responsive </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap responsive will turn the bootstrap nav tabs into dropdown in below 768px screensize">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap responsive will turn the bootstrap nav tabs into dropdown in below 768px screensize">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="dist/css/responsive-tabs.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/ico" sizes="16x16">
<link href="style.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/ico" sizes="16x16">
<link href="style.css" rel="stylesheet">
<script data-ad-client="ca-pub-4534759138445365" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>

<div class="container">
<h1 class="page-header text-center my-5">Bootstrap 4 Responsive Tabs (Dropdown) Demo</h1>

Expand All @@ -30,7 +30,7 @@ <h1 class="page-header text-center my-5">Bootstrap 4 Responsive Tabs (Dropdown)
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
Expand All @@ -40,20 +40,20 @@ <h1 class="page-header text-center my-5">Bootstrap 4 Responsive Tabs (Dropdown)
<p>Third Panel</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="dist/js/responsive-tabs.js"></script>


<script>
(function ($) {
$('.nav-tabs').responsiveTabs();
})(jQuery);
$('.nav-tabs').responsiveTabs();
})(jQuery);
</script>

</body>
Expand Down

0 comments on commit 16909a8

Please sign in to comment.