how to give a border to bootstrap tab contents
Twitter BootstrapTabsTwitter Bootstrap Problem Overview
I'm using bootstrap tabs and it works perfectly.
I'm trying to figure out if there is a way to use bootstrap to give a border to the contents of the tabs that is connected to the border of the pill so it will look like one box.
I tried doing this with my own css, but there is a cap between the tab pill border and tab content border that is a margin the tab pill needs to have and can't be removed.
I want it to look like the below image.
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
The following css should do exactly what you're looking for :)
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
margin-bottom: 0; on .nav-tabs removes the gap in between the pills and content.
The padding on .tab-content makes the content not pressed against the new borders on the left and right.
Solution 2 - Twitter Bootstrap
I would modify Kisuka's answer to the following:
CSS
.tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
SCSS for Bootstrap 4
.tab-pane {
border-left: 1px solid $nav-tabs-border-color;
border-right: 1px solid $nav-tabs-border-color;
border-bottom: 1px solid $nav-tabs-border-color;
border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
padding: $spacer;
}
.nav-tabs {
margin-bottom: 0;
}
Solution 3 - Twitter Bootstrap
With following code, all corner have radius, but tabs offset.
.nav-tabs {
padding-left: 15px;
margin-bottom: 0;
border: none;
}
.tab-content {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
}
Caution: If you set nav-tab's padding-left 0px, first tab conflicts with left-top radius of contents.
Solution 4 - Twitter Bootstrap
Being more DRY then @goat solution, you could also reuse the panel css like:
.tab-content.panel
{
border-top: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
<div>
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content panel">
<div class="tab-pane panel-body">
...
</div>
</div>
</div>
tab-content panel panel-default and tab-pane panel-body. Then you don't need to redefine the border and padding. Just remove the top border and top radius.
Solution 5 - Twitter Bootstrap
This was asked a long time ago but the trick here might help some people:
Put in a div.container your .nav-tabs and .tab-content.
To that div.container, give a fixed height says 300px and border-bottom: 1px solid #ccc and overflow: hidden !important.
Then to the .tab-content, I add this css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;
And it works. Try it out ( http://jsfiddle.net/996Bw/ )
Solution 6 - Twitter Bootstrap
I modified the answer's by @user3749683 and @Kisuka so that you don't have to change the definition of any existing bootstrap styles. Instead, you just add a new class to the parent element. I used first child selectors so that you can have nested tabs that don't necessarily need to have the bordered content too.
.bordered-tab-contents > .tab-content > .tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.bordered-tab-contents > .nav-tabs {
margin-bottom: 0;
}
markup structure
<div class="bordered-tab-contents">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
<div class="tab-pane" ...>
...
</div>
</div>
</div>
Solution 7 - Twitter Bootstrap
Based on Popnoodles answer, adding .border .border-top-0 to .tab-pane also works in Bootstrap 4.3
<div class="tab-content">
<div class="tab-pane border border-top-0">
<!-- tab content -->
</div>
</div>
or in SCSS
.tab-pane {
@extend .border;
@extend .border-top-0;
@extend .p-3;
}
Solution 8 - Twitter Bootstrap
This is an example of using just bootstrap that aligns content to nav-tabs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="container border-right border-left border-bottom">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem possimus in temporibus nemo dolorem? Nemo quibusdam, rem deleniti adipisci eveniet voluptas enim provident voluptates voluptate sit! Similique voluptatem accusamus officia?
</div>
</div>
</body>
</html>
Solution 9 - Twitter Bootstrap
For bootstrap 5 using box-shadow for .tab-content may work, since .nav-tabs is using it too.
border: 0;
box-shadow: 0px 1px 0px #b1b4b6, 1px 0px 0px #b1b4b6, -1px 0px 0px #b1b4b6,
-1px 1px 0px #b1b4b6, 1px 1px 0px #b1b4b6, 1px -1px 0px #b1b4b6,
-1px -1px 0px #b1b4b6;
Solution 10 - Twitter Bootstrap
You can use the following code to achieve it :
JSfiddle Demo
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #dddddd;
outline:0;
}
}