1

I am new to bulma but have been trying to make a simple webpage with it.

I have run into a frustrating problem where I believe one of the classes "button is-large" is forcing elements on my page to be inline.

Here is a minimal code demonstration of what is happening:

  <div class="column" style="height: 200px">
    <a class="button is-fullwidth" style="height: 100%">
       <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
       <p class="title">Print Release</p>
    </a>
  </div>

The elements in the above code will show up inline.

I want the elements inside of the "a tag" to stack on top of one another. When the "a tag" has the class "button is-fullwidth" it forces the two elements to be inline; whereas if this class is removed they will end up on top of one another no issues.

Here is a full jfiddle demonstrating different approaches I have taken to resolve my issue. I have tried three different ways to make these elements appear on new lines but to no avail.

Is this just an inherent property of the "button ..." class? Can I keep the button class while also maintaining new lines?

Abdall
  • 455
  • 1
  • 6
  • 15

2 Answers2

1

The class button is styled using flexbox. The property display: flex makes its contents appear 'inline'. You can learn more about flexbox here and here.

There are several ways to get the layout you want, here is one approach:

  1. Add the .is-block modifier to a.button - This will override the display property, and ensure that block elements will stack. In your example, p is a block element, and img is an inline element. (Alternatively, you could correct this in CSS by adding flex-direction: column to your button.)

  2. Instead of adjusting the height of .column using inline CSS, you could create a new modifier class that can be added to columns when you need a fixed height. I have added is-fixed-height and height-200 to the .column and used some custom CSS to define these.

  3. Bulma gives .button a height of 2.25em. You need to override this with 100%. Again, you could create a modifier class and add it to the button (something like is-height-100), or simply target the button you want with CSS. Both options are preferable than using inline CSS.

  4. The images you are using are too big to allow the text to fit in below the button. Instead of using height: 200px on the column, use min-height. If you must use a height of 200px, you will need to make some adjustments to the image. Let me know and I can try help.

fiddle

.is-fixed-height.height-200 {
  min-height: 200px;
}

.is-fixed-height.height-200 .button {
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
  <div class="block">
    <div class="columns">
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block  is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
    </div>
  </div>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59
  • This is exactly what I was looking for. The fiddle you provided seems to be working for me for now! Just two questions: how did you know button is using flexbox? Why is inline CSS so frowned upon (a link for this answer, as I am assuming it is extensive, is fine)? – Abdall Nov 29 '17 at 15:23
  • Your second question has been asked before, so I will just link you: https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – sol Nov 29 '17 at 15:36
  • Out of curiosity is there a way for me to fit any image (reasonable in size maybe 300px X 300px) into the button? – Abdall Nov 29 '17 at 17:45
  • @Aball Yes, those dimensions will work with the code. Ideally you would add the `.image` class to the image, and wrap it in its own container. You can take a look at the various Bulma components and how they work with images e.g. Card – sol Nov 30 '17 at 11:08
0

You gave the anchor a class of button and full-width

The class button always place content inline

HTML

<a class="btn is-fullwidth" style="height: 100%">
   <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
   <p class="title">Print Release</p>
</a>

CSS

.btn {
text-align: center;
}

I have changed the button class with custom class name btn then I gave it a center align with CSS

Hassan Sani
  • 124
  • 2
  • 9