Topic: Cards the same height and button at the bottom
                  
                  dors9590
                  free
                  asked 5 years ago
                
Hi,I am trying to make all the cards in the row the same height, in addition, the button at the bottom on the left side.Im using your basic card so any example will be amazing help for meany explanation of how should i do it? pleaseeee assistAll the best,
                      
                      Jakub Chmura
                      staff
                        answered 5 years ago
                    
Hi @dors9590,
If you use the component MDBCardGroup all cards inside are positioned horizontally.
Button inside cards is an external element, so you can position it as you want using CSS flexbox or other CSS rules.
Simple example without button positioning:
import React from 'react';
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardGroup,
  MDBCardText,
  MDBCardTitle,
  MDBCardVideo,
} from 'mdbreact';
function App() {
  return (
    <div style={{ maxHeight: '30vh', marginTop: '10vh' }} className='container'>
      <MDBCardGroup>
        <MDBCard>
          <MDBCardVideo
            src='https://www.youtube.com/embed/uMQ63tI_h2Y'
            ratio='1by1'
          />
          <MDBCardBody>
            <MDBCardTitle tag='h5'>1:1 Aspect ratio</MDBCardTitle>
            <MDBCardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </MDBCardText>
            <MDBBtn color='primary' size='md'>
              read more
            </MDBBtn>
          </MDBCardBody>
        </MDBCard>
        <MDBCard>
          <MDBCardVideo
            src='https://www.youtube.com/embed/980CZbPAtQU'
            ratio='4by3'
          />
          <MDBCardBody>
            <MDBCardTitle tag='h5'>4:3 Aspect ratio</MDBCardTitle>
            <MDBCardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </MDBCardText>
            <MDBBtn color='primary' size='md'>
              read more
            </MDBBtn>
          </MDBCardBody>
        </MDBCard>
        <MDBCard>
          <MDBCardVideo
            src='https://player.vimeo.com/video/137857207'
            ratio='16by9'
          />
          <MDBCardBody>
            <MDBCardTitle tag='h5'>16:9 Aspect ratio</MDBCardTitle>
            <MDBCardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </MDBCardText>
            <MDBBtn color='primary' size='md'>
              read more
            </MDBBtn>
          </MDBCardBody>
        </MDBCard>
      </MDBCardGroup>
    </div>
  );
}
export default App;
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.26.1
 - Device: macbook
 - Browser: chrome
 - OS: OSX
 - Provided sample code: No
 - Provided link: No