Bootstrap card, stretch to all be the same size

Question

I am using owl-carousel and bootstrap cards to make a rotating table of different cards to display in my webpage, the only problem I am having is that all of the cards are not equal in terms of height. i want them to have a sense of uniformity that way when i place more carousels later on its more streamlined and looks more professional. below i have included the snippet for the html, css, and javascript as well as an image of what im seeing. i realize this is likely to do somewhere in the CSS, but i cannot figure out how to get all of the cards to be the same height. in the image below note that of the cards presented 2 "look" to be of the same height but are not. depending on what is actually in the body is what makes the height apparently. in an earlier version of the webpage, i was able to acheive this, but now I cannot

I am also attaching a copy of the live webpage in which the original code resides. Please no comments on the design of the actual webpage. i am trying to develop a live resume for myself. I am only attaching the page so you can see what the code looked like before. and the look i am trying to acheive. In the webpage you can see that all of the card bodies are of the same height which is what im trying to replicate. any help greatly appreciated.

$(".owl-carousel").owlCarousel({
   responsiveClass: true,
   dots: true,
   dotsContainer: false,
      loop: true,
      autoWidth: false,
     autoplay:true,
     nav:true,
     smartSpeed:1000,
     items:5,
     responsive: {
       0: {
          items:1,
          // margin: 150,
          center: true

          },

       768: {
            items:1,
            // margin:200,
            center: false
            },

       992: {
            items:2,
            // margin: 35,
            center: true
            },

       1200: {
             items:3,
             // margin:250,
             center: true
             },

                  },
 });

/* *****************Project Cards ************************ */
.projectTitle{
  color: #cdac81;
  margin-top: 4rem;
  text-align: center;
  font-size: 3rem;
}
.card{
  opacity: .90;
  background-color: #00303f;
  color: #cdac81;
  border-style: inset;
  border-color: #cdac81;
  border-width: 5px;
  border-radius: 1%;
}
.card-text{
  text-align: left;
  color: #cdac81;
}
.card-image{
  align-self: center;
  width: 90%;
}
.card-title, .card-body{
  text-align: center;
}
.card-body{
  
}
.projectCarousel{
  height: 62.5rem;
}
.projectCol{
  width:auto;
  height: auto;
}
.projectName{
  font-family: serif;
  font-size: 1.25rem;
}
#projectHeader{
  font-family: serif;
  text-align: center;
  font-size: 100px;
}
.owl-carousel{
  height: 62.5rem;
}



  
    
    projects

    
    

    
    
    

    
    
    


  
    
      

        
        
        
          
            
              Home
            
            
              Resume
            
            
              Projects
            
            
              skills
            
          
        

      
    

    
      
        
          Projects
        
      
      
        
          
            
              
                
                  
                  
                    Tip Calculator
                    - Completed -
                    
                      The calculator takes the amount of the bill, and the amount of people splitting the bill,
                        applies a 15% tip and displays to the user the amount each should be paying equally.
                      Uses the tkinter kit to display a simple GUI
                      
                        Python
                      
                    
                    Take a look at the code!
                 
                
              


            
              
                
                
                  Tindog
                  - Completed -
                  
                    This is a project that was part of a coding bootcamp as an introductory to Web Design
                    A spoof on the Website known as tinder... but for dogs. Enjoy
                    The website is meant as a one-page construction with no actual usage but to teach basic, to intermediate
                      bootstrap principles and techniques.
                      
                        Bootstrap, HTML, CSS
                      
                    
                    Go to the Site
                
              
            

            
              
                
                
                  Dice Game Challenge
                  - Completed -
                  
                    This is a project that was part of a coding bootcamp as an introductory to Web Design
                    the website generates a random number from 1-6 for two sets of dice
                    the webiste then uses javascript to change to the appropriate image and display a winner
                    
                      javascript, HTML, CSS
                    
                  
                  Go to the Site
                
              
            
              
                
                  
                  
                    Drum Kit
                    - Completed -
                    
                      This is a project that was part of a coding bootcamp as an introductory to Web Design
                      the website teaches foundations of event listeners, and adding audio to a webpage
                      it looks for keystrokes as well as a click to interpret what sound needs to be played
                      
                        javascript, HTML, CSS
                      
                    
                    Go to the Site
                  
               
             
             
               
                 
                 
                   Simon Says
                   - Completed -
                   
                     This is a project that was part of a coding bootcamp as an introductory to Web Design
                     the website teaches foundations of using jQuery to perform the bulk of the background work
                       needed to play the game.
                     The game show's simons move's and allows the user to input in sequence the same moves.
                       if the user inputs an incorrect move a game over event will trigger.
                     
                       jQuery, HTML, CSS
                     
                   
                   Demo!

terrymorse · Accepted Answer

This code will set all card heights to the maximum height found:

  // set height of all cards to max height

  // get array of all '.card' elements
  const cards = Array.from(document.querySelectorAll('.card'));

  // form array of card element heights (offsetHeight)
  const cardHeights = cards.map(card => card.offsetHeight);

  // find the maximum value of cardHeights array
  const maxCardHeight = Math.max(...cardHeights);

  // set all card `height` styles to `maxCardHeight`
  cards.forEach(card => {
    card.style.height = maxCardHeight + 'px';
  });

Bootstrap card, stretch to all be the same size

Answers (1)

Related Questions