how to horizontally align kitchen sink cards in bootstrap?

Question

I am trying to align me kitchen sink cards horizontally here is a picture of the cards.

( https://i.stack.imgur.com/4JIXc.png )

These cards ⬆️ are not aligned horizontally as you see I want them aligned horizontally I tried many CSS & HTML codes but none worked.

This is one line of code I tried:

CSS: float:left;clear:none;

Answer 1

you can use a css property called display: flex; i that the default flex direction is row is already enabled. so you can use this property for your cards main root element.

Answer 2

You can use:-

display: flex;
justify-content: center;

on parent element, to horizontally centered the item. There are other values also for justify-content which you can use to align as you want.

In bootstrap, you can simply use classes:-

d-flex justify-content-center

on parent element, to horizontally centered the item. Similarly there are other classes also. You can see bootstrap docs.