Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to use cards with Bootstrap 4 on multiple line with fixed size?

Tags:

css

twitter-bootstrap

bootstrap-4

Objectives:

  • All cards have same height (128px) and width (128px)
  • If there are lot of cards and the screen isn't wide enough, show cards on the second line.

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>
like image 711
Adrien YUI Avatar asked Feb 05 '18 00:02

Adrien YUI

People also ask

How do you make all bootstrap cards the same size?

To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.

How do I make my bootstrap 4 cards the same 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.

How do I change the size of a card in bootstrap?

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"> ).

1 Answers

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.

like image 115
WebDevBooster Avatar answered Oct 24 '22 07:10

WebDevBooster
Sign in to Comment

Related questions

Keep bootstrap columns in same row when changing size
Onload event not working in select box (Dropdown List Box)
Would a browser load a css file multiple times on the same page?
Content inside fancy box need to be responsive
100vh results in scroll bar?
Disable Zoom effect on Hover for Mobile devices in elevateZoom
Html for put a label in bottom of an image
Understanding flex-grow
Jquery UI draggable doesn't resize other DIVs
How to only change left padding in javafx css
Spacing between flex elements?
Border-radius disappears with overflow rule
Chrome Animations button missing
Overwriting styles from Bootstrap in an angular2 component-stylesheet
change Google Material Icon on hover with only html/css
Flexed child with overflow respects parent's max-height in Chrome, not in Firefox
Set Leaflet Overlay Off in the Layer Control
Why do display: block and display: flex render the same element with a different height?
Pixelated image downscaling in Microsoft Edge
Angular 2 ngClass conditional with data?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!