Team Details with Bootstrap Tabs

Bootstrap Tabs: Team Details with Bootstrap Tabs

In many professional sites, there is a section where team members introduce their company, this section is very important and therefore how this section is displayed is very important, with the help of tabs, this section can be displayed beautifully. But it is important to know which models of tabs to use. In the following code, the photo of each member of the team is beautifully considered as a tab, and by clicking on it, the photo of the person is displayed in a larger format with his profile and name.

#Bootstrap Tab Code # CSS Tabs # HTML Tabs

<!-- this script got from www.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/codes/files/lman.png" 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/codes/files/lman.png" 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/codes/files/lman.png" 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/codes/files/lman.png" 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://www.frontendfreecode.com">Frontend Code</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 www.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/codes/files/lman.png" 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/codes/files/lman.png" 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/codes/files/lman.png" 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/codes/files/lman.png" alt=" profile " class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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>

</body>
</html>

Preview

RECENT CODES

Bootstrap Table with Sorting Animation

Bootstrap Table with Col and Row Effect on Hover

Bootstrap Table with Fixed Header

Bootstrap Collapsing / Expanding Table

Bootstrap Pricing Table with Fade Effect

Bootstrap Header with Hover Effect

Bootstrap Dynamic Header with Style Change

Bootstrap Header with Material Effect for Tabs

Animating Bootstrap 4 Navbar

Vertical Bootstrap Header with Animation

Feel The Power

Bootstrap Tabs: Team Details with Bootstrap Tabs

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo