content logo
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