<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="container-fluid sec-event"> <div class="container"> <div class="row"> <div class="col"> <h2>آخرین رویدادها</h2> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col"> <ul class="nav nav-pills mb-3" id="mhk-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">اول</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">دوم</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">سوم</a> </li> </ul> <div class="tab-content" id="mhk-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="row"> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="http://www.mihanmedia.ir/userfile/photo_2018-04-09_10-22-59.jpg" alt="Card image cap"> <div class="card-body"> <h6 class="card-subtitle small mb-2 text-muted ">20 شهریور</h6> <h6 class="card-title"><a href="#" class="card-link text-dark">ارزشیابی مطالعات اجتماعی</a> </h6> <p class="card-text text-muted ">تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد</p> </div> </div> </div><!--.col--> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="http://www.mihanmedia.ir/userfile/photo_2018-04-09_10-22-59.jpg" alt="Card image cap"> <div class="card-body"> <h6 class="card-subtitle small mb-2 text-muted ">20 شهریور</h6> <h6 class="card-title"><a href="#" class="card-link text-dark">ارزشیابی مطالعات اجتماعی</a> </h6> <p class="card-text text-muted ">تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد</p> </div> </div> </div><!--.col--> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="http://www.mihanmedia.ir/userfile/photo_2018-04-09_10-22-59.jpg" alt="Card image cap"> <div class="card-body"> <h6 class="card-subtitle small mb-2 text-muted ">20 شهریور</h6> <h6 class="card-title"><a href="#" class="card-link text-dark">ارزشیابی مطالعات اجتماعی</a> </h6> <p class="card-text text-muted ">تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد</p> </div> </div> </div><!--.col--> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="http://www.mihanmedia.ir/userfile/photo_2018-04-09_10-22-59.jpg" alt="Card image cap"> <div class="card-body"> <h6 class="card-subtitle small mb-2 text-muted ">20 شهریور</h6> <h6 class="card-title"><a href="#" class="card-link text-dark">ارزشیابی مطالعات اجتماعی</a> </h6> <p class="card-text text-muted ">تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد</p> </div> </div> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col text-left"> <a href="#" class="text-danger small">مشاهده تمام اخبار</a> </div> </div><!--.row--> </div><!--.tab-pane--> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">دوم</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">سوم</div> </div> </div><!--.col--> </div><!--.row--> </div><!--.container--> </section>

.sec-event{ direction: rtl; text-align: right; padding-top: 2.5rem; background: #fafafa; padding-bottom: 5rem; } .sec-event #mhk-tab li a.active{ background-color: #f57921; color: #fff; } .sec-event #mhk-tab li a{ color: #545454; }