content logo

Bootstrap Tabs:

Purple Simple Purple Tabs with Flat Icons

Websites contain a lot of information, and the owners upload new data every day. So, the website’s owner should look for a factor to organize their page beautifully. The Purple Simple Purple Tabs with Flat Icons help you achieve this goal. By looking at this preview, you can figure out that the mentioned bootstrap includes three sections to add information. Plus, these titles are editable, and you can rename them easily. These Simple Bootstrap Tabs cause your audience not to be confused; Because each text connects to its part that is shown with a related icon.

As we said, these Bootstrap Icon Tabs are so unique and creative. The background of the detailed part is white and simple. On the other side, the writings are black. There is a purple line under the text in these Tabs with Icons. Plus, the sections have a simple gray background with a beautiful design. It will change to purple since you click on a specific part, and the titles will turn white. This makes the selected sections different from others. At the same time, the color of the icons in the unselected parts is purple. Using Bootstrap Purple and Gray Tabs is so helpful for your website’s visits.

 

#

Bootstrap Icon Tabs

#

Simple Bootstrap Tabs

#

Tabs with Icons

#

Bootstrap Purple and Gray Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cubes"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    margin: 20px;
}
.tab .nav-tabs {
    border-bottom: 0 none;
    background: #eaeaea;
    border-radius: 0 20px 0 20px;
}
.tab .nav-tabs li a {
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    border: none;
    color: #333;
    padding: 12px 22px;
}
.tab .nav-tabs li a i {
    margin-right: 10px;
    color: #775ba3;
}
.tab .nav-tabs li:first-child a {
    border-bottom-left-radius: 20px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a i {
    border: 0 none;
    background: #775ba3;
    color: #fff;
}
.tab .nav-tabs li.active a:after {
    content: "";
    position: absolute;
    left: 45%;
    bottom: -14px;
    border: 7px solid transparent;
    border-top: 7px solid #775ba3;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    font-size: 14px;
    line-height: 24px;
    margin-top: 25px;
    border-bottom: 3px solid #775ba3;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs,
    .tab .nav-tabs li {
        width: 100%;
        background: transparent;
    }
    .tab .nav-tabs li.active a {
        border-radius: 10px 10px 0 0;
    }
    .tab .nav-tabs li:first-child a {
        border-bottom-left-radius: 0;
    }
    .tab .nav-tabs li a {
        margin-bottom: 10px;
        border: 1px solid lightgray;
    }
    .tab .nav-tabs li.active a:after {
        border: none;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
    margin: 20px;
}
.tab .nav-tabs {
    border-bottom: 0 none;
    background: #eaeaea;
    border-radius: 0 20px 0 20px;
}
.tab .nav-tabs li a {
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    border: none;
    color: #333;
    padding: 12px 22px;
}
.tab .nav-tabs li a i {
    margin-right: 10px;
    color: #775ba3;
}
.tab .nav-tabs li:first-child a {
    border-bottom-left-radius: 20px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a i {
    border: 0 none;
    background: #775ba3;
    color: #fff;
}
.tab .nav-tabs li.active a:after {
    content: "";
    position: absolute;
    left: 45%;
    bottom: -14px;
    border: 7px solid transparent;
    border-top: 7px solid #775ba3;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    font-size: 14px;
    line-height: 24px;
    margin-top: 25px;
    border-bottom: 3px solid #775ba3;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs,
    .tab .nav-tabs li {
        width: 100%;
        background: transparent;
    }
    .tab .nav-tabs li.active a {
        border-radius: 10px 10px 0 0;
    }
    .tab .nav-tabs li:first-child a {
        border-bottom-left-radius: 0;
    }
    .tab .nav-tabs li a {
        margin-bottom: 10px;
        border: 1px solid lightgray;
    }
    .tab .nav-tabs li.active a:after {
        border: none;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cubes"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </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