Column Grid

columns can have different width, only in one row, inside parent ".row" div (which cannot be the same as ".container"), ".col-X-" class prefix (where "X-" is optional and stands for screen size - xs, s, m, l or xl)

Six grid tiers

Global

.col-4
.col-4
.col-4

XS (for screens larger than 480px)

.col-xs-4
.col-xs-4
.col-xs-4

S (for screens larger than 600px)

.col-s-4
.col-s-4
.col-s-4

M (for screens larger than 768px)

.col-m-4
.col-m-4
.col-m-4

L (for screens larger than 1024px)

.col-l-4
.col-l-4
.col-l-4

XL (for screens larger than 1200px)

.col-xl-4
.col-xl-4
.col-xl-4

Examples

12 equal columns

col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1

12 equal columns with no gutter

col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1
col-m-1

3 unequal columns

col-m-2
col-m-4
col-m-6

3 unequal columns with no gutter

col-m-2
col-m-4
col-m-6

2 columns with 2 nested columns

col-m-9
col-m-6
col-m-6
col-m-3

2 unequal columns with different layout for different screen sizes

.col-xs-2
.col-m-5
.col-xl-8
.col-xs-10
.col-m-7
.col-xl-4

Gallery Grid

All equal width, multiple rows, ".gallery-grid-" class prefix

Responsive columns

Number of columns in a row per screen size
class name 0 - 480px 481px - 600px 601px - 768px 769px - 1024px 1025px - 1200px 1201px - >
.gallery-grid-2 1 1 1 2 2 2
.gallery-grid-3 1 1 1 3 3 3
.gallery-grid-4 1 1 2 4 4 4
.gallery-grid-5 1 2 2 5 5 5
.gallery-grid-6 2 3 3 6 6 6
.gallery-grid-7 2 4 4 7 7 7
.gallery-grid-8 2 4 4 8 8 8
.gallery-grid-9 2 5 5 5 9 9
.gallery-grid-10 2 5 5 5 10 10
.gallery-grid-11 4 4 6 6 11 11
.gallery-grid-12 4 4 6 6 12 12

Additional classes are available which are to be used next to the global ones

Number of columns in a row per screen size
class name 0 - 480px 481px - 600px 601px - 768px 769px - 1024px 1025px - 1200px 1201 -
.gallery-grid-s-4 4 4 4 4
.gallery-grid-s-5 5 5 5 5
.gallery-grid-s-6 6 6 6 6

Gallery grid is available with up to 12 columns

3 Column gallery grid

3 Column gallery grid with no gutter

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare leo ex, et tristique neque sagittis consectetur. Duis tincidunt metus a iaculis egestas. Aliquam mollis arcu convallis quam semper, vitae molestie ex vulputate. Mauris vel ligula et tellus pretium posuere sit amet aliquam ante. Nulla ultrices dui vel laoreet maximus. Donec vel dapibus est. Curabitur vel nisl ex. Curabitur non feugiat purus. Aliquam vitae blandit augue.

Sed vel malesuada purus, vitae blandit ipsum

Sed vel malesuada purus, vitae blandit ipsum. Morbi sodales massa sit amet bibendum euismod. Maecenas ullamcorper dolor ipsum, nec sollicitudin lacus sodales id. Maecenas vitae eleifend libero. Nulla facilisi. Mauris consequat, est at fermentum vehicula, ligula leo laoreet felis, sit amet elementum ante sem tempor metus. Phasellus molestie lorem a est molestie molestie. Fusce congue mollis dictum. Etiam aliquet sapien iaculis dui pretium, a porta lorem rutrum. Sed tincidunt condimentum orci, quis vestibulum risus pellentesque ut. Donec dignissim semper sapien et vulputate. Aenean id massa eget ex facilisis laoreet. Curabitur eget vehicula purus, et accumsan leo. Cras malesuada urna ut laoreet aliquam.

Donec placerat scelerisque nulla vitae tempor

Cras sit amet felis quis justo tincidunt hendrerit vel eu augue. Cras sit amet malesuada dui, ornare porttitor metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ac dui non augue pretium mollis. Vestibulum lacinia, mi sed dapibus molestie, felis sem ornare orci, ac tempor eros purus a ex.

  • Lorem ipsum dolor sit amet, consectetur adipiscing
  • Sed consequat, ipsum nec gravida porttitor, sapien justo fermentum libero, at convallis orci tortor eget purus. Aliquam erat volutpat
  • Mauris massa tellus

Nam at nulla sed tortor pellentesque pretium

  1. Vestibulum in justo justo
  2. Nullam ornare euismod est et molestie
  3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis dictum urna neque, vel suscipit lacus rhoncus nec

Integer maximus iaculis tincidunt. Vivamus ut tellus magna. Donec vel elit massa. Duis luctus, risus eget fermentum feugiat, libero metus iaculis nunc, vel posuere eros tellus eu enim. Aliquam venenatis tellus ut placerat placerat. Phasellus dictum imperdiet imperdiet. Nullam sodales diam vitae magna volutpat, sit amet congue mauris iaculis. Curabitur tincidunt est eget sapien iaculis, eget accumsan nibh mattis.

Forms

Success Info Warning Danger

Success Info Warning Danger

Tables

one two three
one two three
one two three
one two three

JS

Expander

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper nisl massa, at sagittis augue congue ut. Mauris fermentum fermentum augue quis pretium. Integer semper metus id consectetur tristique. Phasellus porttitor odio orci, quis aliquet neque euismod a. Nulla euismod dignissim nulla vitae feugiat.

Read More Read Less

Accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquam

    Title heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

    Title heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    1. Lorem ipsum dolor
    2. Vestibulum quis molestie metus
    3. Consectetur adipiscing

    Title heading 3

    • Lorem ipsum dolor
    • Vestibulum quis molestie metus
    • Consectetur adipiscing

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

  • Consectetur adipiscing elit

    Title heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

    Title heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    1. Lorem ipsum dolor
    2. Vestibulum quis molestie metus
    3. Consectetur adipiscing

    Title heading 3

    • Lorem ipsum dolor
    • Vestibulum quis molestie metus
    • Consectetur adipiscing

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

  • Dolor sit amet, consectetur

    Title heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

    Title heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit consectetur ipsum.

    1. Lorem ipsum dolor
    2. Vestibulum quis molestie metus
    3. Consectetur adipiscing

    Title heading 3

    • Lorem ipsum dolor
    • Vestibulum quis molestie metus
    • Consectetur adipiscing

    Consectetur adipiscing elit. Vestibulum quis molestie metus. Quisque hendrerit, Lorem ipsum dolor sit amet.

Popups

604-676-5359