Search code examples
htmlcssbootstrap-4grid-layout

Nested grids with two tables

Imagine the following bootstrap grid layout. The main grid of 8:4. 

<div class="container">
    <div class="row">
        <div class="col-md-8">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

The content data can be adjusted by the user. He/She can put the content either in the larger column or in the smaller one.

For instance two tables.

<div class="row">
    <div>
        <table>
        </table>
    </div>
    <div>
        <table>
        </table>
    </div>
</div>

If the two tables will be placed in the larger column they should be side by side until a certain breakpoint is met, after which they should be one above the other.

If the two tables will be placed in the smaller column they should be always one above the other as the column is too small to display the tables side by side.

How could this be achieved? Is it possible with just CSS?

Further, if the layout gets too small, the two columns should be placed one above the other. This is reached by the "col-md-" classes. But if the user places to tables in the smaller column and the "md" breakpoint is reached the space will be large enough to display the tables side by side. Is this possible or will I have to live with some minor discrepancies?

Solution

  • Yes, this nesting is easily possible using native Bootstrap 4 classes alone.

    You simply put row-column pairs into a column of your choice like so: 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-8 mb-3">
            <p>wide column</p>
            <div class="row">
                <div class="col-md-6">table 1 goes here</div>
                <div class="col-md-6">table 2 goes here</div>
            </div>
        </div>
        <div class="col-md-4">
            <p>narrow column</p>
            <div class="row">
                <div class="col-sm-6 col-md-12 col-lg-6">table 3 goes here</div>
                <div class="col-sm-6 col-md-12 col-lg-6">table 4 goes here</div>
            </div>
        </div>
    </div>
</div>

    That code will produce the exact behavior you described. On screens smaller than md they will all stack up on top of each other. Otherwise, both tables will be next to each other taking up 50% of space (6 units out of 12) in their corresponding parent column.

    And if you determine that at the sm breakpoint, for example, there's still enough space for 2 tables side by side, then you could change the classes for the inner columns to something like col-sm-6. Then they'd sit side by side at that breakpoint.

    Just remember that when nesting (or even in general) you always have row-column pairs i.e. a row always needs at least one column inside. Otherwise, you'd get in trouble with the layout.