Menu
Objectives:
I using Bootstrap 4, and currently, my cards are only on one line. I read the documentation and I tried a lot of code. Currently, I don't understand why my cards are too small and not respect the size of 128px. The result is same a grid system responsive.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello</title>
</head>
<body class="text-center">
<div id='main-content' class="card-deck" style="margin: 50px 0 0 0">
<div class="card mb-4" style="max-width: 128px; max-width: 128px">
<a href="https://www.netflix.com/fr/"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<a href="https://www.hulu.com"><img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top"></a>
</div><span></span>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
711
To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.
Add . text-truncate in the card's title and or other texts. This forces texts to a single line. Making the cards have same height.
Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, style=" height: 10rem;" ) or Bootstrap's sizing utilities (for examle, <div class="card h-200"> ).
Take your cards out of the card-deck and put them into a row. And if you want to center the whole thing horizontally, add the justify-content-center class to the row like so (click the "run code button" and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.card-custom {
max-width: 128px;
}
</style>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
</div>
</div>Note that I've also added the classes mx-2 mb-3 for spacing.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
