load icon

Ayo Belajar Bootstrap !

ini adalah contoh penggunaan "HERO" didalam website

Column

Column
Ini Collumn
Column
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6

Layout Collumn

justify-content-start
One of two columns
justify-content-center
One of two columns
justify-content-end
One of two columns
justify-content-around
One of two columns
justify-content-between
One of two columns
justify-content-evenly
One of two columns

Progress Bar & Placeholder

25%
50%
75%

Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Alert

Card

Card 1

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
Card 2

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
Card 3

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere
Card 4
This is Title
  • Item 1
  • Item 2
  • Item 3
Read More
Card 5
This is Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

  • Item 1
  • Item 2
  • Item 3
Go somewhere
Card 6
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

This is Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card 7
Card 8
This is Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card 9
This is Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Read More
Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

New title
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
New title
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

Card 4
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card 5

Buttons

Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Color Scheme

.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle
.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.bg-white
.bg-transparent
.opacity-25
.opacity-50
.opacity-75
.opacity-100
.opacity-25
.opacity-50
.opacity-75
.opacity-100

Colorspy

Item 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 1-1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 1-2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 3

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 3-1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?

Item 3-2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae odit hic repellendus tempora fugiat eos molestias explicabo vel! Aperiam quibusdam cupiditate repellat amet reiciendis nihil assumenda ipsum tempora temporibus sit?



Form

Radios
Looks good!
Looks good!
@
Please choose a username.
You must agree before submitting.

Iframe



spinner