content logo
Bootstrap Tabs: Bootstrap Tabs with Icon Buttons

Sometimes, an image talks more than texts. You can implement this idea in your web design and use images in buttons. When you need tabs to categorize your contents and release some space, you can use the images as tabs buttons as well. The following example helps you do this.

#Bootstrap Tab Code #CSS Tabs #HTML Tabs
<!-- this script got from www.frontendfreecode.com -->
<div class="container-fluid"> <div class="row"> <div class="icon-tab col-xs-2 col-xs-offset-3 active"> <span class="glyphicon glyphicon-music"></span> <span class="icon-label">Musics</span> </div> <div class="icon-tab col-xs-2 col-sm-2 "> <span class="glyphicon glyphicon-camera"></span> <span class="icon-label">Pictures</span> </div> <div class="icon-tab col-xs-2 col-sm-2"> <span class="glyphicon glyphicon-facetime-video"></span> <span class="icon-label">Movies</span> </div> </div> </div> <!-- Your elements --> <div class="item col-sm-10 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"><h3>Element 1</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div> </div> </div> <div class="item col-sm-10 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"><h3>Element 2</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div> </div> </div> <div class="item col-sm-10 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"><h3>Element 3</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div> </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.icon-tab {
    margin-top: 30px;
  
    text-align : center;
    cursor: pointer;
}

.icon-tab span.glyphicon {
    display : block;
    font-size: 35px;

    color: #8d98b8;

    margin:  0px auto;
    line-height: 65px;

    transition-duration: 0.25s;
}

.icon-tab span.glyphicon::before {
    padding: 2px 6.5px;
    border-radius: 80%;
}


.icon-tab.active span.glyphicon {
    color: white;
    margin-bottom: 10px;
}

.icon-tab.active span.glyphicon::before {
    padding: 15px 19.5px;
    border-radius: 100%;

    transition-duration: 0.4s;
}

.icon-tab.active span.glyphicon::before {
    background: linear-gradient(to bottom right, #24C6DC, #514A9D);
}


.icon-label {
    color:  #b3b3b3;
    font-size: 16px;  
  
    transition-duration: 0.35s;
}


.icon-tab.active .icon-label, .icon-tab:hover .icon-label {
    color: black;
}

.icon-tab:hover span.glyphicon {
    margin-bottom: 10px;
}


.item {
  margin-top: 50px;
}


@media (max-width:767px) { 
    .icon-tab {
        
    }
  
    .icon-tab span {
        display: inline !important;
        vertical-align : middle;
    }  
  
    .icon-tab.active span.glyphicon {
        padding-right: 10px;
    }
  
    .icon-tab:hover span.glyphicon {
        padding-right: 10px;
        transition-duration: 0.25s;
    }
}
$(function () {
  $('div.icon-tab').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    setDisplay(450);
  });

  function setDisplay(time) {
    $('div.icon-tab').each(function (rang) {
      $('.item').eq(rang).css('display', 'none');

      if ($(this).hasClass('active')) {
        $('.item').eq(rang).fadeIn(time);
      }
    });
  }

  //Disable the animation on page load
  setDisplay(0);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
.icon-tab {
    margin-top: 30px;
  
    text-align : center;
    cursor: pointer;
}

.icon-tab span.glyphicon {
    display : block;
    font-size: 35px;

    color: #8d98b8;

    margin:  0px auto;
    line-height: 65px;

    transition-duration: 0.25s;
}

.icon-tab span.glyphicon::before {
    padding: 2px 6.5px;
    border-radius: 80%;
}


.icon-tab.active span.glyphicon {
    color: white;
    margin-bottom: 10px;
}

.icon-tab.active span.glyphicon::before {
    padding: 15px 19.5px;
    border-radius: 100%;

    transition-duration: 0.4s;
}

.icon-tab.active span.glyphicon::before {
    background: linear-gradient(to bottom right, #24C6DC, #514A9D);
}


.icon-label {
    color:  #b3b3b3;
    font-size: 16px;  
  
    transition-duration: 0.35s;
}


.icon-tab.active .icon-label, .icon-tab:hover .icon-label {
    color: black;
}

.icon-tab:hover span.glyphicon {
    margin-bottom: 10px;
}


.item {
  margin-top: 50px;
}


@media (max-width:767px) { 
    .icon-tab {
        
    }
  
    .icon-tab span {
        display: inline !important;
        vertical-align : middle;
    }  
  
    .icon-tab.active span.glyphicon {
        padding-right: 10px;
    }
  
    .icon-tab:hover span.glyphicon {
        padding-right: 10px;
        transition-duration: 0.25s;
    }
}
</style>

</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="icon-tab col-xs-2 col-xs-offset-3 active">
        <span class="glyphicon glyphicon-music"></span>
        <span class="icon-label">Musics</span>
    </div>
    <div class="icon-tab col-xs-2 col-sm-2 ">
        <span class="glyphicon glyphicon-camera"></span>
        <span class="icon-label">Pictures</span>
    </div>
    <div class="icon-tab col-xs-2 col-sm-2">
        <span class="glyphicon glyphicon-facetime-video"></span>
        <span class="icon-label">Movies</span>
    </div>
  </div> 
</div>

<!-- Your elements -->
<div class="item col-sm-10 col-sm-offset-1">
    <div class="panel panel-default">
      	<div class="panel-heading"><h3>Element 1</h3></div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div>
    </div>    
</div>
  
<div class="item col-sm-10 col-sm-offset-1">
    <div class="panel panel-default">
        <div class="panel-heading"><h3>Element 2</h3></div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div>
    </div>    
</div>
  
<div class="item col-sm-10 col-sm-offset-1">
    <div class="panel panel-default">
        <div class="panel-heading"><h3>Element 3</h3></div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis tempor quam quis ultricies. In laoreet posuere odio, eget viverra nisl auctor eu. Aenean auctor turpis vel justo tincidunt molestie.</div>
    </div>    
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(function () {
  $('div.icon-tab').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    setDisplay(450);
  });

  function setDisplay(time) {
    $('div.icon-tab').each(function (rang) {
      $('.item').eq(rang).css('display', 'none');

      if ($(this).hasClass('active')) {
        $('.item').eq(rang).fadeIn(time);
      }
    });
  }

  //Disable the animation on page load
  setDisplay(0);
});
</script>

</body>
</html>
Preview