Hero Title

Hero subtitle

There is no ignorance, and no end to ignorance. There is no old age and death, and no end to old age and death. There is no suffering, no end to suffering, no cause of suffering, no path to follow. There is no attainment of wisdom, and no wisdom to attain.

Grid Layout

Grid layout is super simple. Set a column inside columns add as many columns as you need, up to 12. If you want to span multiple columns use you can use size helpers (e.g. is-three-fifths, is-half, etc). Or, specify column numbers to span: is-5, is-6.

Position your span within the grid with offsets: is-offeset-one-quarter, is-offset-8, etc.

Message Boxes

Here is a message component using $info color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Here is a message component using $primary color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Here is a message component using $grey-dark color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Tiles—masonry or whatever

Primary color...

Vertical orientation

Grey color

All the colors are there

Warning color

Vertical again..

Info color

With an image

Danger color

Aligned with the right tile

Success color

With even more content

Cards

Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

More Cards

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

Form controls

This username is available

This email is invalid

Buttons


Button Sizes

Titles

Title 1

Title 2

Title 3 (default size)

Title 4

Title 5
Title 6

Subtitles

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5
Subtitle 6

Title/Sub

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

Tables

Pos Team Pld W D L GF GA GD Pts Qualification or relegation
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
1 Leicester City (C) 38 23 12 3 68 36 +32 81 Qualification for the Champions League group stage
2 Arsenal 38 20 11 7 65 36 +29 71 Qualification for the Champions League group stage
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70 Qualification for the Champions League group stage
4 Manchester City 38 19 9 10 71 41 +30 66 Qualification for the Champions League play-off round
5 Manchester United 38 19 9 10 49 35 +14 66 Qualification for the Europa League group stage
6 Southampton 38 18 9 11 59 41 +18 63 Qualification for the Europa League group stage
7 West Ham United 38 16 14 8 65 51 +14 62 Qualification for the Europa League third qualifying round
8 Liverpool 38 16 12 10 63 50 +13 60
9 Stoke City 38 14 9 15 41 55 −14 51
10 Chelsea 38 12 14 12 59 53 +6 50
11 Everton 38 11 14 13 59 55 +4 47
12 Swansea City 38 12 11 15 42 52 −10 47
13 Watford 38 12 9 17 40 50 −10 45
14 West Bromwich Albion 38 10 13 15 34 48 −14 43
15 Crystal Palace 38 11 9 18 39 51 −12 42
16 AFC Bournemouth 38 11 9 18 45 67 −22 42
17 Sunderland 38 9 12 17 48 62 −14 39
18 Newcastle United (R) 38 9 10 19 44 65 −21 37 Relegation to the Football League Championship
19 Norwich City (R) 38 9 7 22 39 67 −28 34 Relegation to the Football League Championship
20 Aston Villa (R) 38 3 8 27 27 76 −49 17 Relegation to the Football League Championship

Body text elements

Blockquote

There is no ignorance, and no end to ignorance. There is no old age and death, and no end to old age and death. There is no suffering, no end to suffering, no cause of suffering, no path to follow. There is no attainment of wisdom, and no wisdom to attain. —Heart Sutra

Ordered Lists

  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk

Small Text

There is no ignorance, and no end to ignorance. There is no old age and death, and no end to old age and death. There is no suffering, and no end to suffering, no cause of suffering, no path to follow. There is no attainment of wisdom, and no wisdom to attain.

Medium Text

There is no ignorance, and no end to ignorance. There is no old age and death, and no end to old age and death. There is no suffering, and no end to suffering, no cause of suffering, no path to follow. There is no attainment of wisdom, and no wisdom to attain.

Large Text

There is no ignorance, and no end to ignorance. There is no old age and death, and no end to old age and death. There is no suffering, and no end to suffering, no cause of suffering, no path to follow. There is no attainment of wisdom, and no wisdom to attain.

Media Box

Image

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

Progress Bars

15% 30% 45% 60% 75% 90%