Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/bootstrap-card-columns

Responsive Card columns built with Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials. https://mdbootstrap.com/docs/standard/extended/card-columns/
https://github.com/mdbootstrap/bootstrap-card-columns

bootstrap bootstrap-template bootstrap-theme bootstrap5 card cards column columns css html

Last synced: about 1 month ago
JSON representation

Responsive Card columns built with Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials. https://mdbootstrap.com/docs/standard/extended/card-columns/

Awesome Lists containing this project

README 

        
Responsive card columns built with the latest Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials.



Check out [Bootstrap Card Columns Documentation](https://mdbootstrap.com/docs/standard/extended/card-columns/) for detailed instructions & even more examples.



## Basic example

![Bootstrap 5 Card columns](https://user-images.githubusercontent.com/108793661/178461056-e2a59b5b-fd78-44e8-9fdd-cad5726d3551.png)

```html



  


    


      Hollywood Sign on The Hill

      


        
Card title


        


          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        


      


    


  


  


    


      Palm Springs Road

      


        
Card title


        


          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        


      


    


  


  


    


      Los Angeles Skyscrapers

      


        
Card title


        
This is a longer card with supporting text below as a natural lead-in to

          additional content.


      


    


  


  


    


      Skyscrapers

      


        
Card title


        


          This is a longer card with supporting text below as a natural lead-in to

          additional content.

        


      


    


  


  


    


      Skyscrapers

      


        
Card title


        


          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        


      


    


  


  


    


      Skyscrapers

      


        
Card title


        


          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        


      


    


  




```



## How to use?



1. Download MDB 5 - 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 examples

### Two columns

[![Bootstrap 5 Card columns #1](https://user-images.githubusercontent.com/108793661/178463009-8f9bfa10-4aa9-4447-aa35-9ec9aef73e00.png)](https://mdbootstrap.com/docs/standard/extended/card-columns/#section-two-columns-example)

### Responsive

[![Bootstrap 5 Card columns #2](https://user-images.githubusercontent.com/108793661/178462899-076ff8b1-bf60-45fd-9815-874d0c4b38f0.png)](https://mdbootstrap.com/docs/standard/extended/card-columns/#section-responsive-example)

### Spacing

[![Bootstrap 5 Card columns #3](https://user-images.githubusercontent.com/108793661/178464503-a468fa88-7d77-4560-a715-5a71f21b24b0.png)](https://mdbootstrap.com/docs/standard/extended/card-columns/#section-spacing-example)



You can find other examples [here](https://mdbootstrap.com/docs/standard/extended/slideshow/).






## More extended Bootstrap documentation