how to give a border to bootstrap tab contents

tabs, twitter-bootstrap

Solution

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.

Problem

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.

Original source