Grid layout examples
12 column with 8.33% width each one
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
6 column with 16.6% width each one
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
3 column with 25% width each one
.col-3
.col-3
.col-3
.col-3
2 column with 50% width each one
.col-6
.col-6
2 columns
.col-5
.col-7
2 columns
.col-8
.col-4
2 columns
.col-3
.col-9
2 columns
.col-10
.col-2
2 columns
.col-11
.col-1
Basic Table
Using classes to style a basic table
| Title 1 | Title 2 | Title 3 | Title 4 |
|---|---|---|---|
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
Add class="table" to your <table> tag
Stripped Table
Using classes to style a basic stripped table
| Title 1 | Title 2 | Title 3 | Title 4 |
|---|---|---|---|
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
Add class="table-stripped" to your <table> tag
Separate Borders example
You can use this property adding the class separate-borders to your component
| Title 1 | Title 2 | Title 3 | Title 4 |
|---|---|---|---|
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
Add class="separate-borders" to your <table> tag
Basic Table
Using classes to style a basic table
| Title 1 | Title 2 | Title 3 | Title 4 |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Pellentesque hendrerit diam arcu, ut aliquet nibh luctus tincidunt. Integer rutrum egestas risus et ultricies | Sed tellus in mollis tempus. Curabitur purus ex, porta et neque quis, ultricies posuere dui. Cras porta purus id erat semper pretium. Cras id commodo nunc, sed imperdiet nulla. Ut vehicula sed eros quis tincidunt. | Lorem |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
Add class="column-width-number"
to
your <table> tag, where number is the number of columns your table has, so the space distributes
evenly
between all of them
Color Gradients
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Gray 1000
Gray 1100
Gray 1200
pink 100
pink 200
pink 300
pink 400
pink 500
pink 600
pink 700
pink 800
pink 900
pink 1000
pink 1100
pink 1200
purple 100
purple 200
purple 300
purple 400
purple 500
purple 600
purple 700
purple 800
purple 900
purple 1000
purple 1100
purple 1200
green 100
green 200
green 300
green 400
green 500
green 600
green 700
green 800
green 900
green 1000
green 1100
green 1200
Margins
You can apply margins from 0 to 20px in 1px jumps and from 25 to 80px in 5px jumps
Margin left examples
.m-l-0
.m-l-1
.m-l-2
.m-l-3
.m-l-4
.m-l-5
.m-l-6
.m-l-7
.m-l-8
.m-l-9
.m-l-10
.m-l-11
.m-l-12
.m-l-13
.m-l-14
.m-l-15
.m-l-16
.m-l-17
.m-l-18
.m-l-19
.m-l-20
.m-l-25
.m-l-30
.m-l-35
.m-l-40
.m-l-45
.m-l-50
.m-l-55
.m-l-60
.m-l-65
.m-l-70
.m-l-75
.m-l-80
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
⇦
Margin right examples
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
⇨
.m-r-0
.m-r-1
.m-r-2
.m-r-3
.m-r-4
.m-r-5
.m-r-6
.m-r-7
.m-r-8
.m-r-9
.m-r-10
.m-r-11
.m-r-12
.m-r-13
.m-r-14
.m-r-15
.m-r-16
.m-r-17
.m-r-18
.m-r-19
.m-r-20
.m-r-25
.m-r-30
.m-r-35
.m-r-40
.m-r-45
.m-r-50
.m-r-55
.m-r-60
.m-r-65
.m-r-70
.m-r-75
.m-r-80
Margin top examples
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
⇧
Margin bottom examples
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩
⇩