Hello from modal !
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
mass media
All-in-one Marketing app
Bulma modals are a flexible component. It acts like a container that
can hold any type of content. This is a basic implementation
displaying a simple flex card. To use, add the class
.modal-trigger to the element that is supposed to
trigger the modal after being clicked. Add
data-modal="MyModalID" to the same element to target
the appropriate modal.
Bulma ships only with a predefined modal size. Bulkit adds two more
sizes : small modals and large modals. To create a small modal, add
the .modal-sm to the .modal wrapper.
Bulma ships only with a predefined modal size. Bulkit adds two more
sizes : small modals and large modals. To create a large modal, add
the .modal-lg to the .modal wrapper.
If you want to display more complex content in your modal, card
modals might be a good option. Modal sizes are still relevant and
will resize your card according to the chosen size. Just add the
.modal-card class to the
.modal-content element. You can then set a header
(.modal-card-head), a body
(.modal-card-body) and a footer
(.modal-card-footer).
Modals can be used to display images. Add the
.image-modal to the .modal container. Then
insert an image inside the .modal-content tag. See the
code example for more details about html structure.
A carousel can be embeded inside an image modal to display more elements. See the markup for more details. Don't forget to initialize the carousel with javascript.
You can embed any type of form inside a modal. Just add your form
inside the .modal-content element.
You can embed any type of form inside a modal. Just add your form
inside the .modal-content element.
You can create message modals wich are useful when you want to
return a status. Message modals icons animation rely on
vivus js library. Every modal type is controled by a
javascript snippet. The following is a success modal, check the code
examples for more details.
You can create message modals wich are useful when you want to
return a status. Message modals icons animation rely on
vivus js library. Every modal type is controled by a
javascript snippet. The following is an error modal, check the code
examples for more details.
You can create message modals wich are useful when you want to
return a status. Message modals icons animation rely on
vivus js library. Every modal type is controled by a
javascript snippet. The following is a warning modal, check the code
examples for more details.
You can create message modals wich are useful when you want to
return a status. Message modals icons animation rely on
vivus js library. Every modal type is controled by a
javascript snippet. The following is an info modal, check the code
examples for more details.
Several modal overlay colors are available. The default one is a light grey.
The hero overlay takes the color of your main hero gradient,
predefined in the currently active color scheme. To activate it, add
the .modal-hero class to the .modal parent
container.
You can display a success overlay. To activate it, add the
.modal-success class to the .modal parent
container.
You can display a error overlay. To activate it, add the
.modal-error class to the .modal parent
container.
You can display a warning overlay. To activate it, add the
.modal-warning class to the .modal parent
container.
You can display a info overlay. To activate it, add the
.modal-info class to the .modal parent
container.
Select users
Lorem ipsum sit dolor amet os ludicrum alea jacta est.
Credits : @Unsplash
Lorem ipsum sit dolor amet os ludicrum alea jacta est.
Credits : @Unsplash
Lorem ipsum sit dolor amet os ludicrum alea jacta est.
Credits : @Unsplash
Lorem ipsum sit dolor amet os ludicrum alea jacta est.
Credits : @Unsplash
Lorem ipsum sit dolor amet os ludicrum alea jacta est.
Credits : @Unsplash
