Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

After retrieving data from a table in my database, I am displaying it on the screen as cards. However, the issue is that all the cards are displaying on the left side of the screen in a single column, rather than appearing in rows of 3 as desired.

Below is my current code:

I attempted to utilize card-deck to arrange the cards in rows of 3, but this caused the data on the cards to be repeated. How can I prevent the data from being duplicated while displaying the cards in rows of 3?

cssdjangotwitter-bootstrapbootstrap-4flexbox

Answer №1

When constructing a grid using bootstrap, it is important to adhere to the prescribed layout:

<div class="row">
    <div class="col">Item 1</div>
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
</div>

However, utilizing row-sm-3 is incorrect. The correct class to use is simply row.

Additionally, it appears that a closing </div> tag is missing in your example, but I assume this was an oversight during copying and pasting.

Answer №2

I'm not exactly sure about the purpose of .row-sm-3, but you can achieve the desired layout without the use of a .row.

If you use .card-deck with flex, it will function similarly to a Bootstrap .row. You can apply spacing classes like col-lg-3 and .col-md-6 directly to each .card. The example below illustrates this concept.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc9d3cbd3cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="card-deck">
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card-deck">
  <div class="col-12 col-lg-3 col-md-6">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">{{ class.class_name}}</h5>
        <p class="card-text">{{class.teacher_id.username }}</p>
        <a href="#" class="btn btn-primary">Go To</a>
      </div>
    </div>
  </div>
</div>

Edit:

<div class="container">
  {% for class in all_classes %}
  <div class="card-deck">
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
  </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

Is there a way to convert inline styling to CSS using Material-ui within a React component?

In my development work with React, I initially utilized inline styling to customize the appearance of material-UI components. However, I have come to realize that utilizing CSS provides a more structured and efficient approach to styling components. Despit ...

cssreactjsmaterial-ui

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?

Query Is it feasible to style a specific portion of a single character? Interpretation You cannot apply CSS attributes to parts of characters. However, if you wish to style only a particular section of a character, there is currently no standardized met ...

htmlcssoverlay

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

After attempting to allocate each widthPercent value on the TableHeader so they sum up to 100%, I am still experiencing the presence of a scroll bar. I have tried setting fixed widths for each column, but this results in excess space on the right side dep ...

javascripthtmlcssreactjsmaterial-ui

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

htmlcss

Continue to alter elements by stacking them on top of each other

Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...

jqueryjquery-uicssz-indextransform

Unable to persist data while submitting a form on Django framework

I am currently working on a Django tutorial to create a small website where users can add pages and categories. I have defined a Page model as shown below: class Page(models.Model): category = models.ForeignKey(Category, on_delete=models.CASCADE) ...

pythondjangodatabasehttprequest

Reducing the amount of nesting within selectors

Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...

cssless

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

cssangular

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

Choose the CSS class based on the content provided

Help needed with CSS issue. I want to target the <tr> element's class using Bootstrap classes like .success or .danger. In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to ...

javascriptcsstwitter-bootstrapsassvue.js

Adjust element based on the position of another element (sticky)

Is it possible to rotate a text block so that it remains anchored to the bottom of a red rectangle, even when the rectangle is rotated? Similar to how it works in Figma, but simpler. For example, if I rotate the rectangle by 180 degrees, the text should be ...

csssvg.js

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

javascriptjqueryhtmlcss

The file I'm trying to locate within my application folder is not being found by Django

I have been facing an issue in my Django application where I am trying to read a JSON file stored in a folder called test_data/data.json. Inside my tests.py, I wrote the following code to access this file: with open('/test_data/data.json', &apo ...

pythondjango

Issue with Bootstrap's pull-right class causing elements to overlap

I need help positioning a single button above a list, with the button to the right. Whenever I try using the pull-right class on the button (or its containing div), the button ends up being covered by the list. <div> <div class="pull-right"& ...

htmlcsstwitter-bootstrap

How can I schedule a recurring task in celery once a task is completed?

In my current django project, I have set up a celery beat schedule to run a task periodically on a timer. The task involves making about 250 requests to a URL that returns JSON data. Due to request limitations, the entire task can take anywhere from 5 to 1 ...

pythondjangotaskcelery

Equal column width in Bootstrap 4 grids

I've been using Bootstrap for a while now, but I've hit a roadblock. After installing Bootstrap 4 via npm, I noticed that both col-xs-1 and col-xs-12 have the same width of 100% I checked the library files I installed and found that all element ...

bootstrap-4

Following the submission of a message, the textarea automatically inserts a line-break

Can someone please help me troubleshoot an issue with my chat app? Every time I try to send a message, the textarea adds a line break instead of just focusing on the textarea so I can send a new message smoothly. I have recorded a video demonstrating the ...

javascripthtmlcss

Allowance for text overflow on subsequent line

Below is the snippet of HTML code I am working with: <h4 class="clickbelow">This is a very long line that overflows onto a new line when the width is small.</h4> Here is the CSS that I have implemented: .clickbelow:before { content: url( ...

htmlcss

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately. In other words, what adjustments should I make to change the color in the next section and not ...

javascriptjquerycssscrollnavbar

Loading an empty CSS file in Node.js

Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server ...

javascripthtmlcssnode.js