CODEWITHSUNDEEP
twitter-bootstraptabs
user1404536
user1404536

Reputation: 1131

how to give a border to bootstrap tab contents

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. tab content with border

Upvotes: 75

Views: 97093

Answers (10)

pom
pom

Reputation: 473

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;

Upvotes: 0

RobertMadx
RobertMadx

Reputation: 11

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>

Upvotes: 1

Chris Gunawardena
Chris Gunawardena

Reputation: 6468

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;
}

Upvotes: 3

user3749683
user3749683

Reputation: 659

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;
}

Upvotes: 65

Shail
Shail

Reputation: 3649

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;
 }
}

Upvotes: -4

djmj
djmj

Reputation: 5544

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.

Upvotes: 5

goat
goat

Reputation: 31813

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>

Upvotes: 4

amrocs
amrocs

Reputation: 344

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.

Upvotes: 6

idris
idris

Reputation: 187

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/ )

Upvotes: 3

Kisuka
Kisuka

Reputation: 1852

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.

Upvotes: 104

Related Questions