Grid layouts

ANU websites are designed based on the Grid system of Bootstrap version 5. The viewport is 1200px wide, and we are using the grid system to divide the webpage into 12 columns with equal widths.

If you are familiar with our Grid layouts or have experience with Bootstrap Grid layouts. You can use the image here as a quick reference, it demonstrates some common combinations of column items.

Each row in the diagram represents a particular layout structure. For example, the 3rd row represents a 2-column layout. When the viewport is wider than the sm breakpoint, the left column will take up 8/12 (which is 2/3) of the viewport while the right one takes up the rest 4/12 (which is 1/3) of the viewport.

Read below for an in-depth explanation of how the grid system works.

Grid layouts cheatsheet

Overview

This layout is fully responsive, we can control the webpage layout by using the following classes. The classes are named using the format col-{breakpoint*}-{column width}, such as .col-md-6 or .col-12. *Breakpoint is an optional field.

Breakpoints are also known as responsive breakpoints. Breakpoints are based on different screen sizes, such as mobiles, laptops, etc. Applying breakpoints will let the web content adapt to a certain layout design in order to provide a better user experience.

Where breakpoint is one of:

BreakpointDescriptionDimension
xsExtra small<576px
smSmall≥576px
mdMedium≥768px
lgLarge≥992px
xlExtra large≥1200px
xxlExtra extra large≥1400px

Column width can be any number from 1 to 12, which stands for the number of columns that the div spans.

You don't need to define all grid layout styles for each breakpoint that we included in the table. In our practice, the 3 most common breakpoints are sm, md, lg, and the most common column widths are: 3, 4, 6, 8, 9, 12.

Gutter

Our grid system has default gutter between each column. In case you want to increase or decrease the gutter size, you can use the following classes to achieve.

g-{size}

Where size can be one of:

  • 0: set the gutter size to 0rem
  • 1: set the gutter size to 0.25rem
  • 2: set the gutter size to 0.5rem
  • 3: set the gutter size to 1rem
  • 4: set the gutter size to 1.5rem
  • 5: set the gutter size to 3rem

See below as an example:


                            <div class="container">
                                <div class="row py-3">
                                    <div class="col-6"><div class="p-3">col-6</div></div>
                                    <div class="col-6"><div class="p-3">col-6</div></div>
                                </div>
                                <div class="row py-3 g-0">
                                    <div class="col-6"><div class="p-3">col-6</div></div>
                                    <div class="col-6"><div class="p-3">col-6</div></div>
                                </div>
                            </div>
col-6
col-6
col-6
col-6

In this example, we can see there was a default gutter between columns. It indicates the default gutter is not zero. If you want to make two columns adjacent to each other, you may want to add g-0 as a class.

Walkthrough examples

Below are a few examples to help you understand the grid class better:

Example 1: <div class="col-sm-12 col-md-6 col-lg-4">
  • Screen size ≥ 992px: the container will take 4 out of 12 columns
  • 992px > Screen size ≥ 768px: the container will take 6 out of 12 columns
  • 768px > Screen size: the container will take 12 out of 12 columns
Example 2: <div class="col-12 col-lg-6">
  • Screen size ≥ 992px: the container will take 6 out of 12 columns
  • 992px > Screen size: the container will take 12 out of 12 columns
Example 3: <div class="col-12 col-md-6 col-xl-4">
  • Screen size ≥ 1200px: the container will take 4 out of 12 columns
  • 1200px > Screen size ≥ 768px: the container will take 6 out of 12 columns
  • 768px > Screen size: the container will take 12 out of 12 columns

Please refer to the Use cases tab to understand the application of these classes and the overall code structure better.

Use cases

Here we will give a few commonly used layout structures and its corresponding code structure. This will help you to understand how to use the cheatsheet above to layout your page content better.

Content in full width

Use the basic structure container - row - col and put all your content inside of the col container, and it will take 100% width of this parent container (it's row in this case).


                    <div class="container">
                        <div class="row">
                            <div class="col bg-tint">
                                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
                            </div>
                        </div>
                    </div>

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.

2/3 and 1/3 layout (responsive)

As mentioned in previous sections, the viewport is divided into 12 equal-width columns. So, when we want an element to take two-thirds of the screen, we can do some simple calculation: 12 columns * 2/3 = 8 which means the element will take 8 columns. And the container on the right will take 4 columns.

Also, we need to consider the responsive layout. On smaller screen sizes, if we keep this 2/3 and 1/3 structure, it will make our webpage less accessible. In case of lengthy text contents, it's recommended to make it full width on sm screen sizes.


                    <div class="container">
                        <div class="row equal">
                            <div class="col-sm-12 col-md-8 bg-tint">
                                <p>When your screen size is smaller than 768px, this 2/3 container will be transformed to a full width column.</p>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="box-header-tint large">Box header</div>
                                <div class="box-bdr-gold">When your screen size is smaller than 768px, this 1/3 container will be transformed to a full width column.
                                </div>
                            </div>
                        </div>
                    </div>

When your screen size is smaller than 768px, this 2/3 container will be transformed to a full-width column.

Box header
When your screen size is smaller than 768px, this 1/3 container will be transformed to a full width column.

3 equal-width columns (responsive)

Like the example above, we are also applying the responsive classes here. As we want each column to take up 1/3 of the viewport on large screen size devices, and expand to the full width of the viewport when the screen size is smaller than 576 pixels.


                            <div class="container">
                                <div class="row">
                                    <div class="col-sm-4 bg-tint">
                                        <h4>col-sm-4</h4>
                                        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                                            Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
                                    </div>
                                    <div class="col-sm-4 bg-tint">
                                        <h4>col-sm-4</h4>
                                        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                                            Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
                                    </div>
                                    <div class="col-sm-4 bg-tint">
                                        <h4>col-sm-4</h4>
                                        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                                            Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
                                    </div> 
                                </div>
                            </div>

col-sm-4

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.

col-sm-4

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.

col-sm-4

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.

Style usage

1. Grid with text overlay

Noel Butlin Archives Centre

The Noel Butlin Archives Centre (NBAC) collects business and labour records from Australian companies, trade unions, industry bodies and professional organisations. We are a national organisation with material from all states and territories. The NBAC holds ...

Read more

Noel Butlin Archives Centre

The Noel Butlin Archives Centre (NBAC) collects business and labour records from Australian companies, trade unions, industry bodies and professional organisations. We are a national organisation with material from all states and territories. The NBAC holds ..

Read more

2. Event grid with date overlay

15
Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

15
Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

15
Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3. News grid with view more button

View now