content logo

Bootstrap Tabs:

Purple Wizard Tabs with Icons in Bootstrap

The appearance of tabs has a huge effect on attracting visitors to a website. Therefore, if you have a website and you want to make it different from other ones, you have to use a dissimilar tab for that. In this post, you can see a code that contains Purple Wizard Tabs with Icons in Bootstrap and has a different appearance that helps you to attract new audiences to your website. As its name is obvious, the appearance of this bootstrap looks like a wizard and it is so unique. As you can see in the preview of these Bootstrap Tabs with Wizard, there are three sections and the background of each one is white. Plus, each part has a purple border all around that and this makes a beautiful design for any website.

Moreover, you can see some icons next to each section in these Purple Tabs that make your website different from all other ones. These Wizard Tab with Icons are dissimilar and each icon has a design. One of them is the earth, the other one is a rocket and the last one is a suitcase. Under these Tabs with Border, you can see the detailed part that is simple.

#

Bootstrap Tabs with Wizard

#

Wizard Tab with Icons

#

Purple Tabs

#

Tabs with Border

<!-- 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-globe"></i> Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-rocket"></i> Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-briefcase"></i> Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </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;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.tab .nav-tabs {
    border-bottom: 5px solid #593082;
}
.tab .nav-tabs li a {
    display: block;
    padding: 10px;
    border: 2px solid #593082;
    border-radius: 0;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    color: #593082;
    text-align: center;
    margin: 0 5px 30px 0;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a {
    color: #593082;
    border: 2px solid #593082;
}
.tab .nav-tabs li a:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #593082;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
}
.tab .nav-tabs li.active a:before {
    background: #aee800;
    border: 2px solid #fff;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25);
    transform: scale(2);
}
.tab .tab-content {
    padding: 20px;
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    font-size: 15px;
    color: #7a9181;
    background: #fff;
    line-height: 30px;
}
.tab .tab-content h3 {
    font-size: 24px;
    margin-top: 5px;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
    }
    .tab .nav-tabs li a {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .tab .nav-tabs li a:before,
    .tab .nav-tabs li.active a:before {
        width: 0;
        height: 0;
        background: none;
        box-shadow: none;
        border: none;
        bottom: -10px;
        transform: scale(1);
    }
    .tab .nav-tabs li.active a:before {
        border-top: 10px solid #593082;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
}
<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;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.tab .nav-tabs {
    border-bottom: 5px solid #593082;
}
.tab .nav-tabs li a {
    display: block;
    padding: 10px;
    border: 2px solid #593082;
    border-radius: 0;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    color: #593082;
    text-align: center;
    margin: 0 5px 30px 0;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a {
    color: #593082;
    border: 2px solid #593082;
}
.tab .nav-tabs li a:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #593082;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
}
.tab .nav-tabs li.active a:before {
    background: #aee800;
    border: 2px solid #fff;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25);
    transform: scale(2);
}
.tab .tab-content {
    padding: 20px;
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    font-size: 15px;
    color: #7a9181;
    background: #fff;
    line-height: 30px;
}
.tab .tab-content h3 {
    font-size: 24px;
    margin-top: 5px;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
    }
    .tab .nav-tabs li a {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .tab .nav-tabs li a:before,
    .tab .nav-tabs li.active a:before {
        width: 0;
        height: 0;
        background: none;
        box-shadow: none;
        border: none;
        bottom: -10px;
        transform: scale(1);
    }
    .tab .nav-tabs li.active a:before {
        border-top: 10px solid #593082;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
}
</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-globe"></i> Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-rocket"></i> Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-briefcase"></i> Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </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