Creating GRID structure using bootstrap and Django

In this article we will write a code to display list of items as below

Here is the code for this.

{% extends "components/base.html" %}

{% block content %}
<div class="container-fluid">
{% if context %}
    <div class="row">
      {% for product  in context %}
          <div class="col rounded border border-light mt-3 ml-3 shadow">
              <img src={{product.productBaseInfoV1.imageUrls.400x400}} class="mt-3 mb-3" style="max-width: 200px;max-height: 200px;width: auto;height: auto;margin: auto;">
                <p class="card-text">{{product.productBaseInfoV1.title}}</p>
                <a href="{% url 'ecomm:details' product.productBaseInfoV1.productId %}" >Go to Details page</a>
          </div>
          {% if forloop.counter|divisibleby:4 %}
            </div>
            <div class="row">
          {% endif %}
      {% endfor %}
  </div
{% else %}
    <p>No tasks are available.</p>
{% endif %} 
</div>
{% endblock %}

This code is written for django but bootstrap and html part can be used for any other framework without any challenge.

You can remove following part without any impact.

          
{% if forloop.counter|divisibleby:4 %}
            </div>
            <div class="row">
          {% endif %}
{% endfor %}

My requirement was to have 4 item in a row and hence I had kept it but its not necessary and code will work flawlessly.

How to add Bootstrap to WordPress Themes

I created child theme using tweentyseventeen, you can follow the steps here. Once I created child theme, I found that I need to create some layouts and to create it, I would have have to write some CSS from scratch.

But when you have amazing tools like bootstrap, why do we need to write css from scratch.

But how to add bootstrap to WordPress theme ?

You can simple add css and js files in head and footer files but that’s not the proper way. You can add bootstrap to your theme by adding following code to functions.php file of your child theme

function my_scripts_enqueue() {

wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'), NULL, true );
wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );

wp_enqueue_script( 'popper-js' );
wp_enqueue_script( 'bootstrap-js' );

wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Once done you can see bootstrap in your webpage’s source code. You can start using bootstrap class in your template files.