Design System

Grid System

Containers, rows, columns, and breakpoints.

Containers

The grid system must be wrapped in one of two available containers.

Fixed-Width

.container is a responsive fixed-width container that we have customized to have a maximum width of 1400px.

<div class="container">
    ...
</div>

This is the primary type of container used on the library website.

Full-Width

.container-fluid is a full-width container that spans the entire width of the browser window.

<div class="container-fluid">
    ...
</div>

This type of container is only used on one part of the library website — the full-width image on the homepage.

Rows

Rows are used to create horizontal groups of columns.

.row must be nested under either .container or container-fluid.

<div class="container">
    <div class="row">
        ...
    </div>
</div>

Columns

The grid system supports up to 12 columns in a row. Columns are created by specifying the number of columns you wish to span.

.col-*-* must be nested under .row.

<div class="container">
    <div class="row">
        <div class="col-*-3">
            ...
        </div>
        <div class="col-*-9">
            ...
        </div>
    </div>
</div>

In this example, a side column and main content column use .col-*-3 and .col-*-9, respectively. Website content would then be nested under each .col-*-*.

The middle asterisk * is a placeholder for predefined responsive classes called breakpoints.

Breakpoints

Breakpoints allow for responsive layouts. They indicate how columns will rearrange depending on screen size.

• xs (for phones — screens less than 768px wide)
• sm (for tablets — screens equal to or greater than 768px wide)
• md (for small laptops — screens equal to or greater than 992px wide)
• lg (for laptops and desktops — screens equal to or greater than 1200px wide)

<div class="container">
    <div class="row">
        <div class="col-md-3">
            ...
        </div>
        <div class="col-md-9">
            ...
        </div>
    </div>
</div>

In this example, both the side column .col-md-3 and main column .col-md-9 will stack vertically on xs and sm screens and will sit horizontally on md and lg screens.

Adjust the width of your browser screen to see how .col-md-3 and .col-md-9 stack and unstack in the visual representation below.