How to place cards side by side in bootstrap

Bootstrap is a great way to design websites and create stunning user interface. One of its most versatile components is the card element, which can be used to display photos, text and other information in an attractive manner. However, sometimes figuring out how to place cards side by side using Bootstrap can be a challenge.

This article will explain how you can use Bootstrap to display cards side by side. Before we start, it's important to understand that each card needs to be embedded within a containing element such as a row and column in order for the cards to display properly.

First, create the rows and columns that you want the cards to occupy. Next, you'll need to add the class "card-deck" or "card-columns" depending on whether you want the cards spaced evenly across the width of your screen or stacked on top of each other respectively.

The Card deck class will create equal-width cards which will display side by side:

...

...

...

... Other Columns Here // row ends here } // Container ends here } // Page ends here } . . . . . . . . . . . Of course If you want your cards stacked vertically get rid of the „card deck" and add „cards columns" instead like this:

​

...

< div />

< div />