How to center a section with bulma

17,141

Have a look at the Bulma docs for Centering columns

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-half">
        <figure>
          <img src="https://placeimg.com/640/480/any" alt="Melton Hill Lake">
        </figure>
      </div>
    </div>
  </div>
</section>
Share:
17,141

Related videos on Youtube

user41758
Author by

user41758

Updated on June 04, 2022

Comments

  • user41758
    user41758 almost 2 years

    I am using bulma framework , and all the content is to the left, how would I center the content on the page? For example this image is to the left.

    <section class="section">
      <div class="container">
        <div class="column">
          <figure>
            <img src="/assets/images/norris-lake.jpg" alt="Melton Hill Lake">
          </figure>
        </div>
      </div>
    </section>

  • user41758
    user41758 over 5 years
    Thanks, I am still trying to go threw documents, I find myself lost at times , at where I need to look. I tried the "is-centered" but did not help so the "is-half" with it is the key. Thanks for help!
  • brugobi
    brugobi almost 3 years
    this solution solve the problem but make the page not responsive, the column is gonna be beside each other even in small screen