The equal height feature in Bootstrap 4's card-deck is not functioning as expected

I am having an issue with the card-deck property where it is not being applied correctly. The .card-deck class should create a grid of cards that are equal in height and width, and the layout should adjust automatically as more cards are added.

Here is the code snippet:

<div class="container-fluid"> 
<div class="card-group">
    <div class="card" id="col1m">
        <div class="card-header text-center" style="color: #888" id="display1_title">CAUDAL abcdefghi (BPM)</div>
        <div class="card-body text-center" id="col1">
            <p class="card-text" style="font-family:roboto; font-weight: bold; color:#888" id="display1_value">0</p>
        </div>
    </div>

    <div class="card" id="col2m">
        <div class="card-header text-center" style="color: #888;" id="display2_title">VOL. TOTAL (BBL)</div>
        <div class="card-body text-center" id="col2">
            <p class="card-text" style=" font-family:roboto; font-weight: bold;   color: #888" id="display2_value"> 0 </p>
        </div>
    </div>
</div>
</div>
htmlcssbootstrap-4

Answer №1

Your code structure seems to be in order with a closing div at the end and an opening div at the beginning. Here is the code functioning properly:

https://example.com/code-sample

<div class="container">

  <div class="box" id="box1"   >
      <div class="title" style=" color: #333" id="title1">Title One</div>
      <div class="content" id="content1" >    
      <p class="text" style=" font-family:arial; font-weight: regular;  color: #333"   id="text1"> Sample Text  </p>
      </div>
  </div>

<div class="box" id="box2"  >
      <div class="title" style=" color: #333 ; " id="title2"  >Title Two</div>
      <div class="content" id="content2"   >    
      <p class="text" style=" font-family:arial;    font-weight: regular;   color: #333"   id="text2"> Sample Text  </p>
      </div>
  </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

Refresh the page when the dropdown selection is changed and send the new value

I'm currently working on a page that includes a dropdown menu. My goal is to have the page reload after selecting an option from the dropdown so that it returns to the same page with the selected value passed through. Here's the PHP code for th ...

phphtmldrop-down-menu

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

javascripthtmlcss

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

javascripthtmlcssreactjsnext.js

What is the process for generating an Electronic Program Guide for television?

Welcome to the forum! I'm a front-end developer at a company for 6 months now, currently working on a TV app. It's my first experience in this field and I'm facing some challenges, particularly with creating an epg for the app. Unfortunately ...

javascriptcssvue.jstelevisionepg

Guide to dynamically generating checkboxes or multi-select options in ASP.NET MVC 4

Within this project, we have implemented two separate lists - one for the dealer and another for their products. Currently, when selecting a specific dealer, all associated products are returned using JavaScript (Json). Utilizing Html 5: @using (Html.Be ...

javascriptjsonhtmlc#-4.0asp.net-mvc-4

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass: dateClass() { return (date: Date): MatCalendarCellCssClasses => { const unvailableArray = this.shareDate.unavailableDates; ...

htmlcssangulartypescriptangular-material

How to Dynamically Load SVGs in Angular 10 Without Using IMG or OBJECT Elements

I have been exploring a more streamlined method for loading SVG files without relying on IMG or OBJECT tags, as it limits my ability to control fill colors through external CSS. While using inline SVG seems like the best option, managing numerous component ...

htmlangularsvghttpclientelement

Issue with pre-selected checkboxes: JavaScript

A function was created to automatically check the first value of a checkbox when a page is loaded: function defaultCheck(){ document.checkBoxForm.list[0].checked = true; var val=document.checkBoxForm.list[0].value; showtotal[0] = docum ...

phpjavascripthtmlajaxcheckbox

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

htmlcss

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

javascriptjqueryhtmljsonstringify

Sending the slider value from a website to a program when the slider is adjusted

I have been experimenting with programming an ESP32 to regulate the LED brightness using a slider. I've pieced together some information from tutorials found on and Currently, I've achieved the ESP32 connecting to my network, displaying the sli ...

javascripthtmlarduinoslideresp32

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations

Style applied directly to .col elements

I want to customize the styling of the .col elements on a single page without affecting other pages. I've tried adding the following code snippet to my CSS file: .col { border: 1px solid #7851A9; } However, this also styles the element ...

htmlcss

Is It Better to Consider Angular Elements as Building Blocks or Encapsulated Components?

When it comes to using element directives, I have noticed Angular element directives being used in two distinct ways: 1. Block Level Components In this approach, the element is styled with display:block, essentially making the element itself the componen ...

htmlangularjsangularjs-directivetagsdirective

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Issues with CSS transitions not functioning properly following the use of toggleClass()

I recently implemented a toggle-menu feature, which you can see in action on this demo. To enhance the toggle-menu, I added a CSS transition effect to div.nav-menu, utilizing max-height:0; and increasing it to max-height:480px;. However, after clicking t ...

jquerycsscss-transitions

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

javascripthtmlasp.net

Facing a minor HTML syntax error while attempting to configure metatags in Ruby on Rails

I'm attempting to incorporate social tags into my site, such as Tweet count, Facebook recommendations, and their respective numbers. In the app/views/application/_ogmeta.html.erb file, I have only included one line: <meta property="og:title" cont ...

htmlruby-on-railssyntax-error

Discovering modifications to CSS using selenium

Currently, I am working on an ajax form where CSS elements are dynamically changed. I am curious to know if it is feasible to verify these changes using Selenium. For example, checking if the background color changes from #ffffff to #000000 after clicking ...

cssselenium