How to use css classes with Booststrap and wagtail - css

Question

I am using a Bootstrap theme and in one particular location I want to place up to three cards horizontally on the page. I have the html:
<div class="container">
<h1 class="text-center">{{ self.title }}</h1>
<div class="card_deck;" style="display: table;">
{% for card in self.cards %}
<div class="card;" style="display: table-cell; padding:20px;">
A card goes here
</div>
{% endfor %}
</div>
</div>
I have two questions related to this:
How do I centre the cards on the page?
What is the best way to handle the css? I clearly don't want to mess with the Bootstrap card and card_deck elements, so is the only solution to leave the style in the div tag?

Answer 1

for
1. Center the card on the page
<div align='center' class='row'>
<div class="row">
<div class="col-sm">
then paste the cards in here
</div>
<div class="col-sm">
then paste the cards in here
</div>
<div class="col-sm">
then paste the cards in here
</div>
</div>
</div>
You can simply add new class to it, for example, assuming the div below is the place I want to add the CSS
then paste the cards in here
then go ahead and style as such
.myNewCss{
style here
}

Answer 2

If you want your cards to have bootstrap classes depending on how many cards you have you could use a class on card equal to col-12/self.cards.length. This is because bootstrap uses a 12 'sections' grid. So if you have 2 columns you have col-6. 6 is from 12/2 . Which means that if you have 3 cards you will have col-4 , if you have 4 cards you will have col-3 and so on.
I made a pure javascript example below which approximately reproduces what you want to achieve
const cards = [{
text: 'card1 text'
}, {
text: 'card2 text'
}, {
text: 'card3 text'
}]
const card = document.querySelectorAll('.card');
card.forEach((c, i) => {
c.classList.add(`col-${12/cards.length}`)
c.innerHTML = cards[i].text
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="text-center">{{ self.title }}</h1>
<div class="card_deck row">
<div class="card" style="padding:20px;">
</div>
<div class="card" style="padding:20px;">
</div>
<div class="card" style="padding:20px;">
</div>
</div>
</div>