You are here

Home » API reference » Bootstrap Quick Tabs 7

bootstrap3users.css in Bootstrap Quick Tabs 7 

/* included these styles if you are using the Bootstrap 3 theme */

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

extras/bootstrap3users.css
View source 
  1. /* included these styles if you are using the Bootstrap 3 theme */

  2. 

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

  4. 

  5. .tabs-below > .nav-tabs,

  6. .tabs-right > .nav-tabs,

  7. .tabs-left > .nav-tabs,

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

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

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

  11.   border-bottom: 0;

  12. }

  13. 

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

  15.   border: 1px solid #ddd;

  16. }

  17. 

  18. .nav-tabs.nav-stacked {

  19.   border-bottom: 0 none;

  20. }

  21. 

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

  23.   margin-bottom: -3px;

  24. }

  25. 

  26. .nav-pills {

  27.   margin-bottom: 20px;

  28. }

  29. 

  30. .tab-content > .tab-pane,

  31. .pill-content > .pill-pane {

  32.   display: none;

  33. }

  34. 

  35. .tab-content > .active,

  36. .pill-content > .active {

  37.   display: block;

  38. }

  39. 

  40. .tabs-below > .nav-tabs {

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

  42. }

  43. 

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

  45.   margin-top: -1px;

  46.   margin-bottom: 0;

  47. }

  48. 

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

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

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

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

  53. }

  54. 

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

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

  57.   border-top-color: #ddd;

  58.   border-bottom-color: transparent;

  59. }

  60. 

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

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

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

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

  65. }

  66. 

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

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

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

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

  71.   float: none;

  72. }

  73. 

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

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

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

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

  78.   min-width: 74px;

  79.   margin-right: 0;

  80.   margin-bottom: 3px;

  81. }

  82. 

  83. .tabs-left > .nav-tabs {

  84.   float: left;

  85.   margin-right: 19px;

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

  87. }

  88. 

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

  90.   float: left;

  91.   margin-right: 19px;

  92. }

  93. 

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

  95.   margin-right: -1px;

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

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

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

  99. }

  100. 

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

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

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

  104. }

  105. 

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

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

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

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

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

  111. }

  112. 

  113. .tabs-right > .nav-tabs {

  114.   float: right;

  115.   margin-left: 19px;

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

  117. }

  118. 

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

  120.   float: right;

  121.   margin-left: 19px;

  122. }

  123. 

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

  125.   margin-left: -1px;

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

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

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

  129. }

  130. 

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

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

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

  134. }

  135. 

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

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

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

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

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

  141. }

  142. 

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

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

  145.   overflow-x: hidden;

  146. }