Open In App

Bulma Elements Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma Elements are used in various classes to add the specific elements that help to create interactive web applications & websites. It enhance the overall popularity & also improves the ranking.

The list of complete reference for Bulma Elements are given below:

Bulma Block

Bulma Block is the spacer element that is used to provide a consistent margin between sibling elements. It is used when we want to place content in blocks and want to give space between each block.

Bulma Box

A Bulma Box element is simply a container with a shadow, a border, a radius, and some padding.

Components

Descriptions

Bulma Box Variables

Bulma box variables are used to customize your own theme, and styles like color, radius, background color, etc.

Bulma Button

Bulma Button is used to design classic buttons in different colors, sizes, and states which makes it interactive.

Elements

Descriptions

Bulma Button Colors

This class contains lots of properties to set button colors as we want to apply.

Bulma Button Sizes

The Bulma Button size class is used to set the size of the button. It comes with different sizes normal, small, medium, and large.

Bulma Button Displays

This class can used to set the size of the display of the button. It also comes with different sizes normal, small, medium, and large.

Bulma Button Styles

This class can be used to set the style of the buttons.

Bulma Button States

Bulma Button state classes are used to style the button according to a specific state. we can style the buttons being hovered or in focus without triggering that state.

Bulma Button group

A Bulma Button group is used to grouping the buttons together on a single line.

Bulma Button addons

This is style or class used to add additional elements to buttons component.

Bulma Button group with addons

We can group buttons and addons together using this style.

Bulma Buttons List

Bulma Button List is used to group buttons in a list. Button List can be created by wrapping the buttons in an div with class buttons

Bulma Button Variables

Bulma box variables are used to customize your own theme, and styles like padding, color, radius, background color, etc.

Bulma Content

Bulma Content is use to do the content task in the web, like if you can’t use CSS or when you just want to use HTML tags directly, use content as container. It can handle almost any HTML tag.

Elements

Descriptions

Bulma Content Ordered lists alternatives

Bulma Content Ordered list alternative is used to specify the order type you want to display.

Bulma Content Sizes

Bulma Content size is an important component that has been use to define the size of the content.

Bulma Content Variables

Bulma Content variable is use to manipulate the content interface like color, weight, and etc.

Bulma Delete

Bulma delete is an element that can be used in different context. This is a link or a button that is used to pop off a page, a box, a model on the page.

Components

Descriptions

Bulma Delete Sizes

Bulma Delete Sizes can creates four different sizes to delete an element option like normal, small, medium, and large.

Bulma Delete Combinations

This style can be use it inside the tags, the notification and the messages.

Bulma Icon

Bulma is compatible with all icon font libraries like Font Awesome, Material Design Icons, Ionicons, etc.

Elements

Descriptions

Bulma Icon text

Bulma Icon text helps us to combines many elements with text element according to we want it.

Bulma Icon Colors

Bulma icon is just simply text so we can change icon color’s as we want using bulma icon color classes.

Bulma Icon Sizes

Bulma Icon Size classes are used to define the size of the icon container. The icon container in Bulma comes in 4 different sizes: small, default, medium, and large.

Bulma Icon Font Awesome variations

Bulma has four types of Font Awesome variations and they include, fixed-width icons, bordered icons, animated and stacked icons.

Bulma Material Design Icons

The Bulma provides various types of Material Design icons such as Fontawesome, ionicons, etc to use in developing web applications, that are compatible with all icon font libraries.

Bulma Icon Ionicons

 Bulma is compatible with all the icon-font libraries out there like Material Design Icons, Font Awesome 5, Font Awesome 4, Ionicons, etc.

Bulma Icon Variables

Bulma Icon variables are used to customize your own icon’s dimensions or size.

Bulma Image

Elements

Descriptions

Bulma Image

Bulma image class is kind of a container since images took few minutes to load, an image container is reserved space for that image so that website’s layout not going to break while image loading or even in image errors.

Bulma Fixed square images

Bulma Fixed Square Images are fixed dimensions image containers that can be useful in specific places like avatars. These classes are used on the figure element, along with the image modifier, which wraps the image element.

Bulma Rounded images

Bulma Rounded images are used to make the images rounded.

Bulma Retina images

It use to image that is four time big.  Suppose we have an image container of size 128X128 and we want to insert the image of size 256X256, then we can insert it but it will be resized to 128X128 for maintaining the correct size.

Bulma Responsive images with ratios

Bulma provides 16 ratio modifiers that include the basic ratios used in still photography. We just need to requirement that parent element to already have a specific width.

Bulma Arbitrary ratios with any element

Bulma arbitrary ratios can be used on any element like iframe, etc. To use the arbitrary ratio, just use the has-ratio modifier to the class in which you want to set the ratio.

Bulma Image Variables

Bulma Image variables are used to customize your own image styles like ratio, dimentions.

Bulma Notification

Bulma notification is a simple colored block that draws the attention of the user about something. It can be used as a pinned notification in the corner of the viewport.

Elements

Descriptions

Bulma Notification Colors

This class is used to set the color of the notification element like cyan, dark, blue, etc.

Bulma Notification Light colors

Each color comes in it’s light version so Bulma Notification Light Color Feature is used to add the light color versions to the notification element.

Bulma Notification JavaScript example

This classes used for remove the notificationn on click using javascript however bulma package doesn’t come with any JavaScript. We can apply our own JavaSscript approroach to do this.

Bulma Notification Variables

Bulma Notification variables are used to customize your own notification theme and style like radius, padding , color, etc.

Bulma Progress bars

A Bulma progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left.

Elements

Descriptions

Bulma Colored Progress bars

This classes are used to change the color of the progress bar. There are multiple color classes to apply in progress bar.

Bulma Progress bars Sizes

This classes are used to set the progress bar size as we need.

Bulma Progress bars Indeterminate

This classes are used to diplay an indeterminate progress bar. it show that some progrss is going on but total duration not determined.

Bulma Progress bars Variables

Bulma Progress Bar variables are used to customize your own progress bar.

Bulma Table

Bulma Table provide multiple types of tables like a bordered table, stripped table, hoverable table, scrollable table, etc. Just by adding some Bulma classes to the HTML, we can achieve very interactive tables.

Elements

Descriptions

Bulma Table Modifiers

Bulma provides different table modifiers to apply in your table to make attractive.

Bulma Table container

This class is used to create a scrollable table by wrapping a table.

Bulma Table Variables

Bulma Table variables are used to customize your own table like set table border, background color hover, etc.

Bulma Tags

The Bulma tag is a small element that is very useful to attach information to a block or other component.

Elements

Descriptions

Bulma Tags Colors

This class is used to set the colors of the tags. Generally it has different ten color class apply in tag.

Bulma Tags Sizes

The Bulma tag sizes class are used to set the size of the button. It comes with different sizes normal, small, medium, and large.

Bulma Tags Modifiers

Bulma provides different tag modifiers to apply in tags like rounded tag or turn into delete button.

Bulma Tags Combinations

There is no classes to combine tags but we can create any tags combination as we want it.

Bulma Tags List

Bulma Tag list is container that wrapping list of tag togather

Bulma Tag addons

We can attach tags togather using tag addon class.

Bulma Tags Variables

Bulma Tag variables are used to customize the tag like set table border, background color hover, etc.

Bulma Title

The Bulma title is provide the main heading of our application. We can also change the size, color of the tile.

Elements

Descriptions

Bulma Title Sizes

It is used sizzing the title or subtitle from h1 to h6

Bulma Title Variables

Bulma Title variables are used to customize the your own titles like



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