I think everyone knows about tabs so that am directly going into the topic how to create togglable tabs using bootstrap 3. By combining different sections we can create a togglable tabs structure. Here you can get one doubt whether the tabs are responsive or not, yes the tabs are completely responsive and easily fits according to your window size. Now away days there are different sizes of devices are rolling around the world so that i have created this tabs to suitable for all sizes. 


By seeing the above screenshot you can observe that i have created four sections of information like about study with demo, android L, IOS 8 and Windows 10. Tabs are more useful at contact pages. I have done this example based on bootstrap v3.0.0 and jquery v 1.10.2. So please download the exact version of bootstrap.min.css, bootstrap.min.js, jquery.js and added one custom style.css file make a copy from the code and include it.



Images used in this example
google play
app store
windows store


style.css
   
html, body{
 font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 16px;
 line-height: 1.7;
}
.myStyle{
    background: #ffa753 ;
    padding: 20px 0;
}
.myStyle small{
    color: #eeefe9;   
}
.myStyle a{
    color: #fff;   
}
.myStyle a:hover{
    color: #333;   
}
.tab-pane{
    padding: 40px 10px 0 10px;
}

index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Togglable Tabs Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="myStyle">
 <div class="container">
 <div class="row">
 <div class="col-sm-6 tabbable">
 <!-- Togglable Tabs go here -->
 <ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#abt" data-toggle="tab">About</a></li>
  <li><a href="#and" data-toggle="tab">Android L</a></li>
  <li><a href="#ios" data-toggle="tab">iOS 8</a></li>
  <li><a href="#win" data-toggle="tab">Windows 10</a></li>
 </ul>
 <div class="tab-content">
 <div class="tab-pane fade in active" id="abt">
 <p>study with demo is a technical website and author is shaik umar faruk currently 
 working as software engineer.</p>
 </div>
 <div class="tab-pane fade in" id="and"><p><img src="images/gplay.jpg" 
  alt="androidL" class="pull-right"> Android Lollipop is the new mobile operating system 
  developed by google.<br><span class="glyphicon glyphicon-star"></span>
  <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
  </span><span class="glyphicon glyphicon-star"></span>
  <span class="glyphicon glyphicon-star-empty"></span></p></div>
<div class="tab-pane fade in" id="ios"><p><img src="images/appstore.jpg" 
 alt="ios" class="pull-right">iOS 8 is ready to hit iphone 6.<br> <span 
 class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star">
 </span><span class="glyphicon glyphicon-star"></span>
 <span class="glyphicon glyphicon-star"></span><span 
 class="glyphicon glyphicon-star-empty"></span></p></div>
<div class="tab-pane fade in" id="win"><p><img src="images/winstore.jpg" 
 alt="windows" class="pull-right">Windows 10 is upcoming os developed by Microsoft.<br><span 
class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
 </span><span class="glyphicon glyphicon-star"></span><span 
 class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty">
 </span></p></div> </div> </div> </div> </div> </div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


1 comments:

  1. An impressive share! I have just forwarded this onto a colleague who has been conducting a little research on this. And he actually bought me dinner simply because I discovered it for him... lol. So let me reword this.... Thanks for the meal!! But yeah, thanx for spending some time to discuss this subject here on your internet site. capital one login

    ReplyDelete

 
Top