Gelform builds Web Applications

Bootstrap 3 horizontal tabs (code snippet)

Some good ol’ fashion nerd for you.

Bootstrap 3 removed horizontal tabs, so here’s a quick code block to use the native tabs, but horizontally. Something like:

Horizontal tabs

Start by putting your tabs in a smaller, sidebar column, and your content in another, wider column.


HTML; echo htmlentities($html) ?>

Then add this css:

.nav-tabs {
  border-bottom: 0; }
  .nav-tabs > li {
    width: 100%; }
    .nav-tabs > li > a {
      border: 1px solid transparent;
      border-radius: 4px 0 0 4px;
      margin-right: 0; }
    .nav-tabs > > a, .nav-tabs > > a:hover {
      background: #FFF;
      border: 1px solid #DDD;
      border-right-color: #FFF;
      margin-right: -1px;
      position: relative;
      z-index: 1; }

.tab-content {
  border: 1px solid #DDD;
  border-radius: 4px;
  margin-left: -31px;
  min-height: 20em;
  padding: 1em;
  position: relative;
  z-index: 0; }

I haven’t made it responsive yet, but it should be pretty easy to re-write the borders with a media query.

let me know if it works for you!

← Blog