Bulma dashboard
Clone or download


Bulma Dashboard

Bulma Dashboard is extension for the Bulma CSS framework that enables you to easily write dashboard-style interfaces with fixed horizontal panels.


The Bulma Dashboard extension is available as an npm package:

npm install bulma-dashboard

You can also download or link to the Sass or CSS files directly.


All functionality is used inside of the dashboard class, which is intended to take up the entire page. Here's an example:

<div class="dashboard">
  <!-- left panel -->
  <div class="dashboard-panel is-one-quarter">

  <!-- main section -->
  <div class="dashboard-main is-scrollable">
    <nav class="navbar is-fixed-top">
      <div class="navbar-brand">
        <span class="navbar-item">
          Bulma Dashbaord

    <section class="section">
      <p class="title">

    <!-- the footer will take up all unused space at the bottom -->
    <footer class="footer">


  <!-- right panel -->
  <div class="dashboard-panel is-small">


You can see an example page in assets/example.html. Here's a screenshot:

Bulma Dashboard screenshot

You can visit that page here.


If you add a Bulma footer in the dashboard main section, it will "stick" to the bottom and fill up all remaining space.


There are a variety of widths available for panels:

Class Width
is-one-quarter 1/4
is-half 1/2
is-one-third 1/3
is-small 15rem
is-medium 25rem
is-large 30rem

By default, panels are 25rem wide. You can change that default using the $dashboard-default-panel-width variable.


You can add the is-scrollable class to any element to make it scrollable.


You can add the has-thick-padding class to a panel to bulk up the padding to double the default.


Variable Default Meaning
$dashboard-default-panel-width 25rem The default panel width if no size modifier is added
$dashboard-default-panel-padding 1.5rem The padding in panels