Display more content in a horizontal card along with a scroll bar if it extend the screen size

Question

I would like to display a horizontal card that has more columns in it. If it exceeds the col-12 size the rest of the content also needs to be displayed within the card with a scrollbar enabled.

My HTML Code:

<div class="container-fluid">
  <div class="card">
    <div class="card-body">
      <div class="row flex-nowrap">
        <div class="col-2">
                Name
        </div>
         <div class="col-2">
               Id
        </div>
         <div class="col-2">
               Dept
        </div>
         <div class="col-2">
               Section
        </div>
         <div class="col-2">
               Class
        </div>
         <div class="col-2">
                Roll No
        </div>
         <div class="col-2">
                Subjects
        </div>
         <div class="col-2">
               Mark
        </div>
         <div class="col-2">
                Total
        </div>
         <div class="col-2">
                Grade
        </div>
      </div>
    </div>
  </div>
</div>

In my code, all the contents are getting displayed horizontally but content > col-12 not displaying inside the card. I want to achieve that all the content needs to be displayed inside the card and if it exceeds the screen size the remaining content inside the card needs to be displayed along with a scroll bar horizontally.

I would like to want the scroll bar for the screen instead of for each card. Can I know how to achieve it — R SUBASH, Mar 08 '21 at 04:30

s.kuznetsov · Answer 1 · 2021-03-05T14:05:40.350

Add overflow-auto class to <div class="card">. Like that:

<div class="card overflow-auto">

Snippet:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="card overflow-auto">
    <div class="card-body">
      <div class="row flex-nowrap">
        <div class="col-2">
                Name
        </div>
         <div class="col-2">
               Id
        </div>
         <div class="col-2">
               Dept
        </div>
         <div class="col-2">
               Section
        </div>
         <div class="col-2">
               Class
        </div>
         <div class="col-2">
                Roll No
        </div>
         <div class="col-2">
                Subjects
        </div>
         <div class="col-2">
               Mark
        </div>
         <div class="col-2">
                Total
        </div>
         <div class="col-2">
                Grade
        </div>
      </div>
    </div>
  </div>
</div>

If I have multiple horizontal cards like this I want a scroll bar at the end of all cards. In that same way, I can do it. — R SUBASH, Mar 05 '21 at 13:59

Display more content in a horizontal card along with a scroll bar if it extend the screen size

1 Answers1