<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="[ container text-center ]"> <div class="[ row ]"> <div class="[ col-xs-12 ]" style="padding-bottom: 30px;"> <p>This is my attempt to make a wonderful snippet posted by <a target="_blank" href="http://www.bootsnipp.com/maridlcrmn">maridlcrmn</a> a little more responsive. You can find the orginal <a target="_parent" href="http://bootsnipp.com/maridlcrmn/snippets/QbEpr">here</a></p> </div> </div> </div> <div class="[ container text-center ]"> <div class="[ row ]"> <div class="[ col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 ]" role="tabpanel"> <div class="[ col-xs-4 col-sm-12 ]"> <!-- Nav tabs --> <ul class="[ nav nav-justified ]" id="nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#loiich1" aria-controls="dustin" role="tab" data-toggle="tab"> <img class="img-rounded" src="http://www.effortlessenglishclub.vn/uploads/2492094_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich2" aria-controls="daksh" role="tab" data-toggle="tab"> <img class="img-rounded" src="http://www.effortlessenglishclub.vn/uploads/9317726_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich3" aria-controls="anna" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/6789931_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich4" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/3901625_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich5" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/6695311_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich6" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/1494762_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich7" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/5995452_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#loiich8" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="http://www.effortlessenglishclub.vn/uploads/8817410_orig.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> </ul> </div> <div class="[ col-xs-8 col-sm-12 ]"> <!-- Tab panes --> <div class="tab-content" id="tabs-collapse"> <div role="tabpanel" class="tab-pane fade in active" id="loiich1"> <div class="tab-inner"> <p class="lead">Một phương pháp mới mà bạn không thể tin được đó là bạn vẫn sử dụng từ vựng và ngữ pháp đúng mà không cần học, bạn chỉ cần nghe các bài học Vocabulary, Listen & Answer Mini-Stories, Point Of View Stories, tức học tiếng Anh một cách tự động, tuyệt đối không cần ”tập trung” hay cố gắng ghi nhớ.</p> <hr> <p><strong class="text-uppercase">HỌC TIẾNG ANH KHÔNG THEO QUY TẮC</strong></p> <p><em class="text-capitalize"> A.J. Hoge</em> at <a href="#">EffortlessEnglishClub.vn</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich2"> <div class="tab-inner"> <p class="lead">Suspendisse dictum gravida est, nec consequat tortor venenatis a. Suspendisse vitae venenatis sapien.</p> <hr> <p><strong class="text-uppercase">Daksh Bhagya</strong></p> <p><em class="text-capitalize"> UX designer</em> at <a href="#">Google</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich3"> <div class="tab-inner"> <p class="lead">Nullam suscipit ante ac arcu placerat, nec sagittis quam volutpat. Vestibulum aliquam facilisis velit ut ultrices.</p> <hr> <p><strong class="text-uppercase">Anna Pickard</strong></p> <p><em class="text-capitalize"> Master web developer</em> at <a href="#">Intel</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich4"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich5"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich6"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich7"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="loiich8"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> </div> </div> </div> </div> </div>

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css); body { padding-top: 60px; } .nav.nav-justified > li > a { position: relative; } .nav.nav-justified > li > a:hover, .nav.nav-justified > li > a:focus { background-color: transparent; } .nav.nav-justified > li > a > .quote { position: absolute; left: 0px; top: 0; opacity: 0; width: 30px; height: 30px; padding: 5px; background-color: #13c0ba; border-radius: 15px; color: #fff; } .nav.nav-justified > li.active > a > .quote { opacity: 1; } .nav.nav-justified > li > a > img { box-shadow: 0 0 0 5px #13c0ba; } .nav.nav-justified > li > a > img { max-width: 100%; opacity: .3; -webkit-transform: scale(.8,.8); transform: scale(.8,.8); -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav.nav-justified > li.active > a > img, .nav.nav-justified > li:hover > a > img, .nav.nav-justified > li:focus > a > img { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .tab-pane .tab-inner { padding: 30px 0 20px; } @media (min-width: 768px) { .nav.nav-justified > li > a > .quote { left: auto; top: auto; right: 20px; bottom: 0px; } }