Bulma Components Complete Reference
Bulma Components contain various classes that are used to build the different portions of the web application which includes the Breadcrumb component that improves the navigation experience, card component that can be used to add details. Several such components are helpful to building an attractive web application.
The table form of complete reference for Bulma Components is given below:
Bulma Breadcrumb
Bulma Breadcrumb is a simple navigation component. To navigate the component requires only the breadcrumb container and ul list.
Components |
Descriptions |
---|---|
Bulma Breadcrumb Alignment |
It is used to align the breadcrumb container to the center, left, and right. |
Bulma Breadcrumb Icons |
It is used to add icons to breadcrumbs using an icon container containing the font awesome icon inside <a> Tag. They provide thousand plus font awesome icons that can be used with Breadcrumb. |
Bulma Breadcrumb Alternative separators |
It is used to separate the breadcrumbs. They provide 4 additional separators like arrow separator, bullet separator, dot, and succeeds separator. |
Bulma Breadcrumb Sizes |
It is used to sizing the breadcrumb. There are three sizes small, medium, and large. |
Bulma Breadcrumb Variables |
It provides lots of items to apply on breadcrumbs like item color, hover, padding, etc. |
Bulma Card
A Bulma card is a flexible component that can be composed of the content needed. It includes several other components that we have to add exclusively to design our content well.
Components |
Descriptions |
---|---|
Bulma Card parts |
Bulma Card part classes can be used together to make a card. It is not required to all four parts to building a card, you can use the part you need. |
Bulma Card Variables |
Bulma Card is a flexible component that can be composed of the content needed. It includes several other components that we have to add exclusively to design our content well. |
Bulma Dropdown
A Bulma dropdown component is a container for a dropdown button and a dropdown menu.
Components |
Descriptions |
---|---|
Bulma Dropdown content |
It is used to dropdown the content of the container. We can use <a> tag or also a <div> tag to dropdown items. |
Bulma Hoverable or Toggable Dropdown |
This component used to hover or tirgger the content. |
Bulma Right aligned Dropdown |
This component used to dropdown the content to right side. |
Bulma Dropup |
This component used for dropup the content. |
Bulma Menu
A Bulma menu component that can be used as a type of vertical navigation. This component is useful for those websites that want to add vertical navigation.
Bulma Message
Bulma message component provides colored box type placeholders to emphasize certain parts of the page. It includes several other components that can be added to design the content.
Components |
Descriptions |
---|---|
Bulma Message Colors |
Bulma Message Color classes are used to add the different colors to the message component. |
Bulma Message body |
Bulma Message body class is used to create the message body of the message container. |
Bulma Message Sizes |
Bulma Message Sizes are used to create message components in different sizes. There are three modifiers for the message component to create different size messages. |
Bulma Modal
A Bulma Modal is a classic overlay in which one can include any content. Bulma Modal component is a dialog box/popup window that is displayed on top of the current page once the trigger button is clicked.
Components |
Descriptions |
---|---|
Bulma Image modal |
You can add image using image modal. The <img> tag use inside modal-content to create an image modal. |
Bulma Modal card |
Bulma Modal card used to create the modal card container. |
Bulma Modal JavaScript implementation example |
This classes used for create a modal using javascript however bulma package doesn’t come with any JavaScript. |
Bulma Navbar
A Bulma Navbar provides a responsive horizontal navbar along with the images, links, buttons, and dropdown menus.
Components |
Descriptions |
---|---|
Bulma Basic Navbar |
This classes are used to create basic horizonal navbar. |
Bulma Navbar brand |
The Navbar brand is the left side of the navbar which can contain navbar items and a navbar-burger as the last child. The navbar brand is always visible to the user irrespective of the viewport size. |
Bulma Navbar burger |
It is hamburger menu that appears on touch devices. It is used as the last child of the navbar-brand container to show the hamburger menu button on touch devices. |
Bulma Navbar menu |
Navbar menu that consists of menu items. It is the sibling of the navbar brand. |
Bulma Navbar start and navbar end |
This two are children of the navbar-menu. navbar start will appear on left and navbar end on right. |
Bulma Navbar item |
Bulma navbar item are the repeatable items that can be links, logos, dropdown menu, text, etc. The navbar-item class can be used with an anchor tag <a> or <div> tag |
Bulma Transparent navbar |
Bulma transparent navbar removes all the active and hover backgrounds from the navbar-items. |
Bulma Fixed navbar |
Bulma Fixed navbar is used to fixed the navbar to either top of the page or bottom. |
Bulma Dropdown menu |
Bulma Dropdown menu is the main container that contains the dropdown button and the dropdown menu. |
Bulma Navbar Colors |
Bulma Navbar Color is used to chamge the background color of the nvabar. |
Bulma Navbar Helper Classes |
There is two types of bulma navbar helper classes contain spaced used for add padding at top-bottom and shadow used for add shadow around the navbar. |
Bulma Pagination
Bulma Pagination is a component used to indicate the existence of a series of related content across multiple pages. It enable navigation between pages on a website.
Components |
Descriptions |
---|---|
Bulma Pagination Styles |
Bulma pagination styles has only one style variation which can be used to make the pagination items rounded. |
Bulma Pagination Sizes |
Bulma pagination sizes used to set the size of the pagination to small, medium or large. |
Bulma Panel
A Bulma panel element is simply a container for compact controls.
Components |
Descriptions |
---|---|
Bulma Panel Colors |
Bulma Panel Colors is used to set the color of the panel component. |
Bulma Tabs
A Bulma tabs are simple responsive horizontal navigation tabs with different styles.
Components |
Descriptions |
---|---|
Bulma Tabs Alignment |
Bulma Tabs Alignment is used to alignment of the tab list. |
Bulma Tabs Icons |
It is used to add icons to the tabs. Add icon container inside the <a> tag. |
Bulma Tabs Sizes |
It is used to set size of the tabs. it has mainly in three sizes small, medium and large. |
Bulma Tabs Styles |
We can apply styling using bulma tabs style classes. It comes with diffrent style like box, toggle, rounded, etc. |
Bulma Tabs Combining |
It’s used to combine different tabs togather. |
Contact Us