Bootstrapping with card and for loop - html

Question

I'm trying to implement card bootstrapping in my .html but I cannot get it to be centered. Please see the code below and help
<h1> 10 Games Recommended Based on {{ selected }} </h1>
<div class = "container">
<div class="recommendations">
{% for name in names_list %}
<div class="card-group">
<div class="card text-center" style="Max-width: 30%;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title"> {{ name }}</h5>
<div class = 'card-body'>
<p1 class = "card-text">Overall Reviews: {{games[name]['rating'] }}</p1>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I apologize for the mess but the way my app is giving results is pushed to the left like this.
My style is below
<style>
p {font-size: 30px;}
p1 {font-size: 13px;}
a {color:navy;
font-size: 20px;}
body {text-align: center;}
body {background-color: lightblue;}
</style>
Is there anyway I can center these or align them side by side when using loop?

Answer 1

You're missing .row and .col classes. Add them to make it.
<h1>10 Games Recommended Based on {{ selected }}</h1>
<div class="container">
<div class="row">
<div class="recommendations">
{% for name in names_list %}
<div class="col-3">
<div class="card-group">
<div class="card text-center" style="max-width: 30%">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title">
{{ name }}
</h5>
<div class="card-body">
<p1 class="card-text"
>Overall Reviews: {{games[name]['rating'] }}</p1
>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Just note that .col-3 is supposed to be repeated and .row should be parent.