Html Question posted in
Some basic documentation can be found here.

Html – How to align cards in columns without activating vertical scrolling?

I have several cards within a column made with Bootstrap 5:

https://jsfiddle.net/fzxc1v69/

Currently each of the cards are aligned one below the other, but I don’t want that.

As you can see, my .section was made to only occupy the entire browser window (height: 100vh).

The problem is that the vertical scroll is activated, while I would actually like to activate the horizontal scroll so that the cards line up as follows:

enter image description here

How can I do this?

Tags:

2

Answers


  1. 0

    making the direct parent of the cards display: flex should do what you want.
    basically, the default for display: flex is flex-direction: row, which align the items in a horizontal row.

    Other than that, adding to the cards flex-grow: 0; flex-shrink: 0 makes them not shrink or expand based on the available space, so they will scroll instead of fitting inside the viewport.

    If this helped, please upvote and mark the answer 🙏

    .horizontal-container {
  display: flex;
}

.card {
  flex-shrink: 0;
  flex-grow: 0;
}
    <div class="section" style="width:100%; height:100vh; overflow:auto">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-12 col-lg-12 col-xl-12 horizontal-container">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 1....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 2....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 3....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 4....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 5....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 6....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 7....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 8....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 9....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 10....
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    One fix for this would be to separate the cards between multiple columns, something like:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="section" style="width: auto; height:100vh; overflow:auto">
  <div class="container" style="width: 1200px;">
    <div class="row" style="width: 1200px;">
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 1....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 2....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 3....
          </p>
        </div>
      </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 4....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 5....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 6....
          </p>
        </div>
      </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 7....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 8....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 9....
          </p>
        </div>
       </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 10....
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

    (Note that I have changed the width for the row to be 1200px (4x the column width) and the width for the section div to be auto)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search