Bootstrap Extensions

Bootstrap Extensions

Some CSS classes to extend Twitter Bootstrap, by Acid Labs and Kolor Sheep.

Getting Started

See the project README for contributions, credits and licensing.

Tables

.custom-table-bordered

Remove the columns border from a bordered table. Use .custom-table-bordered with .table and .table-bordered.

Example

<table class="table table-bordered custom-table-bordered">
  ...
</table>
# First Name Last Name Username
1 Alice Agostini alice
2 Bob Niemans bob
3 Charles Cowalsky charlie

The code

// Use the .custom-table-bordered class to disable the columns borders.
// Note: .table and .table-bordered are required to use .custom-table-bordered
.table.table-bordered.custom-table-bordered {
  td, th {
    border-left-width: 0px;
  &:first-child {
    border-left-width: 1px;
    }
  }
}

.custom-table-headless

Remove the head from a table. Use .custom-table-headless with .table. You may also use it with .table-bordered and .custom-table-bordered.

Example

<table class="table custom-table-headless">
  ...
</table>
# First Name Last Name Username
1 Alice Agostini alice
2 Bob Niemans bob
3 Charles Cowalsky charlie
# First Name Last Name Username
1 Alice Agostini alice
2 Bob Niemans bob
3 Charles Cowalsky charlie
# First Name Last Name Username
1 Alice Agostini alice
2 Bob Niemans bob
3 Charles Cowalsky charlie

The code

// Remove the head from a .table
// See also .table-bordered, .custom-btn-bordered
// Note: .table is required to use .custom-table-headless
.table.custom-table-headless {
  border-top: 0;
  margin-top: 40px;
  thead {
    left: -9999px;
    position: absolute;
  }
  tr:first-child {
    td:first-child {
      border-top-left-radius: 4px;
    }
    td:last-child {
      border-top-right-radius: 4px;
    }
  }
}

Buttons

.custom-btn-icon

Pixel-perfect icon buttons. Do notice that .custom-btn-icon must be used with .btn and Font Awesome, but may also be used with .btn-link for icon-only buttons. Large, normal, small and mini icon-only buttons can be created in any standard color you want! Example: use .btn.btn-link.custom-btn-icon.custom-btn-icon-small.custom-btn-icon-warning for a nice small yellow icon-only button.

Example

<a href="#" class="btn btn-link custom-btn-icon custom-btn-icon-danger">
  <i class="icon-heart"></i>
</a>
Color buttons, color icons
Icon-only buttons
Multi-size icon-only buttons

The SCSS code

/* Icon buttons, must be used with .btn, see comments for options. */
.btn.custom-btn-icon {
  /* should be used with .btn.btn-link for icon-olny buttons */
  color: $btnBackground;
  font-size: 24px;
  padding-bottom: 2px;
  padding-top: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

  &.custom-btn-icon-mini {
    font-size: 16px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  &.custom-btn-icon-small {
    font-size: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  &.custom-btn-icon-large {
    font-size: 32px;
    padding-bottom: 0;
    padding-top: 0;
  }

  &:focus, &:hover {
    color: $btnBackgroundHighlight;
    text-decoration: none;
  }

  &.custom-btn-icon-link {
    color: $btnPrimaryBackground;
    &:focus, &:hover {
      color: $btnPrimaryBackgroundHighlight;
    }
  }

  &.custom-btn-icon-info {
    color: $btnInfoBackground;
    &:focus, &:hover {
      color: $btnInfoBackgroundHighlight;
    }
  }

  &.custom-btn-icon-success {
    color: $btnSuccessBackground;
    &:focus, &:hover {
      color: $btnSuccessBackgroundHighlight;
    }
  }

  &.custom-btn-icon-warning {
    color: $btnWarningBackground;
    &:focus, &:hover {
      color: $btnWarningBackgroundHighlight;
    }
  }

  &.custom-btn-icon-danger {
    color: $btnDangerBackground;
    &:focus, &:hover {
      color: $btnDangerBackgroundHighlight;
    }
  }

  &.custom-btn-icon-inverse {
    color: $btnInverseBackground;
    &:focus, &:hover {
      color: $btnInverseBackgroundHighlight;
    }
  }
}

The LESS code

// Use the .custom-btn-icon to create pixel-perfect icon buttons, or icon-only buttons
// All standard sizes and color are also available!
// Note: .btn is required to use .custom-btn-icon. Both .btn and .btn-link are required
// to create icon-only buttons.
.btn.custom-btn-icon {
  // should be used with .btn.btn-link for icon-olny buttons
  color: @btnBackground;
  font-size: 24px;
  padding-bottom: 2px;
  padding-top: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

  &.custom-btn-icon-mini {
    font-size: 16px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  &.custom-btn-icon-small {
    font-size: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  &.custom-btn-icon-large {
    font-size: 32px;
    padding-bottom: 0;
    padding-top: 0;
  }

  &:focus, &:hover {
    color: @btnBackgroundHighlight;
    text-decoration: none;
  }

  &.custom-btn-icon-link {
    color: @btnPrimaryBackground;
    &:focus, &:hover {
      color: @btnPrimaryBackgroundHighlight;
    }
  }

  &.custom-btn-icon-info {
    color: @btnInfoBackground;
    &:focus, &:hover {
      color: @btnInfoBackgroundHighlight;
    }
  }

  &.custom-btn-icon-success {
    color: @btnSuccessBackground;
    &:focus, &:hover {
      color: @btnSuccessBackgroundHighlight;
    }
  }

  &.custom-btn-icon-warning {
    color: @btnWarningBackground;
    &:focus, &:hover {
      color: @btnWarningBackgroundHighlight;
    }
  }

  &.custom-btn-icon-danger {
    color: @btnDangerBackground;
    &:focus, &:hover {
      color: @btnDangerBackgroundHighlight;
    }
  }

  &.custom-btn-icon-inverse {
    color: @btnInverseBackground;
    &:focus, &:hover {
      color: @btnInverseBackgroundHighlight;
    }
  }
}