You are here

Home » API reference » Bootstrap Quick Tabs 8

bootstrap_quicktabs.css in Bootstrap Quick Tabs 8 

/* custom inclusion of right, left and below tabs, staacked tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs,
.tabs-below > .nav-pills,
.tabs-right > .nav-pills,
.tabs-left > .nav-pills {
    border-bottom: 0;
}

.nav-tabs.nav-stacked > li > a {
    border: 1px solid #ddd;
}

.nav-tabs.nav-stacked {
    border-bottom: 0 none;
}

.nav-tabs.nav-stacked > li {
    margin-bottom: -3px;
}

.nav-pills {
    margin-bottom: 20px;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
    border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li,
.tabs-left > .nav-pills > li,
.tabs-right > .nav-pills > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a,
.tabs-left > .nav-pills > li > a,
.tabs-right > .nav-pills > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
}

.tabs-left > .nav-pills {
    float: left;
    margin-right: 19px;
}

.tabs-left > .nav-tabs > li > a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
}

.tabs-right > .nav-pills {
    float: right;
    margin-left: 19px;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
}

.tabs-left > .tab-content,
.tabs-right > .tab-content {
    overflow-x: hidden;
}

File

css/bootstrap_quicktabs.css
View source 
  1. /* custom inclusion of right, left and below tabs, staacked tabs */

  2. 

  3. .tabs-below > .nav-tabs,

  4. .tabs-right > .nav-tabs,

  5. .tabs-left > .nav-tabs,

  6. .tabs-below > .nav-pills,

  7. .tabs-right > .nav-pills,

  8. .tabs-left > .nav-pills {

  9.     border-bottom: 0;

  10. }

  11. 

  12. .nav-tabs.nav-stacked > li > a {

  13.     border: 1px solid #ddd;

  14. }

  15. 

  16. .nav-tabs.nav-stacked {

  17.     border-bottom: 0 none;

  18. }

  19. 

  20. .nav-tabs.nav-stacked > li {

  21.     margin-bottom: -3px;

  22. }

  23. 

  24. .nav-pills {

  25.     margin-bottom: 20px;

  26. }

  27. 

  28. .tab-content > .tab-pane,

  29. .pill-content > .pill-pane {

  30.     display: none;

  31. }

  32. 

  33. .tab-content > .active,

  34. .pill-content > .active {

  35.     display: block;

  36. }

  37. 

  38. .tabs-below > .nav-tabs {

  39.     border-top: 1px solid #ddd;

  40. }

  41. 

  42. .tabs-below > .nav-tabs > li {

  43.     margin-top: -1px;

  44.     margin-bottom: 0;

  45. }

  46. 

  47. .tabs-below > .nav-tabs > li > a {

  48.     -webkit-border-radius: 0 0 4px 4px;

  49.     -moz-border-radius: 0 0 4px 4px;

  50.     border-radius: 0 0 4px 4px;

  51. }

  52. 

  53. .tabs-below > .nav-tabs > li > a:hover,

  54. .tabs-below > .nav-tabs > li > a:focus {

  55.     border-top-color: #ddd;

  56.     border-bottom-color: transparent;

  57. }

  58. 

  59. .tabs-below > .nav-tabs > .active > a,

  60. .tabs-below > .nav-tabs > .active > a:hover,

  61. .tabs-below > .nav-tabs > .active > a:focus {

  62.     border-color: transparent #ddd #ddd #ddd;

  63. }

  64. 

  65. .tabs-left > .nav-tabs > li,

  66. .tabs-right > .nav-tabs > li,

  67. .tabs-left > .nav-pills > li,

  68. .tabs-right > .nav-pills > li {

  69.     float: none;

  70. }

  71. 

  72. .tabs-left > .nav-tabs > li > a,

  73. .tabs-right > .nav-tabs > li > a,

  74. .tabs-left > .nav-pills > li > a,

  75. .tabs-right > .nav-pills > li > a {

  76.     min-width: 74px;

  77.     margin-right: 0;

  78.     margin-bottom: 3px;

  79. }

  80. 

  81. .tabs-left > .nav-tabs {

  82.     float: left;

  83.     margin-right: 19px;

  84.     border-right: 1px solid #ddd;

  85. }

  86. 

  87. .tabs-left > .nav-pills {

  88.     float: left;

  89.     margin-right: 19px;

  90. }

  91. 

  92. .tabs-left > .nav-tabs > li > a {

  93.     margin-right: -1px;

  94.     -webkit-border-radius: 4px 0 0 4px;

  95.     -moz-border-radius: 4px 0 0 4px;

  96.     border-radius: 4px 0 0 4px;

  97. }

  98. 

  99. .tabs-left > .nav-tabs > li > a:hover,

  100. .tabs-left > .nav-tabs > li > a:focus {

  101.     border-color: #eeeeee #dddddd #eeeeee #eeeeee;

  102. }

  103. 

  104. .tabs-left > .nav-tabs .active > a,

  105. .tabs-left > .nav-tabs .active > a:hover,

  106. .tabs-left > .nav-tabs .active > a:focus {

  107.     border-color: #ddd transparent #ddd #ddd;

  108.     *border-right-color: #ffffff;

  109. }

  110. 

  111. .tabs-right > .nav-tabs {

  112.     float: right;

  113.     margin-left: 19px;

  114.     border-left: 1px solid #ddd;

  115. }

  116. 

  117. .tabs-right > .nav-pills {

  118.     float: right;

  119.     margin-left: 19px;

  120. }

  121. 

  122. .tabs-right > .nav-tabs > li > a {

  123.     margin-left: -1px;

  124.     -webkit-border-radius: 0 4px 4px 0;

  125.     -moz-border-radius: 0 4px 4px 0;

  126.     border-radius: 0 4px 4px 0;

  127. }

  128. 

  129. .tabs-right > .nav-tabs > li > a:hover,

  130. .tabs-right > .nav-tabs > li > a:focus {

  131.     border-color: #eeeeee #eeeeee #eeeeee #dddddd;

  132. }

  133. 

  134. .tabs-right > .nav-tabs .active > a,

  135. .tabs-right > .nav-tabs .active > a:hover,

  136. .tabs-right > .nav-tabs .active > a:focus {

  137.     border-color: #ddd #ddd #ddd transparent;

  138.     *border-left-color: #ffffff;

  139. }

  140. 

  141. .tabs-left > .tab-content,

  142. .tabs-right > .tab-content {

  143.     overflow-x: hidden;

  144. }