<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-lg-6 col-sm-6"> <div class="card hovercard"> <div class="card-background"> <img class="card-bkimg" alt="" src="https://s-media-cache-ak0.pinimg.com/originals/06/11/e1/0611e11a30ad892e4d951661adefec30.jpg"> <!-- http://lorempixel.com/850/280/people/9/ --> </div> <div class="useravatar"> <img alt="" src="https://s-media-cache-ak0.pinimg.com/564x/f6/b8/6c/f6b86c235b2d167da84ae49c64245adb.jpg"> </div> <div class="card-info"> <span class="card-title">Claude Monet</span> </div> </div> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" id="AboutPainting" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-tint" aria-hidden="true"></span> <div class="hidden-xs">About the Painting</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="About Monet" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <div class="hidden-xs">About Monet</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="Other Works" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> <div class="hidden-xs">Other Works</div> </button> </div> </div> <p class="text-right"> <a href="http://bootsnipp.com/iframe/g0qzo" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fg0qzo" target="_blank"><small>HTML</small>⁵</a> </p> <div class="well"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <h3>In the Woods At Giverny: Blanche Hoschedé at Her Easel with Suzanne Hoschedé Reading</h3> <img alt="" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Claude_Monet_-_In_the_Woods_at_Giverny-_Blanche_Hoschedé_at_Her_Easel_with_Suzanne_Hoschedé_Reading_-_Google_Art_Project.jpg/513px-Claude_Monet_-_In_the_Woods_at_Giverny-_Blanche_Hoschedé_at_Her_Easel_with_Suzanne_Hoschedé_Reading_-_Google_Art_Project.jpg"> <p> In the Woods at Giverny: Blanche Hoschedé at Her Easel with Suzanne Hoschedé Reading <br> Painting<br> 1887<br> Oil on canvas<br> 36in x 38.5in<br> </p> </div> <div class="tab-pane fade in" id="tab2"> <h3>About Claude Monet</h3> <img alt="" src="http://marinadale.com/proj_1/claudemonet.jpg"><br> <h3>Oscar-Claude Monet</h3> <p>Claude Monet was a founder of the French Impressionalism era. This period ran from 1870 to 1880, and primarily focused on the expression of ones perception of nature. Monet would often paint the same landscape at different times of the day and year to explore the changing light year round. In his later years he developed caterax in both eyes, we can see the change in his coice of colours from normal every day to harshly warm as his case worsened. He did have the catarax removed and his portrayl of the worl returned to normal. </p> </div> <div class="tab-pane fade in" id="tab3"> <h3>Other Works by Monet</h3> <img alt="" src="http://www.artnet.com/WebServices/images/ll375708llgmnQCfDrCWvaHBOAD/claude-monet-blanche-hoschede-poignant.jpg"> <p>Blanche Hoschedé </p> <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Claude_Monet_023.jpg/220px-Claude_Monet_023.jpg"> <p></p> <img alt="" src="http://imgc.allpostersimages.com/images/P-473-488-90/63/6315/6UH7100Z/posters/claude-monet-garden-at-giverny-art-print-poster.jpg"> </div> </div> </div> </div>

/* USER PROFILE PAGE */ .card { margin-top: 20px; padding: 30px; background-color: rgba(214, 224, 226, 0.2); -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; background-color: rgba(255, 255, 255, 1); } .card.hovercard .card-background { height: 130px; } .card-background img { margin-left: -100px; margin-top: -200px; min-width: 130%; } .card.hovercard .useravatar { position: absolute; top: 15px; left: 0; right: 0; } .card.hovercard .useravatar img { width: 150px; height: 150px; max-width: 150px; max-height: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.5); } .card.hovercard .card-info { position: absolute; bottom: 14px; left: 0; right: 0; } .card.hovercard .card-info .card-title { padding:0 5px; font-size: 30px; font-family; serif; line-height: 1; color: #FF69B4; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .card.hovercard .card-info { overflow: hidden; font-size: 13px; line-height: 20px; color: #FFC0CB; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btn-pref .btn { -webkit-border-radius:0 !important; background-color: #B0E0E6; } .btn.btn-primary { font-family:cursive; font-size:30; color:#FF69B4; } .well { background-color: #B0E0E6; } h3{ color: #FF69B4; font-family: serif; font-size: 20px; } p{ color: #FF69B4; font-family: serif; font-size: 16px; }

$(document).ready(function() { $(".btn-pref .btn").click(function () { $(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default"); // $(".tab").addClass("active"); // instead of this do the below $(this).removeClass("btn-default").addClass("btn-primary"); }); });