how to give a border to bootstrap tab contents

Question

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

Answer 1

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 #ffffd;
    border-right: 1px solid #ffffd;
    border-bottom: 1px solid #ffffd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.bordered-tab-contents > .nav-tabs {
    margin-bottom: 0;
}

markup structure

    

        ...
    

    

        

            ...