Bootstrap Tabs:

Bootstrap Tabs with Pink Arrows for Header

If you like to change the design of your website and attract people fast, pay attention to this code carefully. The Bootstrap Tabs with Pink Arrows for Header have a beautiful theme and can increase the number of your website’s visitors. These Beautiful HTML Tabs help the website’s owner divide the information into many parts and regularize its design. If you are looking for an eye-catching bootstrap for your site, the Free CSS Tabs can be helpful.

By looking at the below preview, you can figure out the beauty of this code. These Pink Bootstrap Tabs are connected to each other with some arrows, and the main theme of this code is white. Besides their simple design, these CSS Tabs with Arrows have excellent performance. Titles and writings of this code are gray with a white background. As you place the mouse on a tab, its background changes to gray, and once you click on this part, this color turns an attractive pink. At the same time, the title becomes white. This causes the visitors to distinguish the selected part from unselected ones. After this incident, the detailed part will be shown steadily.

Pink Bootstrap Tabs

Free CSS Tabs

Beautiful HTML Tabs

CSS Tabs with Arrows

<!-- 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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">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. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </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: 0px;
}
.tab .nav-tabs li {
    border-right: 1px solid #ddd;
}
.tab .nav-tabs li:last-child {
    border-right: 0px solid #ddd;
}
.tab .nav-tabs li:first-child a {
    border-left: 1px solid #ddd;
}
.tab .nav-tabs li a {
    color: #868686;
    background: #fff;
    border-radius: 0;
    font-size: 16px;
    margin-right: -1px;
    padding: 5.5px 30px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}
.nav-tabs li:first-child a {
    border-radius: 5px 0 0 5px;
}
.nav-tabs li:last-child a {
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #d3d3d3;
}
.tab .nav-tabs li a:hover {
    background: #eee;
}
.tab .nav-tabs li a:hover:before {
    border-left: 15px solid #eee;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:after {
    content: "";
    border-left: 17px solid #ff007a;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 0px;
    right: -17px;
    z-index: 1;
}
.tab .nav-tabs li a:after {
    border-left: 17px solid #d3d3d3;
}
.tab .nav-tabs li.active a:before {
    border-left: 17px solid #ff007a;
}
.tab .nav-tabs li a:before {
    border-bottom: 15px solid rgba(0, 0, 0, 0);
    border-left: 15px solid #fff;
    border-top: 15px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    right: -15px;
    top: 2px;
    z-index: 2;
}
.tab .nav-tabs li.active > a,
.tab .nav-tabs > li.active > a:focus,
.tab .nav-tabs > li.active > a:hover {
    border: none;
    color: #fff;
    background: #ff007a;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}
.tab .nav-tabs li:last-child.active a:after,
.tab .nav-tabs li:last-child a:after {
    border: none;
}
.tab .nav-tabs li:last-child a:after,
.tab .nav-tabs li:last-child a:hover:before,
.tab .nav-tabs li:last-child.active a:before,
.tab .nav-tabs li:last-child a:before {
    border-left: none;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    margin-top: 2%;
    font-size: 14px;
    border: 1px solid #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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">
<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: 0px;
}
.tab .nav-tabs li {
    border-right: 1px solid #ddd;
}
.tab .nav-tabs li:last-child {
    border-right: 0px solid #ddd;
}
.tab .nav-tabs li:first-child a {
    border-left: 1px solid #ddd;
}
.tab .nav-tabs li a {
    color: #868686;
    background: #fff;
    border-radius: 0;
    font-size: 16px;
    margin-right: -1px;
    padding: 5.5px 30px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}
.nav-tabs li:first-child a {
    border-radius: 5px 0 0 5px;
}
.nav-tabs li:last-child a {
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #d3d3d3;
}
.tab .nav-tabs li a:hover {
    background: #eee;
}
.tab .nav-tabs li a:hover:before {
    border-left: 15px solid #eee;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:after {
    content: "";
    border-left: 17px solid #ff007a;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 0px;
    right: -17px;
    z-index: 1;
}
.tab .nav-tabs li a:after {
    border-left: 17px solid #d3d3d3;
}
.tab .nav-tabs li.active a:before {
    border-left: 17px solid #ff007a;
}
.tab .nav-tabs li a:before {
    border-bottom: 15px solid rgba(0, 0, 0, 0);
    border-left: 15px solid #fff;
    border-top: 15px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    right: -15px;
    top: 2px;
    z-index: 2;
}
.tab .nav-tabs li.active > a,
.tab .nav-tabs > li.active > a:focus,
.tab .nav-tabs > li.active > a:hover {
    border: none;
    color: #fff;
    background: #ff007a;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}
.tab .nav-tabs li:last-child.active a:after,
.tab .nav-tabs li:last-child a:after {
    border: none;
}
.tab .nav-tabs li:last-child a:after,
.tab .nav-tabs li:last-child a:hover:before,
.tab .nav-tabs li:last-child.active a:before,
.tab .nav-tabs li:last-child a:before {
    border-left: none;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    margin-top: 2%;
    font-size: 14px;
    border: 1px solid #fff;
}
</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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">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. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum ex placerat tellus blandit euismod. Nulla pulvinar, neque pellentesque dictum fringilla, ante nibh egestas lacus, eget aliquet urna
                            velit quis lacus. Nam tincidunt risus ac turpis elementum tincidunt. Cras convallis eget erat eget pulvinar. Vivamus augue orci, consequat id ante.
                        </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

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