Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-card-deck

Responsive Card Deck built with Bootstrap 5, React 17 and Material Design 2.0. Bootstrap card-deck with multiple rows and standard breakpoints.
https://github.com/mdbootstrap/react-card-deck

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js jsx react react-bootstrap

Last synced: about 2 months ago
JSON representation

Responsive Card Deck built with Bootstrap 5, React 17 and Material Design 2.0. Bootstrap card-deck with multiple rows and standard breakpoints.

Awesome Lists containing this project

README 

        
Responsive Card Deck built with Bootstrap 5, React 17 and Material Design 2.0. Bootstrap card-deck with multiple rows and standard breakpoints.



Check out [React Bootstrap Card Deck Documentation](https://mdbootstrap.com/docs/react/extended/card-deck/) for detailed instructions & even more examples.



## Card deck layout



In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.



### Cards group



Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.



![React Bootstrap Card Deck](./assets/basic.png)



```js

import React from "react";

import {

  MDBCard,

  MDBCardImage,

  MDBCardBody,

  MDBCardTitle,

  MDBCardText,

  MDBCardGroup,

  MDBContainer,

} from "mdb-react-ui-kit";



export default function Basic() {

  return (

    

      

        

          

          

            Card title

            

              This is a wider card with supporting text below as a natural

              lead-in to additional content. This content is a little bit

              longer.

            

            

              Last updated 3 mins ago

            

          

        



        

          

          

            Card title

            

              This is a wider card with supporting text below as a natural

              lead-in to additional content.

            

            

              Last updated 3 mins ago

            

          

        



        

          

          

            Card title

            

              This is a wider card with supporting text below as a natural

              lead-in to additional content. This card has even longer content

              than the first to show that equal height action.

            

            

              Last updated 3 mins ago

            

          

        

      

    

  );

}

```



## How to use?



1. Download MDB React - free UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



___



## More extended Bootstrap documentation