<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"> <h2>Sách của bạn</h2> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#lop12"> Lớp <span class="bg-round bg-lop12">1</span> và <span class="bg-round bg-lop12">2</span> </a> </h4> </div> <div id="lop12" class="panel-collapse collapse in"> <div class="panel-body"> <div class="col-xs-2 col-md-2"> <div class="caption"> <h4>Lớp 1</h4> </div> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public//bookcovers/TA1_head.png" alt="Tiếng Anh 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Lớp 2</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public//bookcovers/TA2_head.png" alt="Tiếng Anh 2"> </a> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#lop3"> Lớp <span class="bg-round bg-lop3">3</span> </a> </h4> </div> <div id="lop3" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-xs-2 col-md-2"> <h4>Tập 1</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA3T1SHS_head.jpg" alt="Tập 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Tập 2</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA3T2SHS_head.jpg" alt="Tập 2"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Bài Tập</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA3SBT_head.jpg" alt="Sách bài tập 1"> </a> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#lop4"> Lớp <span class="bg-round bg-lop4">4</span> </a> </h4> </div> <div id="lop4" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-xs-2 col-md-2"> <h4>Tập 1</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA4T1SHS_head.jpg" alt="Tiếng Anh 3 Tập 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Tập 2</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA4T2SHS_head.jpg" alt="Tiếng Anh 3 Tập 2"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Bài Tập</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA4SBT_head.jpg" alt="Sách bài tập 1"> </a> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#lop5"> Lớp <span class="bg-round bg-lop5">5</span> </a> </h4> </div> <div id="lop5" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-xs-2 col-md-2"> <h4>Tập 1</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA5T1SHS_head.png" alt="Tập 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Tập 2</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA5T2SHS_head.png" alt="Tập 2"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Bài Tập</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA5SBT_head.png" alt="Sách bài tập 1"> </a> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#lop6"> Lớp <span class="bg-round bg-lop6">6</span> </a> </h4> </div> <div id="lop5" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-xs-2 col-md-2"> <h4>Tập 1</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA6T1SHS_head.jpg" alt="Tập 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Tập 2</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA6T2SHS_head.jpg" alt="Tập 2"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Bài Tập</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA6T1SBT_head.jpg" alt="Sách bài tập 1"> </a> </div> <div class="col-xs-2 col-md-2"> <h4>Bài Tập</h4> <a href="#" class="thumbnail"> <img src="http://s.sachmem.com/public/bookcovers/TA6T2SBT_head.jpg" alt="Sách bài tập 2"> </a> </div> </div> </div> </div> </div> </div>

a:hover{ text-decoration:none; } span.bg-round { border-radius: 0.9em; -moz-border-radius: 0.9em; -webkit-border-radius: 0.9em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; text-align: center; width: 1.6em; } span.bg-lop12{ background: #FF167F; } span.bg-lop3 { background: #F9A60C; } span.bg-lop4 { background: lightgreen; } span.bg-lop5 { background: #1BE7FF; } span.bg-lop6 { background: #C5FF19; } span.bg-lop7 { background: #FFD800; } span.bg-lop8 { background: lightsalmon; } span.bg-lop9 { background: magenta; }