Bulma Elements Complete Reference
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 |
Contact Us