<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <h2>If the image height bigger then width Bootstrap 3 will scale the thumbnails to the same size.</h2> <div class="row display-flex"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://observation.org/media/photo/46744451.jpg" alt="AngularJS"> <div class="caption"> <h3>AngularJS</h3> <p>Streamline your web applications with this hands-on course...</p> <div class="btn-group"> <a href="#" class="btn btn-primary" role="button">E-book</a> <a href="#" class="btn btn-default" role="button">Print + Ebook</a> </div> </div> </div> </div> <!-- Diğer kutular --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://picsum.photos/400/300?1" alt="React"> <div class="caption"> <h3>React</h3> <p>Build reusable UI components with ease and clarity using ReactJS.</p> <div class="btn-group"> <a href="#" class="btn btn-primary" role="button">E-book</a> <a href="#" class="btn btn-default" role="button">Print + Ebook</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://picsum.photos/400/300?5" alt="React"> <div class="caption"> <h3>React</h3> <p>Build reusable UI components with ease and clarity using ReactJS.</p> <div class="btn-group"> <a href="#" class="btn btn-primary" role="button">E-book</a> <a href="#" class="btn btn-default" role="button">Print + Ebook</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://picsum.photos/400/300?2" alt="React"> <div class="caption"> <h3>React</h3> <p>Build reusable UI components with ease and clarity using ReactJS.</p> <div class="btn-group"> <a href="#" class="btn btn-primary" role="button">E-book</a> <a href="#" class="btn btn-default" role="button">Print + Ebook</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://picsum.photos/400/300?3" alt="Vue"> <div class="caption"> <h3>VueJS</h3> <p>A progressive framework for building user interfaces.</p> <div class="btn-group"> <a href="#" class="btn btn-primary" role="button">E-book</a> <a href="#" class="btn btn-default" role="button">Print + Ebook</a> </div> </div> </div> </div> </div> </div> </div>

.row.display-flex { display: flex; flex-wrap: wrap; margin: 0 -15px; } .display-flex > [class*='col-'] { display: flex; flex-direction: column; margin-bottom: 30px; } .thumbnail { flex: 1 0 auto; display: flex; flex-direction: column; height: 100%; } .thumbnail img { width: 100%; height: 200px; object-fit: cover; /* Resmi kırparak hizala */ border-radius: 10px 10px 0 0; } .caption { flex: 1; display: flex; flex-direction: column; padding: 15px; } .caption h3 { font-size: 18px; margin-top: 0; margin-bottom: 10px; } .caption p { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .caption .btn-group { margin-top: auto; }