Avant UI Kit

Documentation

Grid

Avant UI uses Bootstrap's grid system. Bootstrap's grid system is responsive and uses containers, rows and columns to organize content. The grid is built with Flexbox making everything much easier.

Equal-width

You can define a grid with several columns of equal size. See the examples:

1
2
3
1
2
3
4
5
<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3 
<div class="container">
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col-6">
            2 of 3 (wider)
        </div>
        <div class="col">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col-5">
            2 of 3 (wider)
        </div>
        <div class="col">
            3 of 3
        </div>
    </div>
</div>

Grid options

Bootstrap's grid system can adapt to different screen sizes. See available breakpoints:

Extra small >576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

See below some examples of Bootstrap's grid using breakpoints. The columns will be stacked up to the screen size shown in the previous table. After this the columns are aligned horizontally.

1
2
1
2
3
4
<div class="container">
    <div class="row">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>

You can also mix auto-adjust columns and breakpoint-based columns:

1
2
3
4
<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-1">4</div>
    </div>
</div>

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3 
<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
            1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
            3 of 3
        </div>
    </div>
</div>

Offsetting columns

Move columns to the right using .offset-{breakpoint}-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
    </div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-{breakpoint}-* columns within an existing .col-{breakpoint}-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6 
<div class="container">
    <div class="row">
        <div class="col-sm-9">
                Level 1: .col-sm-9
            <div class="row">
                <div class="col-8 col-sm-6">
                    Level 2: .col-8 .col-sm-6
                </div>
                <div class="col-4 col-sm-6">
                    Level 2: .col-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>
</div>

More information about Bootstrap's grid system can be found in official documentation.