Bootstrap Tabs:

Team Details with Bootstrap Tabs

There are a lot of website with a page dedicated to an about us or meet the team section. In any business or industry, the company is run by the people behind. So, it is important to know who runs the company as well. The meet the team page contains additional data on individual team member where the users can learn about them. These pages are a valuable part of every website as they add a personal touch to the site and lend trust to the visitors. Due to the increased rate in online scams, a really great thing to do is to put more effort in writing these sections. With that said, you should try to add in some convenient features to these pages as well to make it more interesting for the users to read.

For example, you can use Bootstrap CSS tabs to make the page look livelier. Of course, it is important to know which type of tabs to use as well. Following is a Bootstrap tab code to help you display this page beautifully. The code features a photo from each member and the details about each individual member is considered as a tab. You can click on the photo to display it in a larger format along with the name and their profile. With the help of Bootstrap HTML tabs, you can display the team details page perfectly.

Bootstrap Tab Code

CSS Tabs

HTML Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <h1 class="text-center">The Team</h1>
        <div class="tabbable tabs-left">
            <ul class="nav nav-tabs col-md-6 col-lg-6 col-sm-8 col-xs-8">
                <li class="">
                    <a href="#a" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#b" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#c" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/img/lman.jpg" class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#d" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#e" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#f" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/img/lman.jpg" class="img-responsive">
                    </a>
                </li>
            </ul>
            <div class="tab-content col-md-5 col-lg-3 col-sm-4 col-xs-4">
                <div class="tab-pane" id="a">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Irina Sheik</h3>
                                <h5>Chiefe Architect</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="b">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Magnes Carlson</h3>
                                <h5>Chief Advisor</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="c">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Anne Hathaway</h3>
                                <h5>Senior Engineer</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/img/lman.jpg" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="d">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Irina Sheik</h3>
                                <h5>Chiefe Architect</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="e">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Magnes Carlson</h3>
                                <h5>Chief Advisor</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="f">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Anne Hathaway</h3>
                                <h5>Senior Engineer</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/img/lman.jpg" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import 'https://fonts.googleapis.com/css?family=Raleway:400';
body {
    font-family: 'Raleway', sans-serif;
}
a:focus {
    outline: none;
}
h1 {
    padding: 50px;
}
h1:after {
    content: " ";
    border-bottom-style: solid;
    border-bottom-width: 2px;
    display: block;
    width: 100px;
    margin: 0 auto;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.nav-tabs {
border-bottom: none;
}
.nav-tabs > li > a img {
    width: 180px;
}
.nav > li > a {
    padding: 0;
}
.tab-content img {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<style>
@import 'https://fonts.googleapis.com/css?family=Raleway:400';
body {
    font-family: 'Raleway', sans-serif;
}
a:focus {
    outline: none;
}
h1 {
    padding: 50px;
}
h1:after {
    content: " ";
    border-bottom-style: solid;
    border-bottom-width: 2px;
    display: block;
    width: 100px;
    margin: 0 auto;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.nav-tabs {
border-bottom: none;
}
.nav-tabs > li > a img {
    width: 180px;
}
.nav > li > a {
    padding: 0;
}
.tab-content img {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <h1 class="text-center">The Team</h1>
        <div class="tabbable tabs-left">
            <ul class="nav nav-tabs col-md-6 col-lg-6 col-sm-8 col-xs-8">
                <li class="">
                    <a href="#a" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#b" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#c" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/img/lman.jpg" class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#d" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#e" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                    </a>
                </li>
                <li class="">
                    <a href="#f" data-toggle="tab" aria-expanded="false">
                        <img src="http://frontendfreecode.com/img/lman.jpg" class="img-responsive">
                    </a>
                </li>
            </ul>
            <div class="tab-content col-md-5 col-lg-3 col-sm-4 col-xs-4">
                <div class="tab-pane" id="a">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Irina Sheik</h3>
                                <h5>Chiefe Architect</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="b">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Magnes Carlson</h3>
                                <h5>Chief Advisor</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="c">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Anne Hathaway</h3>
                                <h5>Senior Engineer</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/img/lman.jpg" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="d">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Irina Sheik</h3>
                                <h5>Chiefe Architect</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/nesbit.jpg
" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="e">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Magnes Carlson</h3>
                                <h5>Chief Advisor</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/codes/files/lgirl.png" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="f">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-details">
                                <h3>Anne Hathaway</h3>
                                <h5>Senior Engineer</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum imperdiet congue.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-image">
                                <img src="http://frontendfreecode.com/img/lman.jpg" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Tabs:

Team Details with Bootstrap Tabs

Bootstrap Tab Code

CSS Tabs

HTML Tabs