You are here

Home » API reference » Bootstrap Quick Tabs 7

bootstrap2users.css in Bootstrap Quick Tabs 7 

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

/* custom inclusion of justified tabs */

.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
}

.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
}


/* custom include pills-right */

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

File

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

  2. 

  3. /* custom inclusion of justified tabs */

  4. 

  5. .nav-tabs.nav-justified {

  6.   width: 100%;

  7.   border-bottom: 0;

  8. }

  9. .nav-tabs.nav-justified > li {

  10.   float: none;

  11. }

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

  13.   text-align: center;

  14.   margin-bottom: 5px;

  15. }

  16. .nav-tabs.nav-justified > .dropdown .dropdown-menu {

  17.   top: auto;

  18.   left: auto;

  19. }

  20. 

  21. @media (min-width: 768px) {

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

  23.     display: table-cell;

  24.     width: 1%;

  25.   }

  26.   .nav-tabs.nav-justified > li > a {

  27.     margin-bottom: 0;

  28.   }

  29. }

  30. .nav-tabs.nav-justified > li > a {

  31.   margin-right: 0;

  32.   border-radius: 4px;

  33. }

  34. .nav-tabs.nav-justified > .active > a,

  35. .nav-tabs.nav-justified > .active > a:hover,

  36. .nav-tabs.nav-justified > .active > a:focus {

  37.   border: 1px solid #dddddd;

  38. }

  39. @media (min-width: 768px) {

  40.   .nav-tabs.nav-justified > li > a {

  41.     border-bottom: 1px solid #dddddd;

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

  43.   }

  44.   .nav-tabs.nav-justified > .active > a,

  45.   .nav-tabs.nav-justified > .active > a:hover,

  46.   .nav-tabs.nav-justified > .active > a:focus {

  47.     border-bottom-color: #ffffff;

  48.   }

  49. }

  50. 

  51. .nav-justified {

  52.   width: 100%;

  53. }

  54. .nav-justified > li {

  55.   float: none;

  56. }

  57. .nav-justified > li > a {

  58.   text-align: center;

  59.   margin-bottom: 5px;

  60. }

  61. .nav-justified > .dropdown .dropdown-menu {

  62.   top: auto;

  63.   left: auto;

  64. }

  65. @media (min-width: 768px) {

  66.   .nav-justified > li {

  67.     display: table-cell;

  68.     width: 1%;

  69.   }

  70.   .nav-justified > li > a {

  71.     margin-bottom: 0;

  72.   }

  73. }

  74. .nav-tabs-justified {

  75.   border-bottom: 0;

  76. }

  77. .nav-tabs-justified > li > a {

  78.   margin-right: 0;

  79.   border-radius: 4px;

  80. }

  81. .nav-tabs-justified > .active > a,

  82. .nav-tabs-justified > .active > a:hover,

  83. .nav-tabs-justified > .active > a:focus {

  84.   border: 1px solid #dddddd;

  85. }

  86. @media (min-width: 768px) {

  87.   .nav-tabs-justified > li > a {

  88.     border-bottom: 1px solid #dddddd;

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

  90.   }

  91.   .nav-tabs-justified > .active > a,

  92.   .nav-tabs-justified > .active > a:hover,

  93.   .nav-tabs-justified > .active > a:focus {

  94.     border-bottom-color: #ffffff;

  95.   }

  96. }

  97. 

  98. 

  99. /* custom include pills-right */

  100. 

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

  102.   float: right;

  103.   margin-left: 19px;

  104. }

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

  106.   float: left;

  107.   margin-right: 19px;

  108. }

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

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

  111.   float: none;

  112. }