Bootstrap Tabs

Bootstrap Tabs

by leotwot

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">


<div id="exTab1" class="container">	
<ul  class="nav nav-pills">
			<li class="active">
        <a  href="#1a" data-toggle="tab">tab1</a>
			</li>
			<li><a href="#2a" data-toggle="tab">tab2</a>
			</li>

		</ul>

			<div class="tab-content clearfix">
			  <div class="tab-pane active" id="1a">
        
         <div class="row">
          <img class="img1" src="https://r.hswstatic.com/w_907/gif/animal-stereotype-1.jpg" alt="">
   
         <img class="img2" src="http://mymodernmet.com/wp/wp-content/uploads/2017/01/animal-selfies-5.jpg" alt="">
     
         </div>
				</div>
				<div class="tab-pane" id="2a">
         <div class="row">
          <img class="img1" src="http://static.wixstatic.com/media/e601f0_a59250c8922343fda263ede9a9e12ab9~mv2_d_2048_1924_s_2.jpg/v1/fill/w_1024,h_1024,al_c,q_85,usm_0.66_1.00_0.01/e601f0_a59250c8922343fda263ede9a9e12ab9~mv2_d_2048_1924_s_2.webp" alt="">
    
         <img class="img2" src="https://www.royacdn.com/unsafe/Site-3e6c4138-ca20-40c9-9ac6-0cfafccd9266/index/puppy_img.jpg" alt="">
     
         </div>
				</div>
     
          
			</div>
  </div>



<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS

body {
  padding : 10px ;
  
}

#exTab1 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

#exTab2 h3 {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills > li > a {
  border-radius: 4px 4px 0 0 ;
}

#exTab3 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

 .img1{
  width:150px;
}
 .img2{
  width:150px;
  height:300px;
}