Creating nested columns in a bootstrap grid system can enhance the structure and organization of your

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 %}

https://i.sstatic.net/NHBv8.jpg

Answer №1

> It is recommended to place the row and container outside the loop

    <div class="container">
            <div class="row">

 {% for house in home %}
                <div class="col-sm-6 col-md-3 med_trend bg-light shadow m-4 rounded">
                    <h3 class="text-center text-info">{{ house.title }}</h3>
                    <li><i class="fas fa-check text-info mr-2"></i>{{ house.first_point }}</li>
                    <li><i class="fas fa-check text-info mr-2"></i>{{ house.second_point }}</li>
                    <li><i class="fas fa-check text-info mr-2"></i>{{ house.third_point }}</li>
                    <li><i class="fas fa-check text-info mr-2"></i>{{ house.fourth_point }}</li>
              
        </div>
        {% endfor %}
  </div> 
            </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

Please refrain from altering the color of my flag on hover

I am working with a table that has rows marked with flags. Below is the CSS I have used: <table class="hovered no-border" data-url="@Url.Action("General", "Transport")"> <tbody> <tr> <td><input type="che ...

The AJAX request to the URL is failing

Creating a webpage with the ability to control an IP camera's movements such as moving up and down or zooming in and out involves calling specific URLs. While trying to implement this feature asynchronously, I encountered issues using AJAX which did n ...

Convert the button element to an image

Can someone please explain how to dynamically change a button element into an image using javascript when it is clicked? For instance, changing a "Submit" button into an image of a check mark. ...

Creating interactive buttons within a card in Ionic 2

I created a card in Ionic 2 with the following structure. Upon clicking the card, it navigates to another page. <ion-content padding class="item item-text-wrap"> <ion-list> <ion-item *ngFor='let topic of topicList' text-wr ...

Set up a trigger to activate when a WordPress User Role is selected, or alternatively, execute JavaScript

Looking for a solution to detect when a new user is created with a custom User Role set to lessee. Options include adding a trigger through WordPress filters or actions, or detecting the change in JavaScript using an event listener. I have identified the ...

Issue with CSS causing elements to display improperly within nested grids

I am facing an issue where I want to nest a grid within another grid, but the elements in the nested grid are not appearing in the order I desire. Specifically, I would like the "#classes" section to be at the bottom of the nested grid, but it remains stuc ...

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

I need to select multiple checkboxes from different sections, count them, and then append the same number of sections to another div. ...

Is there a way to add specific class and attribute to each label in crispy-forms separately?

I am exploring crispy-forms for the first time and I am eager to assign unique css_class for each label based on their length. Additionally, I want to apply specific CSS properties for both the labels and their corresponding fields. Despite trying various ...

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

Unable to import the name 'classproperty': ImportError

I'm facing an issue with this error........ The error is coming from the line: django.utils.decorators import classproperty Error message: ImportError: cannot import name 'classproperty' What could be causing this error to appear? How can ...

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

Tips for arranging menu items along a curved counter

One of my clients has requested a unique design feature—a curved menu. The menu items are currently represented by red squares, but they should be positioned to follow the curve of the pink squares on the blue bar. How can I achieve this effect? Should ...

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

Unfortunately, I am currently unable to showcase the specifics of the items on my website

I am trying to create a functionality where clicking on a product enlarges the image and shows the details of the product as well. While I have successfully implemented the image enlargement, I am facing challenges in displaying the product details. Below ...

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...