Open In App

Bulma Components Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads