I am currently attempting to use Bootstrap grid to create nested columns, but unfortunately, the layout I am getting is not nested as intended.
{% for home in home %}
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 med_trend bg-light shadow m-4 rounded">
<h3 class="text-center text-info">{{ home.title }}</h3>
<li><i class="fas fa-check text-info mr-2"></i>{{ home.first_point }}</li>
<li><i class="fas fa-check text-info mr-2"></i>{{ home.second_point }}</li>
<li><i class="fas fa-check text-info mr-2"></i>{{ home.third_point }}</li>
<li><i class="fas fa-check text-info mr-2"></i>{{ home.fourth_point }}</li>
</div>
</div>
</div>
{% endfor %}