Search code examples
htmlcssalignmentbulma

Bulma: How to align an element left, but center it on mobile

Is there a "purely Bulma way" (without custom css) of aligning an element left on desktop, but centering it on devices smaller than an iPad? I'd like to avoid any custom css in order to learn using Bulma properly.

I've tried using levels and it centers nicely on smaller devices, but doesn't align left on desktop as you can see on the screenshot. The weird thing is that it works as expected on the right side of the footer:

<footer class="section footer is-widescreen">
  <div class="container">

      <div class="columns">
        <div class="column level-left">
          <div class="buttons level-item ">
            <a class="button" target="_blank" href="https://deletefacebook.com/"><img src="/placeholder/icons/facebook-f.svg" alt=""></a>
            <a class="button" target="_blank" href="#"><img src="/placeholder/icons/instagram.svg" alt=""></a>
            <a class="button" target="_blank" href="https://twitter.com"><img src="/placeholder/icons/twitter.svg" alt=""></a>
          </div>
        </div>

        <div class="column has-text-centered has-text-right-tablet">
          <p class="subtitle is-6">&copy; {{ now.Year }} codeklasse</p>
          <a href="https://bulma.io">
            <img
              src="https://bulma.io/images/made-with-bulma.png"
              alt="Made with Bulma"
              width="128"
              height="24">
          </a>
        </div>
    </div>
  </div>
</footer>

Alternatively I can align the content on desktop left, but can't center it on mobile :

<footer class="section footer is-widescreen">
    <div class="container">
        <div class="columns">

            <div class="column ">
                <div class="buttons has-text-centered has-text-left-tablet">
                    <a class="button" target="_blank" href="https://deletefacebook.com/"><img src="/placeholder/icons/facebook-f.svg" alt=""></a>
                    <a class="button" target="_blank" href="#"><img src="/placeholder/icons/instagram.svg" alt=""></a>
                    <a class="button" target="_blank" href="https://twitter.com"><img src="/placeholder/icons/twitter.svg" alt=""></a>
                </div>
            </div>

            <div class="column has-text-centered has-text-right-tablet">
                <p class="subtitle is-6">&copy; {{ now.Year }} codeklasse</p>
                <a href="https://bulma.io">
                    <img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
                </a>
            </div>
        </div>
    </div>
</footer>

EDIT:

The creator of Bulma kindly provided a workaround with custom CSS.

Solution

  • Look at the modifier's table

    https://bulma.io/documentation/helpers/typography-helpers/

    It doesn't look consistent to me for example

    has-text-left-mobile applies to mobile size only.
    has-text-left-tablet applies to tablet and all larger sizes.

    So you cannot assume that has-text-centered will apply to the remaining sizes, you should specify both mobile and tablet size.

    On your second code

    <div class="buttons has-text-centered-mobile has-text-left-tablet">

    EDIT

    Looking at it again, the problem is with class "buttons" which is flex and doesn't obey text-align. So you can just remove "buttons" class.

    <div class="has-text-centered has-text-left-tablet">