the containers

with gutters or full-width

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet consequatur culpa cupiditate deleniti dignissimos dolorem ducimus earum est fuga iure, iusto laboriosam minima natus repellat repudiandae vitae voluptatem?

Consequuntur cumque cupiditate dolore hic, ipsam iusto magnam maiores maxime necessitatibus nihil praesentium reprehenderit sed sunt tempore totam veniam voluptate? Ad consequuntur dicta ducimus ea qui sunt ut! Cum, debitis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet consequatur culpa cupiditate deleniti dignissimos dolorem ducimus earum est fuga iure, iusto laboriosam minima natus repellat repudiandae vitae voluptatem?

Consequuntur cumque cupiditate dolore hic, ipsam iusto magnam maiores maxime necessitatibus nihil praesentium reprehenderit sed sunt tempore totam veniam voluptate? Ad consequuntur dicta ducimus ea qui sunt ut! Cum, debitis.

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

the flex grid

the different screen sizes
screen phone tablet desktop large desktop
prefix .s .m .l .xl
dimensions (px) from 0 to 600 from 601 to 992 from 993 to 1200 from 1201 to the sky
container width (%) 90 85 70 70

row with equal sizes

row*

all the classes marked with: (*) are suffixed. So for example, with .column class, you can use .column, .column-s, .column-m, .column-l, or .column-xl


The only exception is for the .row and .row-g classes that you can use as suffixed but are always necessary:
class="row row-s"

1) col

2) col

3) col

4) col

5) col

6) col

                    
	<div class="row">
		<div class="col">
			<h3>1) col</h3>
		</div>
		<div class="col">
			<h3>2) col</h3>
		</div>
		<div class="col">
			<h3>3) col</h3>
		</div>
		<div class="col">
			<h3>4) col</h3>
		</div>
		<div class="col">
			<h3>5) col</h3>
		</div>
		<div class="col">
			<h3>6) col</h3>
		</div>
	</div>
                    
                

row row-reverse*

1) col

2) col

3) col

4) col

5) col

6) col

                    
    <div class="row row-reverse">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
                

row column*

1) col

2) col

3) col

4) col

5) col

6) col

					
    <div class="row column">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
				

row column-reverse*

1) col

2) col

3) col

4) col

5) col

6) col

					
    <div class="row column-reverse">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
				

flex wrap

row wrap*

1) col

2) col

3) col

4) col

5) col

6) col

                    
    <div class="row wrap">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
                

row nowrap*

1) col

2) col

3) col

4) col

5) col

6) col

                    
    <div class="row nowrap">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
                

row wrap-reverse*

1) col

2) col

3) col

4) col

5) col

6) col

                    
    <div class="row wrap-reverse">
        <div class="col">
            <h3>1) col</h3>
        </div>
        <div class="col">
            <h3>2) col</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
        <div class="col">
            <h3>4) col</h3>
        </div>
        <div class="col">
            <h3>5) col</h3>
        </div>
        <div class="col">
            <h3>6) col</h3>
        </div>
    </div>
                    
                

flex grid with custom sizes

row

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

flex align items

row items-start*

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row items-start">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

row items-end*

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row items-end">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

row items-center*

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row items-center">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>texte en dessous</p>
            <p>texte en dessous</p>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

row items-baseline*

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row items-baseline">
        <div class="col col-3" style="padding-top: 50px">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col" style="padding-top: 15px">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

row items-stretch(by default)*

1) col col-3

2) col col-6

some text ...

some text ...

3) col

                    
    <div class="row items-stretch">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                    
                

flex align content

row content-start*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-start">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
         <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

row content-end*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-end">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

row content-center*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-center">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

row content-stretch*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-stretch">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

row content-between*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-between">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

row content-around*

1) col col-3

2) col col-6

some text ...

some text ...

3) col col-3

2) col col-6

some text ...

some text ...

1) col col-3

3) col

                        
    <div class="row content-around">
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>3) col col-3</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-3">
            <h3>1) col col-3</h3>
        </div>
        <div class="col">
            <h3>3) col</h3>
        </div>
    </div>
                        
                    

justify-content

row justify-start*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-start">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

row justify-end*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-end">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

row justify-center*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-center">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

row justify-between*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-between">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

row justify-around*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-around">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

row justify-evenly*

1) col col-2

2) col col-6

some text ...

some text ...

3) col col-2

2) col col-4

some text ...

some text ...

1) col col-4

3) col col-1

                    
    <div class="row justify-evenly">
        <div class="col col-2">
            <h3>1) col col-2</h3>
        </div>
        <div class="col col-6">
            <h3>2) col col-6</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-2">
            <h3>3) col col-2</h3>
        </div>
        <div class="col col-4">
            <h3>2) col col-4</h3>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col col-4">
            <h3>1) col col-4</h3>
        </div>
        <div class="col col-1">
            <h3>3) col col-1</h3>
        </div>
    </div>
                    
                

the column system

for adaptative design

row

1) col s5 m7 l9 xl6 offset-xl4

cols are stretch by default

cols are stretch by default

cols are stretch by default

cols are stretch by default

2) col s7 m5 l3 xl1

3) col s4 m5 l3 xl7

4) col s4 m5 l3 xl5

5) col s4 m8 l10 xl12

6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4

                    
    <div class="row">
        <div class="col s5 m7 l9 xl6 offset-xl4">
            <h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
            <h3>cols are stretch by default</h3>
            <h3>cols are stretch by default</h3>
            <h3>cols are stretch by default</h3>
            <h3>cols are stretch by default</h3>
        </div>
        <div class="col s7 m5 l3 xl1">
            <h3>2) col s7 m5 l3 xl1</h3>
        </div>
        <div class="col s4 m5 l3 xl7">
            <h3>3) col s4 m5 l3 xl7</h3>
        </div>
        <div class="col s4 m5 l3 xl5">
            <h3>4) col s4 m5 l3 xl5</h3>
        </div>
        <div class="col s4 m8 l10 xl12">
            <h3>5) col s4 m8 l10 xl12</h3>
        </div>
        <div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
            <h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
        </div>
    </div>
                    
                

row with gutters

row-g

1) col s5 m7 l9 xl6 offset-xl4

2) col s7 m5 l3 xl1

3) col s4 m5 l3 xl7

4) col s4 m5 l3 xl5

5) col s4 m8 l10 xl12

6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4

                    
    <div class="row-g">
        <div class="col s5 m7 l9 xl6 offset-xl4">
            <h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
        </div>
        <div class="col s7 m5 l3 xl1">
            <h3>2) col s7 m5 l3 xl1</h3>
        </div>
        <div class="col s4 m5 l3 xl7">
            <h3>3) col s4 m5 l3 xl7</h3>
        </div>
        <div class="col s4 m5 l3 xl5">
            <h3>4) col s4 m5 l3 xl5</h3>
        </div>
        <div class="col s4 m8 l10 xl12">
            <h3>5) col s4 m8 l10 xl12</h3>
        </div>
        <div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
            <h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
        </div>
    </div>
                    
                

mixed styles grid

row content-between

1) col s5 m7 l9 xl6 offset-xl4

cols are stretch by default

cols are stretch by default

2) col s7 m5 l3 xl1

3) col s4 m5 l3 xl7

4) col s4 m5 l3 xl5

5) col s4 m8 l10 xl12

6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4

                    
    <div class="row content-between">
        <div class="col s5 m7 l9 xl6 offset-xl4">
            <h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
            <h3>cols are stretch by default</h3>
            <h3>cols are stretch by default</h3>
        </div>
        <div class="col s7 m5 l3 xl1">
            <h3>2) col s7 m5 l3 xl1</h3>
        </div>
        <div class="col s4 m5 l3 xl7">
            <h3>3) col s4 m5 l3 xl7</h3>
        </div>
        <div class="col s4 m5 l3 xl5">
            <h3>4) col s4 m5 l3 xl5</h3>
        </div>
        <div class="col s4 m8 l10 xl12">
            <h3>5) col s4 m8 l10 xl12</h3>
        </div>
        <div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
            <h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
        </div>
    </div>
                    
                

row-g content-around column-s row-reverse-l

1) col s5 m7 l9 xl6 offset-xl4

cols are stretch by default

cols are stretch by default

2) col s7 m5 l3 xl1

3) col s4 m5 l3 xl7

4) col s4 m5 l3 xl5

5) col s4 m8 l10 xl12

6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4

                    
    <div class="row-g content-around column-s row-reverse-l">
        <div class="col s5 m7 l9 xl6 offset-xl4">
            <h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
            <h3>cols are stretch by default</h3>
            <h3>cols are stretch by default</h3>
        </div>
        <div class="col s7 m5 l3 xl1">
            <h3>2) col s7 m5 l3 xl1</h3>
        </div>
        <div class="col s4 m5 l3 xl7">
            <h3>3) col s4 m5 l3 xl7</h3>
        </div>
        <div class="col s4 m5 l3 xl5">
            <h3>4) col s4 m5 l3 xl5</h3>
        </div>
        <div class="col s4 m8 l10 xl12">
            <h3>5) col s4 m8 l10 xl12</h3>
        </div>
        <div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
            <h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
        </div>
    </div>
                    
                

align-self

Use it to override the align-items property of the row for a particular col item

Note that float, clear and vertical-align have no effect on a flex item.

self-end*

1) col

some text ...

some text ...

some text ...

some text ...

2) col

3) col self-end

4) col

                    
    <div class="row">
        <div class="col">
            <h3>1) col</h3>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col"><h3>2) col</h3></div>
        <div class="col self-end"><h3>3) col self-end</h3></div>
        <div class="col"><h3>4) col</h3></div>
    </div>
                    
                

self-start*

1) col

some text ...

some text ...

some text ...

some text ...

2) col

3) col self-start

4) col

                    
    <div class="row">
        <div class="col">
            <h3>1) col</h3>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col"><h3>2) col</h3></div>
        <div class="col self-start"><h3>3) col self-start</h3></div>
        <div class="col"><h3>4) col</h3></div>
    </div>
                    
                

self-center*

1) col

some text ...

some text ...

some text ...

some text ...

2) col

3) col self-center

4) col

                    
    <div class="row">
        <div class="col">
            <h3>1) col</h3>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col"><h3>2) col</h3></div>
        <div class="col self-center"><h3>3) col self-center</h3></div>
        <div class="col"><h3>4) col</h3></div>
    </div>
                    
                

self-baseline*

1) col

some text ...

some text ...

some text ...

some text ...

2) col

3) col self-baseline

4) col

                    
    <div class="row">
        <div class="col" style="margin-top: 80px">
            <h3>1) col</h3>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col" style="margin-top: 80px"><h3>2) col</h3></div>
        <div class="col self-baseline"><h3>3) col self-baseline</h3></div>
        <div class="col" style="margin-top: 80px"><h3>4) col</h3></div>
    </div>
                    
                

self-stretch*

1) col

some text ...

some text ...

some text ...

some text ...

2) col

3) col self-stretch

4) col

                    
    <div class="row items-start">
        <div class="col">
            <h3>1) col</h3>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
            <p>some text ... </p>
        </div>
        <div class="col"><h3>2) col</h3></div>
        <div class="col self-stretch"><h3>3) col self-stretch</h3></div>
        <div class="col"><h3>4) col</h3></div>
    </div>
                    
                

order*

integer from 1 to 100, neg = negative

1) col order-1

2) col order-5

3) col

4) col order-neg-9

                    
    <div class="row justify-between">
        <div class="col order-1"><h3>1) col order-1</h3></div>
        <div class="col order-5"><h3>2) col order-5</h3></div>
        <div class="col"><h3>3) col</h3></div>
        <div class="col order-neg-9"><h3>4) col order-neg-9</h3></div>
    </div>
                    
                

grow*

integer from 1 to 12

1) col grow-6

2) col grow-4

3) col

                    
    <div class="row">
        <div class="col grow-6"><h3>1) col grow-6</h3></div>
        <div class="col grow-4"><h3>2) col grow-4</h3></div>
        <div class="col"><h3>3) col</h3></div>
    </div>
                    
                

visibility

with suffixed classes, you can hide an item on specified screen size

col xl5 offset-xl2 visible-xl

                    
    <div class="row">
        <div class="col xl5 offset-xl2 visible-xl">
            <h3>col xl5 offset-xl2 visible-xl</h3>
        </div>
    </div>
                    
                

full-page mode

like homepage header

a little demo

Title of the page

                    
    <div class="full-page" style="background-image: url(demo/assets/images/work.jpg);">
        <h1 class="center text-red">Title of the page</h1>
    </div>
                    
                

expand ratio

the header is at the top
the content take all the page - the header height - the footer height
the footer is at the bottom
                    
    <section class="full-page flex-layout-expand">
        <header>the header is at the top</header>
        <main class="expand">
            the content take all the page - the header height - the footer height
        </main>
        <footer>the footer is at the bottom</footer>
    </section>
                    
                

the images classes (works with every html tag)

contour effects

rounded (same as .border-radius class)

thumbnail

circle (as you see, it needs a square image)

                    
    <img class="rounded" src="demo/assets/images/img2.jpg" alt=""/>
    <img class="thumbnail" src="demo/assets/images/img2.jpg" alt=""/>
    <img class="circle" src="demo/assets/images/img2.jpg" alt=""/>
                    
                

avatar and avatar mini

                    
    <div class="avatar">
        <img src="demo/assets/images/img2.jpg" alt=""/>
    </div>

    <div class="avatar-mini">
        <img src="demo/assets/images/img2.jpg" alt=""/>
    </div>
                    
                

the hover effects

hover images

                    
    <div class="col m6">
        <a href="demo/assets/images/img1.jpg">
            <figure class="hover">
                <img src="demo/assets/images/img1.jpg" alt=""/>
                <figcaption> ... some hidden text ... </figcaption>
            </figure>
        </a>
    </div>

    <div class="col m6">
        <a href="demo/assets/images/img2.jpg">
            <figure class="hover">
                <img src="demo/assets/images/img2.jpg" alt=""/>
                <figcaption> ... some hidden text ... </figcaption>
            </figure>
        </a>
    </div>
                    
                

hover sections

i am a link box

linking to another page

                    
    <div>
        <a href="css.html">
            <div class="hover-div row">
                <div class="hover-div-img-wrapper col m8">
                    <img src="demo/assets/images/img2.jpg" alt=""/>
                </div>
                <div class="padding col m4 theme-2">
                    <p>i am a link box</p>
                    <p>linking to another page</p>
                </div>
            </div>
        </a>
    </div>
                    
                

hover image with animation

                    
    <div class="col m6">
        <a href="demo/assets/images/img1.jpg">
            <figure class="hover-animated no-margin">
                <img src="demo/assets/images/img1.jpg" alt=""/>
                <figcaption>
                    <p>lorem ipsum dolor sit amet</p>
                </figcaption>
            </figure>
        </a>
    </div>

    <div class="col m6">
        <a href="demo/assets/images/img2.jpg">
            <figure class="hover-animated no-margin">
                <img src="demo/assets/images/img2.jpg" alt=""/>
                <figcaption>
                    <p>lorem ipsum dolor sit amet</p>
                </figcaption>
            </figure>
        </a>
    </div>
                    
                

all the utils

rescue classes

easy to get result with pure html

property classes
text-align .text-left .text-center .text-right
text-transform .capitalize .uppercase .lowercase
font-variant .small-caps
font-style .italic
font-weight .bold
pseudo styles .sup .sub
text-decoration .underline .overline
display .block .inline .inline-block
visibility .hidden
float .left .right .clear
position .relative .absolute .fixed
dimensions .full-width .full-height .full-page
padding 20px .no-padding .padding .padding-top
.padding-bottom .padding-left .padding-right
margin 20px .no-margin .margin .margin-top
.margin-bottom .margin-left .margin-right
cursor .pointer
border-radius 4px .border-radius
hover box-shadow .hoverable
absolute center .center
hidden for print .no-print
the power of iRoom toolkit