Reducing space betwen header and main in bootstrap, and section and continer in bootstrap 5 cards

Question

I want to reduce space between header and main in bootstrap 5 cards class shown by black line A

And line B which is between section container (or tag) and class album.

I am using cards class in bootstrap 5.

Thanks in advance.

Answer 1

As shown in the picture, it has a padding around.

You can reduce the padding of section and the space between will be reduced.

We can use bootstrap spacing class with it or can user own custom class to decrease the padding.

• p-2 (padding 2 for all sides)
• pt-2 (padding 2 for top)
• pb-2 (padding 2 for bottom)

and the final html will be like

<section class="jumbotron text-center pt-2 pb-2">

or

<section class="jumbotron text-center custom-pading-class">

Hope this helps