The best way to utilize Bootstrap 4 cards on multiple lines while maintaining a fixed size

Goals:

  • Ensure all cards are a consistent height and width of 128px.
  • If there are too many cards to fit on one line, display them on the second line.

Currently, I am using Bootstrap 4 and facing an issue where my cards are not adhering to the specified size of 128px. Despite trying various code snippets from the documentation, the result is still not meeting my requirements. The layout appears more like a responsive grid system rather than uniform card sizes.

In my HTML file:

<!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>
          
          <!-- Additional card elements go here -->
          
          </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>
csstwitter-bootstrapbootstrap-4

Answer №1

Remove your cards from the card-deck and place them into a row. If you wish to align the entire layout horizontally, include the justify-content-center class in the row as shown below (click "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>
       <!-- Rest of the card elements here -->
    </div>
</div>

It's worth mentioning that I've included the classes mx-2 mb-3 for appropriate spacing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scroll automatically when dragging the mouse

My D3 tree creation is causing an issue with the horizontal scroll bar in Firefox 37. When trying to drag select a tree node, the horizontal scroll bar does not work. However, in Chrome, the horizontal scroll works fine during drag selection. <div cl ...

jquerycssd3.js

Overlapping columns with bootstrap images

Struggling to make three images responsive using Bootstrap columns. While they appear responsive, the issue is that the images overlap, except for the last column which displays correctly. <div class="row"> <div class="col-sm-2 offset-sm-3" ...

htmlbootstrap-4responsive

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

htmlcss

Unique Menu: Challenge when adjusting the width of 5 divs upon hovering while maintaining full site width at 100%

I'm looking to create a sleek custom menu with 5 fields. I want the field under the mouse to expand in width on mouseover, while the other fields shrink in width. The issue I'm facing is that the transition effect is not smooth and the total wid ...

javascripthtmlcssmenu

What is the best way to customize the primary Button style in Bootstrap?

Would you like the background-color to change when clicking on the radioButton? .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: black !important; color: white !important; } .btn-primary { colo ...

htmlcssangularbootstrap-4angular6

Overlap elements without using absolute positioning and prevent resizing distortion

Looking to incorporate a line with tick marks and a ball (similar to a scale) into my design. Some tutorials recommend using absolute positioning or float for this effect. While these methods work partially, I've noticed that the divs tend to shift o ...

htmlcss

Dynamic bullseye displayed on a Vis.js network node

I am currently utilizing Vis.js to create network diagrams. I am interested in adding a notification feature where when an AJAX update is received for a specific node, the canvas will move that node to the center (which Vis.js can already do). Following th ...

javascriptjquerycssnode.jschap-links-library

Trouble aligning content in CSS? Try using justify-content center for perfect centering!

I am facing an issue with centralizing the content properly. Despite using justify-content:center, the layout breaks. https://i.sstatic.net/EMiw1.png When I apply justify-content:center, the layout appears like this: https://i.sstatic.net/lTJRi.png Her ...

htmlcssreactjs

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

What is the CSS syntax for styling children that are not immediate descendants?

My query is about whether it's appropriate to reference a child of an element that is not a direct child. Imagine having this HTML structure: <form class="formation"> <p> <span> <input class="phone input"> ...

htmlcsswordpress

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

csshtmlcenter

Enhancing react-input-range with unique Custom Arrow heads

I'm currently working with react-input-range to create a price range slider. While I've managed to customize the CSS of the range slider, I now need to figure out how to add arrow heads inside the circles as shown below: https://i.sstatic.net/pm ...

javascriptcssreactjsless

What is causing this mysterious gap to appear between these two elements?

Can someone help me identify the issue between these two p elements? I checked the box model and there doesn't seem to be any margin set. Here is the fiddle and code for reference - https://jsfiddle.net/f3m2apgy/ <body> <style> #conta ...

htmlcss

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

Ways to stop Content from Showing below a div container

Hey, I just created a login panel using CSS and HTML. After applying some floats, all the content ended up displaying under the panel. I attempted to use clear: both, but that didn't resolve the issue. My goal is to have all other contents displayed a ...

htmlcss

The Bootstrap Navbar is displaying incorrectly and not adjusting properly in various viewports

To create a page header with a unique design, I am looking to incorporate a banner image with 4 cross lines along with the logo. Image Link The goal is to align text on both the dark blue and light blue bars with the logo on the left side of the image. ...

htmlcssformattingbootstrap-5

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Currently exploring AngularJS after experimenting with Twitter's Bootstrap. I appreciate Bootstrap for its simplicity, sleek design, and mobile-friendliness. On the other hand, I have noticed a trend where people recommend using AngularJS over jQuery, ...

javascripthtmlangularjstwitter-bootstrap

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

javascriptjqueryhtmlcss

Utilizing a Bootstrap Frontend to Connect with a Rails JSON-API

Forgive me if this sounds naive, but I'm unsure how to access the 'endpoints' from my current Rails JSON-API Server in my Bootstrap page. Do I need to place the Bootstrap page within the view folder of the API server? If so, how do I invoke ...

ruby-on-railsjsontwitter-bootstrapfrontendrails-api

Updating images based on dropdown selection using Bootstrap

Can you provide guidance on changing the img src (<img src="img/website_building.jpg"...) within a Bootstrap dropdown list based on item selection? Is this functionality achievable? <tr> <td class="bold text-primary"> ...

jquerybootstrap-4