This guide will give you a comprehensive understanding of Bulma Elements and Components with programming code examples:
Bulma columns, layouts, and forms were explained in our previous tutorial. This is the third tutorial of the Bulma tutorial series.
In this tutorial, we’ve covered Bulma elements (block, box, content, title, button, tag, progress bar, notification, table, and image) and Bulma components (breadcrumb, card, message, dropdown, menu, modal, navbar, pagination, panel, and tab).
Let us begin with this tutorial on Bulma Elements and Components!
Table of Contents:
Bulma Elements and Components
Bulma Elements
Block, Box, Content, and Title
Block
A block acts as a special tool for a code of the block. It adds a consistent margin between sibling HTML elements. The block class is the main class used to create a block.
Box
A box is a simple container. You can include other elements inside a box. The box class is the main class used to create a box.
For example, let’s consider a login form. You can include the username/email field and the password field inside a box element.
Content
Content is used as a container for adding HTML tags like heading tags, paragraph tags, list tags, table tags, quote tags, etc. The content class is the main class used to create content.
There are 3 additional size classes.
They are,
- is-small
- is-medium
- is-large
Title
There are two classes for adding a title and a subtitle.
They are,
- title
- subtitle
You can use one of the below classes to change the size of the title/subtitle.
- is-1
- is-2
- is-3
- is-4
- is-5
- is-6
Example
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-4 has-text-primary">With Block</p> <div class="block">Some text...</div> <div class="block">Some text...</div> <div class="block">Some text...</div> <p class="is-size-4 has-text-primary">Without Block</p> <div>Some text...</div> <div>Some text...</div> <div>Some text...</div> <br> <p class="is-size-4 has-text-primary">Box</p> <div class="box"> A simple box. </div> <p class="is-size-4 has-text-primary">With Content Class</p> <div class="content"> <h4>Sample Heading</h4> <p>Some text here...</p> </div> <p class="is-size-4 has-text-primary">Without Content Class</p> <div> <h4>Sample Heading</h4> <p>Some text here...</p> </div> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Button
Basics
Buttons are commonly found in forms, chat boxes, etc. The button class is the main class used to create a button.
The below elements can be used to create a button:
- <button>
- <a>
- <input type=”submit”>
- <input type=”reset”>
Colors
You can use the is-$color classes (as shown below) to add colors to the buttons.
- is-white
- is-black
- is-light
- is-dark
- is-primary
- is-link
- is-info
- is-success
- is-warning
- is-danger
You can use the below two classes as well:
- is-text
- is-ghost
Sizes
There are some additional size classes.
They are,
- is-small
- is-medium
- is-large
- is-normal
Further, you can add the below size classes to change the size of multiple buttons.
- are–small
- are–medium
- are-large
States
The below classes/attributes can change the state of the buttons:
- is-hovered
- is-focused
- is-active
- is-loading
- is-static
- disabled attribute
Alignments
There are 2 classes to change the default alignment of buttons.
They are,
- is-centered
- is-right
More about Buttons
Further, you can also use the below classes to add different styles to the buttons:
- is-outlined – For outlined buttons
- is-inverted – To invert the color of the button
- is-rounded – To make the button round
- is-responsive – For responsive buttons
- is-fullwidth – For full-width buttons
- delete – To create a delete button. It is a simple circle with a cross.
Furthermore, you can use Font Awesome icons, groups (button groups), and addons (button addons) with buttons. You can also combine the above classes to add different styles.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> </head> <body> <div class="container mt-2"> <p class="is-size-4">Button Types</p> <div class="buttons"> <button class="button">Button</button> <a class="button">Link</a> <input class="button" type="submit" value="Submit"> <input class="button" type="reset" value="Reset"> </div> <p class="is-size-4">Button Colours</p> <div class="buttons"> <button class="button is-black">Black</button> <button class="button is-dark">Dark</button> <button class="button is-light">Light</button> <button class="button is-white">White</button> <button class="button is-text">Text</button> <button class="button is-ghost">Ghost</button> </div> <div class="buttons"> <button class="button is-primary">Primary</button> <button class="button is-link">Link</button> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button> </div> <div class="buttons"> <button class="button is-primary is-light">Light</button> <button class="button is-link is-light">Light</button> <button class="button is-info is-light">Light</button> <button class="button is-success is-light">Light</button> <button class="button is-warning is-light">Light</button> <button class="button is-danger is-light">Light</button> </div> <p class="is-size-4">Button Sizes</p> <div class="buttons"> <button class="button is-small">Small</button> <button class="button">Default</button> <button class="button is-normal">Normal</button> <button class="button is-medium">Medium</button> <button class="button is-large">Large</button> </div> <div class="buttons are-large"> <button class="button">Default</button> <button class="button">Default</button> <button class="button">Default</button> </div> <p class="is-size-4">Other Styles</p> <div class="buttons"> <button class="button is-outlined">Outlined</button> <button class="button is-primary is-outlined">Outlined</button> </div> <div class="buttons"> <button class="button is-primary is-inverted">Inverted</button> <button class="button is-primary is-inverted is-outlined">Invert Outlined</button> </div> <div class="buttons"> <button class="button is-rounded">Rounded</button> <button class="button is-primary is-rounded">Rounded</button> </div> <div class="buttons"> <button class="button is-focused">Focus</button> <button class="button is-primary is-focused">Focus</button> </div> <div class="buttons"> <button class="button is-active">Active</button> <button class="button is-primary is-active">Active</button> </div> <div class="buttons"> <button class="button is-loading">Loading</button> <button class="button is-primary is-loading">Loading</button> </div> <div class="buttons"> <span class="button is-static">Static</span> </div> <div class="buttons"> <button class="button" title="Disabled button" disabled>Disabled</button> <button class="button is-primary" title="Disabled button" disabled>Disabled</button> </div> <div class="buttons"> <button class="button"> <span class="icon is-large"> <i class="fas fa-home"></i> </span> </button> </div> <button class="delete is-small"></button> </body> </html>
The below screenshot shows the browser output of the above code:
Tag
A tag is a small label. The tag is the main class used to create a tag.
There are 2 additional size classes.
They are,
- is-medium
- is-large
Furthermore, similar to buttons, you can add the below size classes to change the size of multiple tags.
- are–medium
- are-large
You can use the is-$color classes to add colors to the tags and the is-rounded class to create a rounded tag. The tags class is used to create a list of tags.
Furthermore, you can use addons with tags.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-4">Tag</p> <span class="tag"> Tag </span> <p class="is-size-4">Tag List</p> <div class="tags"> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> </div> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Progress Bar
A progress bar is an indicator of the progress of a particular process. Progress is the main class used to create a progress bar. You can use the is-$color classes to add colors to the progress bars.
There are 3 additional size classes.
They are,
- is-small
- is-medium
- is-large
If you remove the value attribute, the progress bar will be shown as an indeterminate progress bar.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-4 has-text-primary">Basic Progress Bar</p> <progress class="progress" value="35" max="100">35%</progress> <p class="is-size-4 has-text-primary">Indeterminate Progress Bar</p> <progress class="progress" max="100">35%</progress> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Notification
Notifications are used to show some important message to a user. The notification class is the main class used to create a notification.
You can use the is-$color classes to add colors to the notifications.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container mt-2"> <div class="notification is-primary"> <button class="delete"></button> Some text... </div> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Table
Tables are another commonly used element in Bulma. The table is the main class used to create a table.
Below shows the structure of a table (the relevant tags have been shown).
- <table>
- <caption>
- <thead>
- <tbody>
- <tfoot>
- <tr>
- <th>
- <td>
You can use the below classes to style tables:
- is-bordered – Add borders to all the cells
- is-striped – Add stripes to the table
- is-narrow – Make the cells narrower
- is-hoverable – Add a hover effect on each row
- is-fullwidth – For a fullwidth table
- table-container – To create a scrollable table
You can also combine the above classes as shown in the below example:
Let’s see an example.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"> <caption>Student Marks</caption> <thead> <tr> <th>Student Name</th> <th>Total Marks</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>320</td> </tr> <tr> <td>Bob</td> <td>298</td> </tr> <tr> <td>Ann</td> <td>342</td> </tr> </tbody> </table> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Image
Images are another commonly used element in Bulma. The image class is the main class used to create an image.
There are 7 dimension classes for fixed square images.
They are,
- is-16×16
- is-24×24
- is-32×32
- is-48×48
- is-64×64
- is-96×96
- is-128×128
There are 16 ratio modifiers.
They are,
- is-square (or 1 by 1)
- is-1by1
- is-5by4
- is-4by3
- is-3by2
- is-5by3
- is-16by9
- is-2by1
- is-3by1
- is-4by5
- is-3by4
- is-2by3
- is–3by5
- is–9by16
- is-1by2
- is-1by3
The is-rounded class is used to create rounded images.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-4">Image</p> <figure class="image is-64x64"> <img src="https://bulma.io/images/placeholders/64x64.png"> </figure> <p class="is-size-4">Rounded Image</p> <figure class="image is-64x64"> <img class="is-rounded" src="https://bulma.io/images/placeholders/64x64.png"> </figure> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Bulma Components
Breadcrumb
A breadcrumb helps to identify the location of the current page. The breadcrumb class is the main class used to create a breadcrumb. The is-active class is added to the last <li> element to indicate the current page.
The below 2 classes can be used to change the default alignment of breadcrumbs:
- is-centered
- is-right
There are 3 additional sizes.
They are,
- is-small
- is-medium
- is-large
You can use one of the following separators with breadcrumbs.
- has-arrow-separator
- has-bullet-separator
- has-dot-separator
- has-succeeds-separator
Also, you can use Font Awesome icons with breadcrumbs.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <!--link Font Awesome--> <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> </head> <body> <div class="container"> <p class="is-size-4">Basic Breadcrumbs</p> <nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <p class="is-size-4">Breadcrumb Alignments</p> <nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb is-centered" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb is-right" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <p class="is-size-4">Breadcrumbs with Icons</p> <nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li> <a href="#"> <span class="icon is-small"> <i class="fas fa-home" aria-hidden="true"></i> </span> <span>Home</span> </a> </li> <li> <a href="#"> <span class="icon is-small"> <i class="fas fa-laptop-code" aria-hidden="true"></i> </span> <span>Bulma</span> </a> </li> <li class="is-active"> <a href="#"> <span class="icon is-small"> <i class="fas fa-ellipsis-h" aria-hidden="true"></i> </span> <span>Breadcrumbs</span> </a> </li> </ul> </nav> <p class="is-size-4">Breadcrumb Separators</p> <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <p class="is-size-4">Breadcrumb Sizes</p> <nav class="breadcrumb is-small" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb is-medium" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> <nav class="breadcrumb is-large" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bulma</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li> </ul> </nav> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Card and Message
Card
A card is a boarded container. The card is the main class used to create this component.
The structure of a card is shown below (the relevant classes have been shown).
- card
- card-header
- card-header-title
- card-header-icon
- card-image
- card-content
- card-footer
- card-footer-item
If you want you can separately use the card elements like card header and/or card image and/or card content and/or card footer.
Message
A message is a colored block to show a message. The message is the main class used to create this component.
It can contain the below elements (the relevant classes has shown).
- message-header
- message-body
If you want you can remove the message header and keep the message body only.
There are 3 additional sizes.
They are,
- is-small
- is-medium
- is-large
You can use the is-$color classes to add colors to the messages.
Example
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <p class="is-size-4">Card</p> <div class="card"> <header class="card-header"> <p class="card-header-title"> Sample Title </p> </header> <div class="card-content"> <div class="content"> <p>Some text...</p> <p>Some text...</p> <p>Some text...</p> </div> </div> <footer class="card-footer"> <a href="#" class="card-footer-item">Link 1</a> <a href="#" class="card-footer-item">Link 2</a> </footer> </div> <br> <p class="is-size-4">Message</p> <article class="message is-info"> <div class="message-header"> <p>My Message</p> <button class="delete" aria-label="delete"></button> </div> <div class="message-body"> Some text... </div> </article> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Dropdown
A button can be converted into a dropdown. The dropdown is the main class used to create a dropdown. The is-active class is added to the <a> element to indicate the active dropdown item.
The structure of a dropdown is shown below (the relevant classes have been shown).
- dropdown
- dropdown-trigger (for button)
- dropdown-menu
- dropdown-content
- dropdown-item
- dropdown-divider
- dropdown-content
Furthermore, add the is-up class with the dropdown class for dropups.
Let’s see an example.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <!--link Font Awesome--> <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> </head> <body> <div class="dropdown is-active m-5"> <div class="dropdown-trigger"> <button class="button is-warning" aria-haspopup="true" aria-controls="dropdown-menu"> <span>Dropdown button</span> <span class="icon is-small"> <i class="fas fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" role="menu"> <div class="dropdown-content"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item is-active" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> With a divider </a> </div> </div> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Menu
A menu is a type of vertical navigation component. The menu class is the main class used to create a menu. The is-active class is added to the <a> element to indicate the active menu item.
A menu also contains the below classes.
- menu-label
- menu-list
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container mt-2"> <aside class="menu"> <p class="menu-label">HTML</p> <ul class="menu-list"> <li><a>HTML Basics</a></li> <li><a>Advanced HTML</a></li> </ul> <p class="menu-label">CSS</p> <ul class="menu-list"> <li><a>CSS Basics</a></li> <li><a>Advanced CSS</a></li> <li> <a class="is-active">Frameworks</a> <ul> <li><a>Bulma</a></li> <li><a>Bootstrap</a></li> <li><a>Tailwind CSS</a></li> <li><a>Foundation</a></li> </ul> </li> </ul> <p class="menu-label">JavaScript</p> <ul class="menu-list"> <li><a>JavaScript in 30 Days</a></li> </ul> </aside> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Modal
A modal is a dialogue box that appears on top of the page. It can be used to show important messages to users. The modal class is the main class used to create a modal.
It also contains the below classes:
- modal-background
- modal-content
- modal-close
Note: You need to link jQuery to function the modal.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <a class="button is-info modal-open m-2" data-target="#modal">Click Me!</a> <div id="modal" class="modal"> <div class="modal-background"></div> <div class="modal-content"> <div class="box"> Write something here... </div> </div> <button class="modal-close has-background-primary" aria-label="close"></button> </div> <!--link jQuery--> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script> $(".modal-open").click(function() { $(".modal").addClass("is-active"); }); $(".modal-close").click(function() { $(".modal").removeClass("is-active"); }); </script> </body> </html>
The below screenshots show the browser output of the above code:
- Before clicking the button (when the page loads).
- After clicking the button.
A navbar (also known as a navigation bar) is a navigation header that is placed at the top of the page. The navbar is the main class used to create a navbar.
The structure of a navbar is shown below (the relevant classes have been shown):
- navbar
- navbar-brand
- navbar-burger
- navbar-menu
- navbar-start
- navbar-end
- navbar-item
- navbar-link
- navbar-dropdown
- navbar-divider
- navbar-item
- navbar-brand
You can use the is-$color classes to add colors to the navbars.
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="#"> Logo </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Courses </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Profile </a> <div class="navbar-dropdown"> <a class="navbar-item">Settings</a> <a class="navbar-item">My Courses</a> <a class="navbar-item">My Certifications</a> <hr class="navbar-divider"> <a class="navbar-item">Logout</a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-link"> <strong>Chat with Us</strong> </a> </div> </div> </div> </div> </nav> </body> </html>
The below screenshots show the browser output of the above code:
- Before hovering over the profile link (when the page loads)
- After hovering over the profile link.
- On mobile screen
Pagination
Pagination is the process of arranging content into multiple pages. The pagination class is the main class used to create pagination. The is-current class is added to the <a> element to indicate the current page.
The pagination structure is shown below (the relevant classes have been shown).
- pagination
- pagination-previous and pagination-next
- pagination-list
- pagination-link
- pagination-ellipsis
The below 2 classes can be used to change the default alignment of pagination:
- is-centered
- is-right
There are 3 additional sizes.
They are,
- is-small
- is-medium
- is-large
Furthermore, you can add the is-rounded classes for rounded pagination items.
Let’s see an example.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container mt-2"> <nav class="pagination is-centered" role="navigation" aria-label="pagination"> <a class="pagination-previous" title="This is the first page">Previous</a> <a class="pagination-next">Next page</a> <ul class="pagination-list"> <li> <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a> </li> <li> <a class="pagination-link" aria-label="Goto page 2">2</a> </li> <li> <a class="pagination-link" aria-label="Goto page 3">3</a> </li> </ul> </nav> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Tab and Panel
Tab
The tabs class is the main class used to create a tab. The is-active class is added to the <li> element to indicate the active tab.
The below tags/elements are used to create tabs:
- <ul>
- <li>
- <a>
The below 2 classes can be used to change the default alignment of a tab:
- is-centered
- is-right
Also, you can use Font Awesome icons with tabs.
There are 3 additional sizes.
They are,
- is-small
- is-medium
- is-large
Furthermore, you can use the below classes with tabs:
- is-boxed: For more classic style tabs with borders
- is-toggle: For mutually exclusive tabs
- is-toggle with is-toggle-rounded: To round the first and last items
- is-fullwidth: For whole width tabs
You can also combine the above classes for styling.
Panel
The panel class is the main class used to create a panel.
The structure of a panel is shown below (the relevant classes have been shown).
- panel
- panel-heading
- panel-tabs
- panel-block
- control
- input
- button
- panel-icon
You can use the is-$color classes to add colors to the panels.
Example
Let’s see an example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <!--link Font Awesome--> <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> </head> <body> <div class="container mb-2"> <p class="is-size-4">Basic Tabs</p> <div class="tabs"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-4">Tabs with Styles</p> <p class="is-size-6">Boxed Tabs</p> <div class="tabs is-boxed"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-6">Mutually Exclusive Tabs </p> <div class="tabs is-toggle"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-6">Rounded Tabs</p> <div class="tabs is-toggle is-toggle-rounded"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-6">Full-width Tabs</p> <div class="tabs is-fullwidth"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-4">Combining Tabs</p> <div class="tabs is-toggle is-fullwidth"> <ul> <li class="is-active"><a>Item A</a></li> <li><a>Item B</a></li> <li><a>Item C</a></li> </ul> </div> <p class="is-size-4">Basic Panel</p> <article class="panel is-link"> <p class="panel-heading"> Heading </p> <p class="panel-tabs"> <a class="is-active">IT</a> <a>Engineering</a> <a>Accounting</a> <a>Medicine</a> <a>History</a> </p> <div class="panel-block"> <p class="control has-icons-left"> <input class="input is-link" type="text" placeholder="Search"> <span class="icon is-left"> <i class="fas fa-search" aria-hidden="true"></i> </span> </p> </div> <a class="panel-block is-active"> <span class="panel-icon"> <i class="fas fa-book" aria-hidden="true"></i> </span> HTML </a> <a class="panel-block"> <span class="panel-icon"> <i class="fas fa-book" aria-hidden="true"></i> </span> CSS </a> <a class="panel-block"> <span class="panel-icon"> <i class="fas fa-book" aria-hidden="true"></i> </span> JavaScript </a> </article> </div> </body> </html>
The below screenshot shows the browser output of the above code:
Conclusion
Bulma provides several elements and components. There are several modifiers available like colors, sizes, alignments, etc. for styling those elements and components.
We hope this tutorial would have given you a clear understanding of Bulma Elements and Components.
Happy learning!
<<PREV Tutorial | NEXT Tutorial>>