How can I get the cards to appear next to each other in a row to fill up the grid before starting a-CodePudding

I am getting data from a table in my database and rendering it onto the screen as cards. However, the cards are all appearing on the left side of the screen in one long column ( https://i.stack.imgur.com/IPQJa.png) instead of in 3s in a row as I would like them to appear.

My current code is here:

<div >
        <!--loop through all the objects in the class Class i.e.loop through all the records in the table Class-->
        <center><p >MY ASSIGNMENTS</p></center>
        <center><button type="button" >Join New Class</button></center>
        {% for class in all_classes %}      
                <div >
                    <div >
                        <div >
                            <div >
                                <!--render the class_name onto the screen-->
                                <h5 >{{ class.class_name}}</h5>
                                <!--render the teacher_name onto the screen-->
                                <p >{{class.teacher_id.username }}</p>
                                <a href="#" >Go To</a>
                            </div>
                        </div>
                    </div>
                </div>
        {% endfor %}
 </div>

I've tried using card-deck which made it so that the cards were 3 in a row, but the cards were repeated (i.e. the data they held was repeated). I would like the data to not repeat, how can I achieve this?

CodePudding user response：

When creating a grid in bootstrap you need to follow the structure:

<div >
    <div >Item 1</div>
    <div >Item 2</div>
    <div >Item 3</div>
</div>

However, you use row-sm-3, which does not work. You need to change it to just row.

Also, you are missing a </div> closing tag in your example, but I guess that was a copy-paste mistake.

CodePudding user response：

Change row-sm-3 (it doesn't exist in Bootstrap) to row.

<div >
  {% for class in all_classes %}
  <br>
  <div >
    <div >
      <div >
        <div >
          <div >
            <h5 >{{ class.class_name}}</h5>
            <p >{{class.teacher_id.username }}</p>
            <a href="#" >Go To</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

CodePudding user response：

I'm not sure what .row-sm-3 does but you don't even need a .row.

.card-deck has flex and will act similarly to a Bootstrap .row. Your spacing (e.g., col-lg-3, .col-md-6) should be used on each .card. See the snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <div >
          <h5 >{{ class.class_name}}</h5>
          <p >{{class.teacher_id.username }}</p>
          <a href="#" >Go To</a>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >{{ class.class_name}}</h5>
          <p >{{class.teacher_id.username }}</p>
          <a href="#" >Go To</a>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >{{ class.class_name}}</h5>
          <p >{{class.teacher_id.username }}</p>
          <a href="#" >Go To</a>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >{{ class.class_name}}</h5>
          <p >{{class.teacher_id.username }}</p>
          <a href="#" >Go To</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <div >
        <h5 >{{ class.class_name}}</h5>
        <p >{{class.teacher_id.username }}</p>
        <a href="#" >Go To</a>
      </div>
    </div>
  </div>
</div>

Edit:

<div >
  {% for class in all_classes %}
  <div >
    <div >
      <div >
        <div >
          <h5 >{{ class.class_name}}</h5>
          <p >{{class.teacher_id.username }}</p>
          <a href="#" >Go To</a>
        </div>
      </div>
    </div>
  </div>
</div>