What is the best way to break a card deck in Bootstrap 4 for optimal display?

Looking for a solution to display generated cards in rows with a fixed height and width. The current code I have only displays all the cards on a single row, making each card too thin:

<div class="container">
    <div class="card-deck">
        @foreach (var item in Model)
        {
            <div class="card shadow">
                <div class="card-title pl-4 pr-4 pt-3">
                    <h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="@item.TrainingId">@Html.DisplayFor(modelItem => item.Title)</a></h4>
                </div>
                <div class="card-body overflow pl-4 pr-4 pb-2">
                    <div class="font-weight-bold text-secondary">
                        @Convert.ToDateTime(item.DateCreated).ToString("MM/dd/yy")
                    </div>
                    @Html.DisplayFor(modelItem => item.Description)
                </div>
                <div class="card-footer">
                    <div class="text-center text-muted training-footer">
                        @Html.DisplayFor(modelItem => item.Topic.Topic)
                    </div>
                </div>
            </div>
        }
    </div>
</div>

If you have any tips or solutions on how to split these cards into multiple rows with fixed sizes, please share them! Thank you!

Answer №1

To customize the layout of cards in a row using Bootstrap's grid system, you can utilize the row-cols-1 row-cols-md-2 class to specify the number of cards per row at different breakpoints. This approach ensures that all cards maintain consistent height.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21767b7d747974738372523478463c7373086271606462">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f8e9fef9fdfbfef8fbbcfedbe9fbdeef0ecdbfaeffbfdfafcbdaceff05edb0fcf0f9f8f5event"></a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ml-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
      </div>
   </div>
</nav>
<div class="container mt-5">
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
      <div class="col mb-4">
            <div class="card shadow h-100">
               <div class="card-title pl-4 pr-4 pt-3">
                  <h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">First Title</a></h4>
               </div>
               <div class="card-body overflow pl-4 pr-4 pb-2">
                  <div class="font-weight-bold text-secondary">
                        03/21/21
                  </div>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               </div>
               <div class="card-footer">
                  <div class="text-center text-muted training-footer">
                        Last updated 7 days ago
                  </div>
               </div>
            </div>
      </div>
	// Code truncated for clarity
	  
   </div>
</div>

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

What are the steps to adjust image size using CSS in an email signature?

Having trouble with my email signature. It appears fine on my end, but when the recipient replies, the images are oversized and the css is not rendering correctly in their response. I'm puzzled as to why this is happening. Here's the code snippe ...

C# program to filter results from a calendar to only show events scheduled for the current date

Hello, I am currently utilizing a calendar control in my application and am seeking assistance on how to select dates only from today's date onwards. The calendar control is placed within the content place holder. Any help with this issue would be gre ...

Having difficulties with hovering over a td that has a rowspan

I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...

What causes a CSS class to have priority over another?

I've encountered a challenge in my Vue.js project where I'm utilizing Vuetify and vue-flash-message. My goal is to change the warning message background to 'blueviolet' by adjusting its style: .flash__message.warning { color: #ffffff ...

What is causing the lack of animation when the drawer is closing?

I am looking to create an animated drawer that slides in and out. When the animation finishes, I want it to disappear by setting `display: none`, but if the drawer is closed without animating out, it should just vanish. const Drawer = ({ closeDrawer, isDra ...

Creating equal height nested columns in Bootstrap 3 Grid: ensuring all nested columns are uniform in height

Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...

External JavaScript is not functioning

I am encountering an issue with an external JavaScript file not working in my HTML document. Strangely, Firebug is not reporting any failures. However, when I directly run the JS code in my HTML file, it works perfectly. Here is the content of action.js: ...

Is it advisable to avoid using XHTML elements, tags, and attributes that will not be included in the HTML 5 specification?

Given that I am currently utilizing XHTML 1.0 Strict, does it make sense to avoid using XHTML elements, tags, and attributes that are not included in the HTML5 specification? For example: <acronym> and <big> ...

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

What is the best way to extract and analyze CSS code from an HTML page using Java programming language

I'm looking to extract and parse the content of HTML pages using the Jsoup API, which can be found at . However, I've encountered a challenge in extracting CSS that is located in a different folder. How can this be achieved? Currently, my code ...

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

ASP.net Ajax Toolkit Experiencing Error in HTML Editor Functionality

I am currently working on validating the content within an HTML Editor by using a custom ASP.net validator control. The main goal is to ensure that some content has been entered, similar to how a required field validator functions. Within the ClientValida ...

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

How can I make a div collapse in the same way as the Facebook chat

I am working on creating a chat feature similar to Facebook chat for personal use. Everything is functioning correctly, except for some issues with the CSS. I attempted using position absolute to arrange the div, which worked fine, but encountered problem ...

Opening a PHP file without performing thorough validation in JavaScript can lead to security vulnerabilities

I am in need of some assistance. I am currently working on a form and seem to be encountering an issue. Whenever I click on the submit button without checking the full validation, it performs the PHP action. For instance, when I input a serial number into ...

Leverage both Java and .NET within a single project

Currently, I am working on a college project with my team. While my team mates are keen on using Java technology, I am more inclined towards working with .net. I am wondering if it is feasible to initially develop the website using Java and later transiti ...

Displaying server errors in an Angular componentIn this tutorial, we

As I work on creating a registration page, my focus has been on posting data to the server. I have successfully implemented client-side and server-side validation mechanisms. Managing client-side errors is straightforward using code such as *ngIf="(emailAd ...

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

Clicking a button with Java Selenium

While trying to navigate all the pages on a website, I encountered an issue where after scrolling to the second page, I received an exception stating that the element does not exist on the page. Upon further investigation, I realized that the CSS selecto ...

Creating a canvas with multiple label introductions can be achieved by following these

I am looking to group labels and sublabels on the x-axis of a canvas component. Currently, I only have sublabels like: RTI_0, RTI_1... I would like to add labels to these sublabels like: RTI = {RTI_0,RTI_1,RTI_2] BB = {BB_0, BB_1,BB_2,BB_3] <div cla ...