Bulma - The Inline Imperative of Button Class

Question

Bulma - The Inline Imperative of Button Class

I recently started using Bulma and have been experimenting with creating a basic webpage using it.

I've encountered an annoying issue where the "button is-large" class seems to be making elements on my page display inline.

Below is a simple demonstration of the problem:

  <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 code above are appearing inline instead of stacked vertically.

I would like the contents inside the "a tag" to stack on top of each other. However, adding the "button is-fullwidth" class forces the two elements to display inline. Removing this class resolves the issue, but I want to understand if there's a way to keep the button class while achieving the desired vertical layout.

You can view a full JSFiddle where I've tried different solutions without success.

Is this behavior expected with the "button ..." class in Bulma? Is there a way to maintain the button class and still have the elements appear on separate lines?

html css bulma

Answer 1

Answer №1

The button class is being styled using flexbox, where the property display: flex makes its contents appear inline. To learn more about flexbox, you can check out this guide here and also visit this link.

There are various ways to achieve the desired layout, but here is one suggested approach:

Add the .is-block modifier to a.button - This will override the display property and ensure that block elements stack properly. Alternatively, you can address this in CSS by adding flex-direction: column to your button.
Instead of adjusting the height of .column with inline CSS, consider creating a new modifier class to set fixed heights as needed. For example, you could use classes like is-fixed-height and height-200 for columns, along with some custom CSS definitions.
Bulma assigns a height of 2.25em to .button, which may need to be overridden with 100%. It's recommended to create a modifier class like
```
is-height-100</code) or target the specific button with CSS directly, rather than relying on inline styles.</p></li>
<li><p>If the images used are too large, making it difficult for text to fit below the buttons, instead of setting <code>height: 200px
```
for the column, try using min-height. If a fixed height is necessary, adjustments might be required for the images. Feel free to reach out for assistance if needed.

View the 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>

Answer 2

The button class is being styled using flexbox, where the property display: flex makes its contents appear inline. To learn more about flexbox, you can check out this guide here and also visit this link.

There are various ways to achieve the desired layout, but here is one suggested approach:

Add the .is-block modifier to a.button - This will override the display property and ensure that block elements stack properly. Alternatively, you can address this in CSS by adding flex-direction: column to your button.
Instead of adjusting the height of .column with inline CSS, consider creating a new modifier class to set fixed heights as needed. For example, you could use classes like is-fixed-height and height-200 for columns, along with some custom CSS definitions.
Bulma assigns a height of 2.25em to .button, which may need to be overridden with 100%. It's recommended to create a modifier class like
```
is-height-100</code) or target the specific button with CSS directly, rather than relying on inline styles.</p></li>
<li><p>If the images used are too large, making it difficult for text to fit below the buttons, instead of setting <code>height: 200px
```
for the column, try using min-height. If a fixed height is necessary, adjustments might be required for the images. Feel free to reach out for assistance if needed.

View the 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>

Answer 3

Answer №2

You assigned the anchor an attribute of button and full-width

The attribute button will always display 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 modified the button attribute to a custom attribute name btn, then applied a center alignment using CSS

Answer 4

You assigned the anchor an attribute of button and full-width

The attribute button will always display 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 modified the button attribute to a custom attribute name btn, then applied a center alignment using CSS

Bulma - The Inline Imperative of Button Class

Answer №1

Answer №2

Similar questions

The two Bootstrap columns are not displaying properly on the screen

Creating HTML using JavaScript

Navigation bar collapse items are not properly aligned in the layout

Control other inputs according to the chosen option

What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

Click on link after animation has finished

Using jQuery, JavaScript, and PHP, we can easily implement the functionality to disable the form and submit button

Which is better for displaying HTML content: WebView or TextView?

Problem occurs when tab links vanish after clicking on another part of the website

Is it possible to divide searches into separate divs?

Fetching the added information using ajax

photos arranged in rows rather than a single row

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

Retrieve information from a Django model in mysql based on user input

Optimizing HTML Borders

Carousel With Multiple Items Displayed Simultaneously In Bootstrap

Loading two scripts in sequence, the first utilizing the "src" attribute while the second is an inline script

The WebView.HitTestResult method is currently only receiving <img src> elements and not <a href> elements

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set