Rows & Columns

Haze uses a series of rows, and columns to layout and align content. The grid system is built with flexbox and is fully responsive. Below is an example with a two equal-width columns across all devices and viewport widths, using the row and col classes.

        <div class="container text-center">
            <div class="row">
                <div class="col">Column</div>
                <div class="col">Column</div>
            </div>
        </div>
    
    

Columns in Haze can be declared three ways: with a specific percentage defined (expressed as a number, x of 12) where the columns will be of the specified width, with no specific percentage (auto), where all columns will be an equal width or automatic, where the column spans the width necessary to accomodate its content.

To scale the columns automatically, just use class .col any number of times within a .row and Haze will take care of the rest, as shown below:

    <div class="container text-center">
        <div class="row">
            <div class="col">1 of 2</div>
            <div class="col">2 of 2</div>
        </div>
        <div class="row">
            <div class="col">1 of 3</div>
            <div class="col">2 of 3</div>
            <div class="col">3 of 3</div>
        </div>
    </div>

To declare a column's width, you need to use class .col-x, where x represents the percentage of space the column should occupy, ranging from 1 to 12.

    <div class="container text-center">
        <div class="row">
            <div class="col-6">1 of 2 (6 of 12)</div>
            <div class="col-6">2 of 2 (6 of 12)</div>
        </div>
        <div class="row">
            <div class="col-4">1 of 3 (4 of 12)</div>
            <div class="col-8">2 of 3 (8 of 12)</div>
        </div>
    </div>

For instance, in the above example there are two columns on the first row, equally defined as halves (.col-6 of 12). Similarly, the second row is equally divided in three, and the first column takes one third (.col-4 of 12) whilst the second one takes two thirds (.col-8 of 12). Note that the .col-6 declaration in this example resulted in the same outcome as .col in the previous example.

Both types of columns described above can be used together within a singular row. For instance, you can define the width of a column and have the other columns on the same row resize around it. Note that the undefined-width columns will always resize to fill the row.

    <div class="container text-center">
        <div class="row">
            <div class="col">1 of 3</div>
            <div class="col-6">2 of 3</div>
            <div class="col">3 of 3</div>
        </div>
    </div>

In order to declare a column whose width is dependent on its content length, use .col-auto or .col-{breakpoint}-auto. For instance, in the below example there are three columns on the first row, one of which scales based on the content, and two additional columns, each taking 1/6 of the row. Similarly, on the second row, one column scales based on the content while the orther two take up the rest of the row equally.

    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-2">Column</div>
            <div class="col-12 col-lg-auto">
                This column has content
            </div>
            <div class="col-12 col-lg-2">Column</div>
        </div>
        <div class="row justify-content-center">
            <div class="col">Column</div>
            <div class="col-12 col-lg-auto">
                This column has a little more content
            </div>
            <div class="col">Column</div>
        </div>
    </div>

There are six tiers of predefined classes for building complex responsive layouts. These can be used to adapt the number of rows and columns you have depending on the viewport width or device screen size. To better illustrate how such a declaration is intended to be used, consider the following example:

    <div class="container text-center">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                Column
            </div>
            <div class="col-md-6 col-sm-12">
                Column
            </div>
        </div>
    </div>

In the given example, there is a row containing two columns. Both columns have the same .col-md-6 .col-sm-12 defined. That means that:

• On medium screens and above (col-md-6), each column will occupy 6 out of 12 units, filling the space of a complete row and appearing alongside each other
• On small screens (col-sm-12), each column will occupy all 12 out of 12 units. As a result, the columns will stack vertically, resembling two distinct rows

It's not necessary to have columns of equal width in order to achieve a seamless appearence. Optimal results can be attained with various combinations of widths, provided they are appropriately defined for all screen sizes.

<div class="container text-center">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">
            Column
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
            Column
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
            Column
        </div>
    </div>
</div>

In the given example, there is a row containing three columns.The first two columns share the same class, namely .col-lg-4 .col-md-6 .col-sm-12 defined, whereas the third column diverges by incorporating the .col-md-12 class instead of .col-md-6.

• On large screens and above (col-lg-4), each column will occupy 4 out of 12 units, filling the space of a complete row and appearing alongside each other
• On medium screens (col-md-6 and col-md-12 respectively), the first and second columns will each take up 6 out of 12 units, creating a complete row. Meanwhile, the third column will occupy all 12 units, constituting another row below
• On small screens (col-sm-12), each column will occupy all 12 out of 12 units. As a result, the columns will stack vertically, resembling two distinct rows

There are alternate ways of splitting content over an odd number of coplumns and avoiding unpleasant-looking alignments. Some notable examples are the justify-content-center and offset-{breakpoint}-*.

More information on content justification will be provided in the Utilities/ Flex, while details on column offsetting will be covered in the Layout/ Offsets section.

This functionality has been marked as deprecated starting from Haze 1.0.1 and is slated for removal in Haze 1.1.0 due to its infrequent usage. Any functionalities relying on the adjacent classes .row-cols-* can be substituted by explicitly defining the width for each column.

Use the .row-cols-* classes to set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns, the row columns classes are set on the parent .row as a shortcut.

    <div class="container text-center">
        <div class="row row-cols-2">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>

    <div class="container text-center">
        <div class="row row-cols-3>
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>