Instant Page Change Using Bootstrap Tabs

Hello friends, today we are going to learn how to perform ‘instant page change using bootstrap tabs’. Every company wants instant page change for their website or application. This tutorial will easily explain you how to do it. You can also download the source code and see the demo. So lets start the tutorial.

STEP 1:

Create a index.html file to make the UI.

[php]
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Meul Tech – Instant Page Change Using Bootstrap Tabs
</title>

<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!– Custom CSS –>
<link href="one-page-wonder.css" rel="stylesheet">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.blogShort%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.add%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20300px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.nav-sidebar%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-right%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.nav-sidebar%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-transition%3A%20all%200.08s%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-moz-transition%3A%20all%200.08s%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-o-transition%3A%20all%200.08s%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20all%200.08s%20linear%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.nav-sidebar%20.active%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20default%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%230b56a8%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.nav-sidebar%20.active%20a%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23E50000%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.nav-sidebar%20.text-overflow%20a%2C%0A%20%20%20%20%20%20%20%20.nav-sidebar%20.text-overflow%20.media-body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-o-text-overflow%3A%20ellipsis%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-overflow%3A%20ellipsis%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.btn-blog%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23E50000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20%23E50000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2010px%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.btn-blog%3Ahover%2C%0A%20%20%20%20%20%20%20%20.btn-blog%3Afocus%2C%0A%20%20%20%20%20%20%20%20.btn-blog%3Aactive%2C%0A%20%20%20%20%20%20%20%20.btn-blog.active%2C%0A%20%20%20%20%20%20%20%20.open%20.dropdown-toggle.btn-blog%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%230b56a8%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20%230b56a8%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20article%20h2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333333%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20h2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%230b56a8%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.margin10%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-right%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.container%20.text-style%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20justify%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%2023px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%2013px%200%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2019px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20"/>
</head><body>
<!– Navigation –>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<h1 class="logo">
<a title="" href="https://www.mehulprajapati.com" >
<img alt="" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg" style="height: auto; width: auto; display: inline-block; top: 0px;">
</a>
</h1>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<!– /.navbar-collapse –>
</div>
<!– /.container –>
</nav>
<!– Full Width Image Header –>
<!– Page Content –>
<div class="container">
<h1 class="thick-heading">
||Slider Example||
</h1>
<!– First Featurette –>
<div class="featurette" id="about">
<!————————code—————start—————->
<div class="container">
<div class="col-sm-2">
<nav class="nav-sidebar">
<ul class="nav tabs">
<li class="active"><a href="#tab1" data-toggle="tab">HOME</a></li>
<li class=""><a href="#tab2" data-toggle="tab">ABOUT US</a></li>
<li class=""><a href="#tab3" data-toggle="tab">SERVICES</a></li>
</ul>
</nav>
<div>
<h2 class="add">Place for your add!</h2>
</div>
</div><!– tab content –>
<div class="tab-content">
<div class="tab-pane active text-style" id="tab1">
<h2>Lorem ipsum</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<hr><img src="http://placehold.it/350×250" class="img-rounded pull-right">
</div>
<div class="tab-pane text-style" id="tab2">
<h2>Why Meul Tech ?</h2>

Get free tutorials in html, php, bootstrap, codeigniter, wordpress, and many technologies. Also get practical training in these technologies. Best Android and IOS Training Institute in Mumbai. Also get online classes for web development.

<hr>
<img src="http://placehold.it/150×90" class="img-rounded pull-left">
</div>
<div class="tab-pane text-style" id="tab3">
<h2>Stet clita</h2>

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

<hr>
<img src="http://placehold.it/150×150" class="img-rounded pull-right">
</div>
</div>
</div>
<!—-Code——end———————————–>
</div>
<!– /.container –>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-1">
<a href="https://www.mehulprajapati.com" class="logo">
<img alt="Meul Tech " class="img-responsive" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg">
</a>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
© Copyright 2016. All Rights Reserved.
</div>
</div>
</div>
</div>
<!– jQuery –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

<!– Bootstrap Core JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>

</html>
[/php]

STEP 2:

Next create stylesheet ‘wonder.css’ file.

[php]
/* FONT AWESOME & not necessary for functions */

@import url(‘http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css’);
body {
padding-top: 15px;
background-color: #f9f9f9;
}

/*REQUIRED*/

.carousel-row {
margin-bottom: 10px;
}

.slide-row {
padding: 0;
background-color: #ffffff;
min-height: 150px;
border: 1px solid #e7e7e7;
overflow: hidden;
height: auto;
position: relative;
}

.slide-carousel {
width: 20%;
float: left;
display: inline-block;
}

.slide-carousel .carousel-indicators {
margin-bottom: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
}

.slide-carousel .carousel-indicators li {
border-radius: 0;
width: 20px;
height: 6px;
}

.slide-carousel .carousel-indicators .active {
margin: 1px;
}

.slide-content {
position: absolute;
top: 0;
left: 20%;
display: block;
float: left;
width: 80%;
max-height: 76%;
padding: 1.5% 2% 2% 2%;
overflow-y: auto;
}

.slide-content h4 {
margin-bottom: 3px;
margin-top: 0;
}

.slide-footer {
position: absolute;
bottom: 0;
left: 20%;
width: 78%;
height: 20%;
margin: 1%;
}

@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,700italic,700,500&subset=latin,latin-ext");
body {
padding-top: 40px;
padding-bottom: 40px;
}

/* COMMON PRICING STYLES */

.panel.price,
.panel.price>.panel-heading {
border-radius: 0px;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}

.panel.price:hover {
box-shadow: 0px 0px 30px rgba(0, 0, 0, .2);
}

.panel.price:hover>.panel-heading {
box-shadow: 0px 0px 30px rgba(0, 0, 0, .2) inset;
}

.panel.price>.panel-heading {
box-shadow: 0px 5px 0px rgba(50, 50, 50, .2) inset;
text-shadow: 0px 3px 0px rgba(50, 50, 50, .6);
}

.price .list-group-item {
border-bottom-: 1px solid rgba(250, 250, 250, .5);
}

.panel.price .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

.panel.price .list-group-item:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}

.price .panel-footer {
color: #fff;
border-bottom: 0px;
background-color: rgba(0, 0, 0, .1);
box-shadow: 0px 3px 0px rgba(0, 0, 0, .3);
}

.panel.price .btn {
box-shadow: 0 -1px 0px rgba(50, 50, 50, .2) inset;
border: 0px;
}

/* green panel */

.price.panel-green>.panel-heading {
color: #fff;
background-color: #57AC57;
border-color: #71DF71;
border-bottom: 1px solid #71DF71;
}

.price.panel-green>.panel-body {
color: #fff;
background-color: #65C965;
}

.price.panel-green>.panel-body .lead {
text-shadow: 0px 3px 0px rgba(50, 50, 50, .3);
}

.price.panel-green .list-group-item {
color: #333;
background-color: rgba(50, 50, 50, .01);
font-weight: 600;
text-shadow: 0px 1px 0px rgba(250, 250, 250, .75);
}

/* blue panel */

.price.panel-blue>.panel-heading {
color: #fff;
background-color: #608BB4;
border-color: #78AEE1;
border-bottom: 1px solid #78AEE1;
}

.price.panel-blue>.panel-body {
color: #fff;
background-color: #73A3D4;
}

.price.panel-blue>.panel-body .lead {
text-shadow: 0px 3px 0px rgba(50, 50, 50, .3);
}

.price.panel-blue .list-group-item {
color: #333;
background-color: rgba(50, 50, 50, .01);
font-weight: 600;
text-shadow: 0px 1px 0px rgba(250, 250, 250, .75);
}

/* red price */

.price.panel-red>.panel-heading {
color: #fff;
background-color: #D04E50;
border-color: #FF6062;
border-bottom: 1px solid #FF6062;
}

.price.panel-red>.panel-body {
color: #fff;
background-color: #EF5A5C;
}

.price.panel-red>.panel-body .lead {
text-shadow: 0px 3px 0px rgba(50, 50, 50, .3);
}

.price.panel-red .list-group-item {
color: #333;
background-color: rgba(50, 50, 50, .01);
font-weight: 600;
text-shadow: 0px 1px 0px rgba(250, 250, 250, .75);
}

/* grey price */

.price.panel-grey>.panel-heading {
color: #fff;
background-color: #6D6D6D;
border-color: #B7B7B7;
border-bottom: 1px solid #B7B7B7;
}

.price.panel-grey>.panel-body {
color: #fff;
background-color: #808080;
}

.price.panel-grey>.panel-body .lead {
text-shadow: 0px 3px 0px rgba(50, 50, 50, .3);
}

.price.panel-grey .list-group-item {
color: #333;
background-color: rgba(50, 50, 50, .01);
font-weight: 600;
text-shadow: 0px 1px 0px rgba(250, 250, 250, .75);
}

/* white price */

.price.panel-white>.panel-heading {
color: #333;
background-color: #f9f9f9;
border-color: #ccc;
border-bottom: 1px solid #ccc;
text-shadow: 0px 2px 0px rgba(250, 250, 250, .7);
}

.panel.panel-white.price:hover>.panel-heading {
box-shadow: 0px 0px 30px rgba(0, 0, 0, .05) inset;
}

.price.panel-white>.panel-body {
color: #fff;
background-color: #dfdfdf;
}

.price.panel-white>.panel-body .lead {
text-shadow: 0px 2px 0px rgba(250, 250, 250, .8);
color: #666;
}

.price:hover.panel-white>.panel-body .lead {
text-shadow: 0px 2px 0px rgba(250, 250, 250, .9);
color: #333;
}

.price.panel-white .list-group-item {
color: #333;
background-color: rgba(50, 50, 50, .01);
font-weight: 600;
text-shadow: 0px 1px 0px rgba(250, 250, 250, .75);
}

/* Scrollbars */

.slide-content::-webkit-scrollbar {
width: 5px;
}

.slide-content::-webkit-scrollbar-thumb:vertical {
margin: 5px;
background-color: #999;
-webkit-border-radius: 5px;
}

.slide-content::-webkit-scrollbar-button:start:decrement,
.slide-content::-webkit-scrollbar-button:end:increment {
height: 5px;
display: block;
}

.db-pricing-seven {
margin-bottom: 30px;
margin-top: 30px;
text-align: center;
border: 1px solid #C5C2C2;
background-color: #EDEDED;
}

.db-pricing-seven:hover {
margin-top: 5px;
-moz-transition: margin-top 0.25s ease 0s;
-ms-transition: margin-top 0.25s ease 0s;
transition: margin-top 0.25s ease 0s;
}

.db-pricing-seven ul {
list-style: none;
margin: 0;
text-align: center;
padding-left: 0px;
}

.db-pricing-seven ul li {
border-bottom: solid 1px #D8D8D8;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
text-transform: uppercase;
}

.db-pricing-seven ul li.price {
background-color: #fff;
padding: 40px 20px 20px 20px;
font-size: 20px;
font-weight: 900;
color: #353c3e;
font-weight: 900;
}

.db-pricing-seven ul li.price i {
padding: 30px;
font-size: 50px;
display: block;
}

.db-pricing-seven .pricing-footer {
padding: 20px;
}

.db-pricing-seven .pricing-footer a i {
margin: 5px;
top: 3px;
}

body {
margin-top: 50px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

/* grid system via getbootstrap.com/examples/grid/grid.css */

.container {
padding-left: 15px;
padding-right: 15px;
}

.fdw-post a.demolink {
color: #f4f4f4;
background: #f47e7e;
font-weight: bold;
padding: 8px 25px 8px 25px;
margin-left: 5px;
margin-top: 50px;
font-family: Arial, sans-serif;
border-radius: 4px;
border: solid 0 #e3edf4;
border-bottom: 2px solid #e76969;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

h4 {
margin-top: 25px;
}

.btn-center {
margin-left: 41%;
}

header h1.logo {
margin: 0;
padding: 5px 0;
display: table-cell;
vertical-align: middle;
height: 100%;
float: left;
color: transparent;
-moz-transition: all .2s ease-in .2s;
-o-transition: all .2s ease-in .2s;
-webkit-transition: all .2s ease-in .2s;
transition: all .2s ease-in .2s;
}

.navbar-inverse {
background-color: #F6F6F6;
border-color: #f6f6f6;
}

div.footer-copyright {
background: #316441 url(pattern.png) repeat center center !important;
}

h1.thick-heading {
clear: both;
color: #aaa;
display: block;
text-align: center;
font-weight: 500;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
line-height: 36px;
border-width: 0;
font-size: 36px;
visibility: visible;
opacity: 1;
margin-top: 92px;
}

.header {
clear: both;
border-top: 5px solid #f6f6f6;
background: #f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #fff));
background: -webkit-linear-gradient(top, #f6f6f6 0, #fff 100%);
background: -o-linear-gradient(top, #f6f6f6 0, #fff 100%);
background: -ms-linear-gradient(top, #f6f6f6 0, #fff 100%);
background: linear-gradient(to bottom, #f6f6f6 0, #fff 100%);
min-height: 100px;
padding: 8px 0;
}

.row {
margin-bottom: 20px;
}

.row .row {
margin-top: 10px;
margin-bottom: 0;
}

[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}

hr {
margin-top: 40px;
margin-bottom: 40px;
}

.header-image {
display: block;
width: 100%;
text-align: center;
background: url(‘http://placehold.it/1900×500’) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.headline {
padding: 120px 0;
}

.headline h1 {
font-size: 130px;
background: #fff;
background: rgba(255, 255, 255, 0.9);
}

.headline h2 {
font-size: 77px;
background: #fff;
background: rgba(255, 255, 255, 0.9);
}

.featurette-divider {
margin: 80px 0;
}

.featurette {
overflow: hidden;
margin-top: 35px;
}

.featurette-image.pull-left {
margin-right: 40px;
}

.featurette-image.pull-right {
margin-left: 40px;
}

.featurette-heading {
font-size: 50px;
}

footer {
margin: 50px 0;
}

@media(max-width:1200px) {
.headline h1 {
font-size: 140px;
}
.headline h2 {
font-size: 63px;
}
.featurette-divider {
margin: 50px 0;
}
.featurette-image.pull-left {
margin-right: 20px;
}
.featurette-image.pull-right {
margin-left: 20px;
}
.featurette-heading {
font-size: 35px;
}
}

@media(max-width:991px) {
.headline h1 {
font-size: 105px;
}
.headline h2 {
font-size: 50px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-image {
max-width: 50%;
}
.featurette-image.pull-left {
margin-right: 10px;
}
.featurette-image.pull-right {
margin-left: 10px;
}
.featurette-heading {
font-size: 30px;
}
}

@media(max-width:768px) {
.container {
margin: 0 15px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 25px;
}
}

@media(max-width:668px) {
.headline h1 {
font-size: 70px;
}
.headline h2 {
font-size: 32px;
}
.featurette-divider {
margin: 30px 0;
}
}

@media(max-width:640px) {
.headline {
padding: 75px 0 25px 0;
}
.headline h1 {
font-size: 60px;
}
.headline h2 {
font-size: 30px;
}
}

@media(max-width:375px) {
.featurette-divider {
margin: 10px 0;
}
.featurette-image {
max-width: 100%;
}
.featurette-image.pull-left {
margin-right: 0;
margin-bottom: 10px;
}
.featurette-image.pull-right {
margin-bottom: 10px;
margin-left: 0;
}
}
[/php]

Finally our ‘instant page change using bootstrap tabs’ example is ready to run. Hit your url and check out your output.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.