Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    ^ i fixed it by creating my own class and setting a fixed width
    new issue: I have a <div className="container is-fullhd"> with a <h1 className="title"> and a <hr/>. If I don't create a really long paragraph, I can see that the container is being created quite small (only 36px which seems to be the width of my h1 element). I would think that the is-fullhd would take care of making my container take up the full available width but it's not. what am i missing?
    Leo Le Bouter
    hi, is there a reference-like documentation for bluma instead of the tutorial-like documentation?
    ho, I just realize it's normal that changelog has not been updated since 0.7.5 sorry
    I thought npm was not working anymore ^^
    Leo Le Bouter
    guys I've been looking at css for a little while and found it heavily messy
    Bulma is like heaven
    Consistent, meaningful
    Thanks for wrapping the mess for me
    Bootstrap is just as confusing as raw CSS
    Leo Le Bouter
    CSS is confusing because of backwards compatibility and the diverse browser eco-system I guess
    Leo Le Bouter
    cards don't support sizes aww
    Leo Le Bouter
    hmm, how would I align buttons left and right horizontally on the same row?
    Leo Le Bouter
    Did it with level
    moritz bust
    Hello Everyone. Obligatory "I am quite new to bulma"...
    How would do I horizontally center the content of a (fullheight) hero?
    <section class="hero is-fullheight-with-navbar">
      <div class="hero-body">
        <div class="columns is-centered">
          <form class="column is-narrow">
            <!-- should be centered -->
    moritz bust
    I needed to wrap the columns with a <div class="container">
    Alexsandro Souza Pereira
    Someone there make skeleton loader with bulma?
    Which is technic are you using?
    Dawid Andrzejewski
    Hi, everyone! I'm the author of Bulma Builder. It's a new tool for fast interface prototyping. Today, we're launching it on Product Hunt! If you want to help spread the word about Bulma, here is a link: https://www.producthunt.com/posts/bulma-builder
    Scott Williams
    Super cool. I dig it.
    Nicola Biancolini
    Hi everyone, can I ask you a question about customization with sass?
    Engjell Bislimi
    Hello, I have an ancestor div with 2 parents which both of them also have 2 child. My issue is when one of my child is moving height the others one follow. Is there a way to not be dependant of the other.
    Michael Andreuzza
    Hello everyone, did not know about this channel, very cool stuff .
    Michael Andreuzza
    Hey ! I have created this site for Bulma, I have collected things related to Bulma.
    • Templates using the just the CDN for those who just want to use it straight out of the box and play around with it.
    • Snippets.
      All the feedbacks are always welcome.
    If you have any recommendation let me know
    0/10 too expen$$$ive
    Julian Johannesen
    Hi guys. I'm sure that this has come up before so I apologize ahead of time, but does anyone know how to style a button as a navbar submenu link in a way that preserves the down arrow? I'm running into an issues with .navbar-link:not(.is-arrowless)::after
    Julian Johannesen
    FYI - I was able to do with style={{background:'none', border:'none', padding:'0.5rem 0.75rem''}} and then styling the pseudo element ::after to be a bit less to the right, but I was wondering if there's a more official or elegant way to do it.
    Sebastian Rapp
    Hello guys, I have a question concerning design. using the Bulma fileupload what would be the best practice to show multiple selected filenames? Right now I just show "Multiple files selected" in the label for the filename, but this is not really great.
    What is the best way to bring the validation message to the next line as in the first field? The has-addons class and the mm button destroy the alignment so the help message is always tied to the same line...

    I don't know if there is a more active Bulma chat but I'm looking to nest dropdowns in the navbar and I'm having a hard time due to a block of css:

    .navbar-item.is-active .navbar-dropdown,
    .navbar-item.is-hoverable:focus .navbar-dropdown,
    .navbar-item.is-hoverable:focus-within .navbar-dropdown,
    .navbar-item.is-hoverable:hover .navbar-dropdown {
        display: block;

    This results in all child dropdowns to become active when the parent is active. The bothersome thing is, all that needs to be added is a > prior to each .navbar-dropdown which seems to function fine. I'm not sure how to work around it without modifying the base code.

    update: I did find a way. It's not pretty by any means and perhaps adding in a > should be considered and also for the active styling but what I have works at least in desktop view. Will probably need additional code to make it work on mobile.
    @include desktop {
        .navbar-item.is-active > .navbar-dropdown .navbar-dropdown .navbar-item,
        .navbar-item.is-hoverable:focus > .navbar-dropdown .navbar-item,
        .navbar-item.is-hoverable:focus-within > .navbar-dropdown .navbar-item ,
        .navbar-item.is-hoverable:hover > .navbar-dropdown .navbar-item {
            > .navbar-dropdown {
                display: none;
            &.is-active > .navbar-dropdown,
            &.is-hoverable:focus > .navbar-dropdown,
            &.is-hoverable:focus-within > .navbar-dropdown,
            &.is-hoverable:hover > .navbar-dropdown {
                display: block;

    Can I add Bulma tags to children of a menu-list item in a way that keeps them in the same row as the menu item? I.e.:

      <ul class="menu-list">
          <a>Posts</a> <!-- doesn't seem to like siblings sitting on the same line -->
          <span class="tag is-info">123</span>

    I want to use tags to display the number of items in a given category pointed to by the menu link.

    Nicole Kassia

    Hey Guy's I am struggling with the <figure image setup, I have a ratio on the image set like

    <figure class="image is-square">
                                    <img src="{{asset('/storage/products/images/'.$product->images->first()->image_thumb )}}" alt="{{ $product->name }}">

    and that is working but I need to scale down the image to 250x250 I tried setting up the css like:

    wrong button

    .card-image figure img {
        height: 250px !important;
        width:  250px !important;

    but the height and width of the figure is still computer to 428

    Mustapha Abdul-Rasaq
    is there a class in bulma to remove navbar-item hover background color?
    hey guys, is there a mainted text editor like this https://github.com/vue-bulma/quill ? hasn't been updated in 2+ years
    @geekmaros just remove it yourself? copy the bulma.css file in your public folder , check chrome devtools to see the line of code you're interested in and comment it out

    should be something like

    .navbar-item:hover { 
       background-color: #ccc;

    either comment that out, or (bad idea) overwrite it with !important

    Mustapha Abdul-Rasaq
    @xlcrr thanks a bunch it did solved it ...
    I found a nice page based on bulma.
    I don't know if there is a better way to hero-video.
    So I'm trying to use the example here: https://bulma.io/documentation/components/menu/ but I end up with bullet points in my menu
    I have no trouble with any of Bulma's other components so I'm pretty stumped..

    I got a question, Im trying to add several themes to the page with a body class selector, and I got the following scss file:

    @import "_variables.scss";
    @mixin mybody($themename, $values) {
      $primary: map-get($values, primary);
      .#{$themename} {
          @import 'bulma/bulma';
    @each $name, $values in $themes {
      @include mybody($name, $values);

    Is there any way to achieve this overwrite of $primary variable with the @use directive or @import in any way?
    This code generates an error at the @import statement because its not a good place to have it :(

    I can overwrite the single elements primary and other colors in the nested $themename classes, its quite forward, but I'd really like to be able to overwrite the default variables in a way like above, so I dont have to write my own color in every bulma object I use in my site.