Topic: Cards the same height and button at the bottom

dors9590 free asked 4 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 4 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags