The column count is not properly set by Bootstrap 4.3 card-deck

I am working with Bootstrap 4.3 and custom Bootstrap SCSS imports, attempting to configure my card-deck for a custom theme. However, I am facing an issue with the $card-columns-count, as it is not being set correctly to 3 columns (as shown in the screenshot).

https://i.sstatic.net/k74qd.png

I have thoroughly reviewed all aspects of my code but cannot seem to identify any incorrect markup or missing elements.

This is the code snippet:

<div class="js-view-dom-id-782ad9c1f67057f3ddbbae335925382482f61ffa0bbdb300906427454d9c43d7 card-deck">

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  ...

</div>
csssassbootstrap-4

Answer №1

To make specific CSS overrides, you can refer to the code snippet below for a possible solution:

@media (min-width: 576px){
  .card-deck {
    justify-content: space-between;
  }
  .card-deck .card {
    flex: 32% 0 0;
    margin: 0 0 15px 0;
  }
}

JSFiddle Link

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

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

javascriptjquerycsshtml

Implement custom styles to enhance the appearance of users' Magento websites

Is it possible to add additional CSS only to users/customers who are logged into our webshop? If so, how should I go about it - through XML or PHTML? Stian ...

cssmagentophp

Is it possible for Visual Composer to collaborate seamlessly with Bootstrap 4.0?

Is there a potential conflict between using any theme with the latest Bootstrap framework 4.0 and incorporating the Visual Composer plugin for WYSIWYG editing? If so, are there any solutions to resolve this issue? ...

wordpressbootstrap-4visual-composer

Learn the steps to seamlessly incorporate Bootstrap templates with handlebars.js to enhance the visual appeal of

Greetings! I'm facing an issue while trying to display a bootstrap template using handlebars (I am utilizing Express as the server). The template does not render correctly as the carousel slider and Navbar logo are missing. PS: I have included all ...

jquerynode.jsexpresshandlebars.jsbootstrap-4

aligning a floating image vertically

One issue I am facing in my UI is that I have buttons with images floating next to text. While the setup works well, I am struggling to vertically align the image with the text. I've experimented with various solutions including using vertical-align: ...

htmlcss

Place one flex item in the center and align another item to the bottom

I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...

htmlcssflexbox

Unexpected behavior in Internet Explorer with ChartJS version 2.6.0

When using ChartJS v2.6 to create a pieChart within a Bootstrap Grid, everything appears correctly in Chrome and Firefox, but not in Internet Explorer. In IE, the chart is unintentionally stretched on larger screens. Bootstrap should handle the sizing, but ...

cssbootstrap-4chart.js

Tips for utilizing the grid system in Bootstrap 4 to transform a dropdown menu into the desired shape shown in the image

I am struggling to create a dropdown menu similar to the one highlighted with a red border in the image, The screenshot I referenced is from the bootswatch website (a bootstrap theme). Although I attempted to use bootstrap flex utility, I was unable to a ...

htmlcssbootstrap-4

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

javascriptcsshtmljquery-selectorsbackground-image

The 'Required' attribute in HTML is malfunctioning

The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute ...

javascripthtmljquerybootstrap-4

Firefox displays text smaller than Chrome

Hey there! I'm facing a little issue with my code. It renders correctly on Chrome (to the right), but on Firefox (to the left) it's a bit off. Any suggestions on how I can fix this? It usually corrects itself after a refresh (zoom in/out), but al ...

htmlcssgoogle-chromefirefox

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

What is the best way to showcase an unordered list alongside corresponding images, with a paragraph text next to each one?

Hey there, I need a little help with displaying an unordered list correctly. Here's how it should look: Below is the code snippet that needs some fixing: <ul> <li><img src="images/02.jpg" alt="Picture 1"></li> ...

htmlcssxhtmlfrontend

What could be causing the flex item to overstep its bounds in the mobile view?

Just starting to dive into the world of CSS and HTML, I am currently experimenting with FlexBox. I have encountered an issue with my layout and I can't seem to figure out why my second div (.rightContainer) is overflowing its parent. I have tried remo ...

htmlcssmobilelayoutflexbox

Troubleshooting resizing images in React using Material UI's useStyles

When attempting to resize an image using React, I am encountering a problem where adjusting the height and width of the tag with useStyles does not reduce the size of the image but instead moves it around on the page. Here is the code snippet: import { ma ...

javascriptcssreactjsmaterial-uiresize

CSS technique to display background on hover

My website has a bootstrap 'More' dropdown feature on the left navigation bar. However, there is an unwanted background hover effect that I can't seem to remove. Despite removing all background hovers from my CSS, the issue persists. Can any ...

css

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Enhancing react-confirm-alert: Steps to incorporate your personalized CSS for customizing default settings

I'm currently utilizing a confirmation popup feature provided by react-confirm-alert: popup = _id => { confirmAlert({ title: "Delete user", message: "Are you sure?", buttons: [ { label: ...

javascriptcssreactjscss-selectors

Preventing scrolling within a jQuery tab using jQuery

Looking to enhance my jqueryUI tabs by incorporating a smooth scroll bar within each tab. I've experimented with various scrollable plugins such as jQuery custom content scroller, TinyScrollbar, and now areaaperta NiceScroll. However, I continue to en ...

javascriptjquerycss