Can anyone help me with getting my card bootstrapping implemented in my .html to be centered? Here is the code I'm working with:
<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%;">
<div class="card-body">
<h5 class="card-title"> <a href="{{ games[name]['url'] }}" target="_blank">{{ name }}</a></h5>
<div class="card-body">
<p class="card-text">Overall Reviews: {{games[name]['rating'] }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
It seems like my app is not aligning the results properly, as shown in this image.
Below is the CSS styling I'm using:
<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 a way to center or arrange these elements side by side when using a loop?