Creating a seamless card-deck layout in Bootstrap4 - optimizing content display

I am attempting to utilize the card-deck feature with cards arranged in the following manner :

  • The card-deck is centered in a column
  • The card-deck adjusts to fit the content width (currently, it always spans 100% width, even when using width: auto)
  • The cards inside the card-deck are left-aligned

I have created a simple codepen for testing purposes and have tried various approaches without achieving the desired behavior... Please see https://codepen.io/studio-matavai/pen/zYBeQOX

<div class="row">
      <div class="col-12">
         <div class="card-deck">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
          <!-- additional card elements here -->
         </div>
      </div>
    </div>

Does anyone have the solution for this particular issue?

Thank you.

----- EDIT -----

Including an image :)

cssbootstrap-4flexboxbootstrap-cards

Answer №1

Here's the code snippet for a centered wrapper with multiple cards:

.wrapper {
    margin-left: auto;/*this makes wrapper center*/
    margin-right: auto;/*this makes wrapper center*/
    border:1px solid blue;
    width:100%;
    text-align:center;
    }

.card {
padding-left: 10px;
    padding-right: 10px;
    max-width: 240px;
    margin-left: 0px;
    margin-right: 0px;
    border: 0px;
    display: inline-block;
    min-width: 240px;
}

.card-body{
  border:1px solid black;
}
<html>
  <head>
  </head>
  <body>
    <div class="row">
      <div class="col-12">
         <div class="wrapper">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <!-- Repeat card sections as needed -->
         </div>
      </div>
    </div>
  </body>
</html>

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

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

How can I modify the container to prevent the Bootstrap dropdown from being clipped by overflow:hidden settings?

With bootstrap, I encountered a situation where dropdown menus are being clipped by my <div> with overflow: hidden. How can I address this issue without incurring high costs? One potential solution might be to change the container of all dropdowns wi ...

htmlcsstwitter-bootstrap

Looking to utilize the <pre> tag without any external CSS styles defined in a separate stylesheet?

In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default ...

htmlcss

JavaScript Scroller that keeps on scrolling

Unique Continuous JavaScript Scroller I am currently working on a JavaScript scroller script that enables left to right and right to left scrolling on the click of next and previous buttons. The script is designed to work with 1 to 3 div elements in a con ...

javascriptcssdom-eventsmobile-webkit

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

htmlcsspollingblackboard

Top tips for effectively handling two CSS frameworks simultaneously within a project

In the midst of developing a Single Page Application (SPA) project, I am faced with the challenge of integrating two conflicting CSS frameworks: one that is considered "new and fresh" and another that is deemed "old and painful". The requirement is that ev ...

csstwitter-bootstrapwebcss-frameworkscascade-framework

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...

javascripthtmlcssstringforms

Transforming ng-bootstrap carousel to utilize div elements instead of images

I am currently utilizing ng-bootstrap and Angular, along with chart.js. I have successfully created two charts that update in real-time with data. My goal is to display these charts within a carousel, allowing users to slide between them. I've been at ...

angularbootstrap-4carouselng-bootstrap

Achieving text center alignment and adding color to text within a header using Bootstrap

I am looking to center the text in a header and apply color to it using Bootstrap. Unfortunately, there is no direct option for font-color or text-color in Bootstrap. Below is my HTML and CSS code: #header { width: 800px; height: 50px; color :whi ...

htmlcsstwitter-bootstrapasp.net-mvc-4

Bug Alert: Fieldset Overflow Issue in Google Chrome

It appears that Google Chrome is experiencing a bug with overflowing content inside of a fieldset element. For a visual demonstration of the issue, you can visit this jsfiddle link: http://jsfiddle.net/Dismissile/Lnm42/ Upon inspecting the page, it becom ...

htmlcssgoogle-chrome

Focusing on a particular iframe

I am currently using the "Music" theme from Organic Theme on my WordPress site and have inserted this code to prevent SoundCloud and MixCloud oEmbeds from stretching the page width: iframe, embed { height: 100%; width: 100%; } Although the fitvid ...

javascriptcsswordpressiframe

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

htmlcss

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

javascriptjqueryhtmlcss

At times, Firefox may fail to fully showcase an image in fullscreen mode

Currently, my goal is to showcase an image in fullscreen mode using JavaScript. (Refer to the Fullscreen API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) JavaScript snippet: var requestFullscreen = function(el) { if(el.requestFullsc ...

javascripthtmlcssfirefox

The carousel slider is experiencing issues following the update to bootstrap 4

I recently attempted to upgrade my Bootstrap from version 3.3.4 to 4.1.3 by replacing the contents of bootstrap.js with the new version. Unfortunately, after making this change, the slider on my website stopped functioning properly. The carousel would disp ...

javascriptjquerytwitter-bootstrap-3bootstrap-4

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Hey there, I'm having some trouble with the autocomplete feature in Google Chrome. Can anyone suggest an alternative way to disable autocomplete for password fields? By the way, my project is using Vue.js. ...

javascripthtmlcssvue.js

Adjusting the desktop view through media queries for mobile devices

As someone with no coding experience, I've been working on my portfolio using Cargo. Currently, I'm trying to adjust the mobile view of an article on my homepage through media queries. However, the code is unintentionally changing the layout on d ...

cssresponsive-designmedia-queries

The jQuery Remove function that went haywire

Currently, I am delving into the world of Javascript/jQuery and attempting to construct a list of items in a table based on user input. The concept is simple - a user types text into a form, the JavaScript/jQuery captures that input and showcases it as a ...

javascriptjqueryhtmlcssbootstrap-4

Is there a way to add a line break to divs that haven't wrapped yet?

When processing xml that includes text marked up into words, lines, and paragraphs, I am able to output html/css. My desire is to maintain the existing line breaks if the screen width allows for it, but if not, I want the browser to handle the line-wrappin ...

htmlcss

Create a container and add two div elements with absolute positioning inside

Utilizing bootstrap 3, I am looking to incorporate two shadows within a container. The first shadow will be positioned at the top of the container, followed by the second shadow at the bottom using absolute positioning. CSS: .section-st1 { padding: 0 ...

jqueryhtmlcsstwitter-bootstrap