Boostrap 4 container, row, col with horizontal scrolling

Question

Is there a way for Bootstrap 4 to create a table like structure with 'container', 'row' and 'col' with a container that expands beyond the width of the page resulting in a horizontal scrolling area.

In the examples I have now the columns of the row are always wrapped to the next row when the area runs out of space which is not desirable for displaying tables.

what speaks against using [actual tables](https://getbootstrap.com/docs/4.3/content/tables/) — cloned, Jul 23 '19 at 08:48
Nothing but it causes the whole page to scroll. The header and footer of the page are responsive so they scroll out of view too. — Paul Sinnema, Jul 23 '19 at 08:58

score 2 · Accepted Answer · edited Jul 23 '19 at 09:14

2

Probably what you're looking for is to stop the columns from wrapping, there was a similar question here

Basically use a row with the class .flex-nowrap

I do agree with @cloned from the comment - to show data in a table format there is absolutely nothing wrong with using a table tag, bootstrap also helps you out with those: table documentation from bootstrap

edited Jul 23 '19 at 09:14

cloned

6,346
4
26
38

answered Jul 23 '19 at 08:52

hyp

46
5

Yeah, almost. Now I get a table that expands outside the browsers view and the browser shows a horizontal (and vertical) slider. What I would like is a slider for just the table not the whole page – Paul Sinnema Jul 23 '19 at 08:55
I think .table-responsive does what I need – Paul Sinnema Jul 23 '19 at 09:04
1

Yep, you need both to get what I want .table-responsive on the outer div and .flex-nowrap on the .row div. – Paul Sinnema Jul 23 '19 at 09:07

score 2 · Answer 2 · answered Jul 23 '19 at 09:08

Here's the example that works for me just fine. Very cool stuff.

@{
    ViewBag.Title = "Home Page";
}

<div>
    <h1>Content</h1>
    <p>Dit is de content van de site</p>
    <div>
        <div class="table-responsive text-nowrap" >
            @for (int i = 0; i < 20; i++)
            {
                <div class="row flex-nowrap">
                    @for (int index = 0; index < 12; index++)
                    {
                        <div class="col">Column @index</div>
                    }
                </div>
            }
        </div>
    </div>
</div>

Boostrap 4 container, row, col with horizontal scrolling

2 Answers2