Buttons





Hello

Alert

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!


Tag Heading 1

Tag Heading 2

Tag Heading 3

Tag Heading 4

Tag Heading 5
Tag Heading 6

Class Heading 1

Class Heading 2

Class Heading 3

Class Heading 4

Class Heading 5

Class Heading 6

Badges

npm
npm
npm
npm
npm
npm
npm
npm

npm
npm
npm
npm
npm
npm
npm
npm

npm
npm
npm
npm
npm
npm
npm
npm

npm
5.0.1
sass
3.1.1

Notifications 4

Dropdown

Panels

Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.
Whatup
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque delectus eius id aperiam quasi consectetur ullam rerum, soluta ad earum veniam ipsam, iusto, natus hic non! Fugiat, debitis illo.

Notification

Default : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Danger : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Success : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Primary : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Info : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Dark : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Light : Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Container

Containers are basially simple divs with a margin to them. The margin is present only in desktop. In smaller devices, it has a constatnt margin of 4px. You can combine container with various other components to give them a margin.

Container with alert-info

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi fugit laudantium perferendis? Quisquam repudiandae illum laudantium praesentium et hicatque doloribus, eligendi quibusdam culpa impedit in. Corrupti, pariatur nam?

Medium/Default Container with dark-alert

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi fugit laudantium perferendis? Quisquam repudiandae illum laudantium praesentium et hic atque doloribus, eligendi quibusdam culpa impedit in. Corrupti, pariatur nam?

Small Container with dark-alert

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi fugit laudantium perferendis? Quisquam repudiandae illum laudantium praesentium et hic atque doloribus, eligendi quibusdam culpa impedit in. Corrupti, pariatur nam?

Large Container with dark-alert

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi fugit laudantium perferendis? Quisquam repudiandae illum laudantium praesentium et hic atque doloribus, eligendi quibusdam culpa impedit in. Corrupti, pariatur nam?

Container with notification looks like this.Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi fugit laudantium perferendis? Quisquam repudiandae illum laudantium praesentium et hic atque doloribus, eligendi quibusdam culpa impedit in. Corrupti, pariatur nam?

Panel with Container
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis ad quam odio at quis laudantium eligendi eveniet. Natus soluta ducimus, quae amet doloremque assumenda explicabo fugiat ipsam omnis sunt optio?

Hero

Whatup

Whatup

Whatup

Whatup

Whatup

Whatup

Tooltip

whatup
whatup
whatup
whatup

Simple Columns

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic optio omnis molestiae! Molestias nobis exercitationem facilis eligendi architecto? Voluptates beatae sit voluptas error amet quisquam libero suscipit nesciunt deserunt!

Card

John Doe

John Doe

A Loser and Wimp
John Doe

John Doe

A Loser and Wimp
John Doe

John Doe

A Loser and Wimp

Variable columns

2
6
4

Manual setting

12
6
6
3
3
3
3
1
1
1
1
1
1
1
1
1
1
1
1

Default alignment

12
6
6
3
3
3
3
1
1
1
1
1
1
1
1
1
1
1
1
9
3

Progress bar

Forms






Lalal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, quidem natus accusantium labore deserunt, libero cupiditate sint eveniet omnis iusto ipsum eos blanditiis expedita ex nulla obcaecati atque voluptatem incidunt.
Lalal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, quidem natus accusantium labore deserunt, libero cupiditate sint eveniet omnis iusto ipsum eos blanditiis expedita ex nulla obcaecati atque voluptatem incidunt.
Lalal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, quidem natus accusantium labore deserunt, libero cupiditate sint eveniet omnis iusto ipsum eos blanditiis expedita ex nulla obcaecati atque voluptatem incidunt.
Lalal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, quidem natus accusantium labore deserunt, libero cupiditate sint eveniet omnis iusto ipsum eos blanditiis expedita ex nulla obcaecati atque voluptatem incidunt.

Content/Text

Images

Tables

Delete Button

All elements in bulma

Sidebar

Font awesome support

Layouts

Snackbar

Carousel