How to center a section with bulma

Question

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>

ksav · Accepted Answer · 2022-02-12T12:15:17.003

19

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>

edited Feb 12 '22 at 12:15

answered Nov 10 '18 at 22:44

ksav

20,015
6
46
66

3

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! – user41758 Nov 10 '18 at 22:54
1

this solution solve the problem but make the page not responsive, the column is gonna be beside each other even in small screen – brugobi Jun 29 '21 at 14:44

mirek · Answer 2 · 2021-07-07T14:10:38.207

0

I have the <figure> tag only inside the <div class="columns is-centered is-mobile">. And it works for me.

edited Jul 07 '21 at 14:10

answered Jul 07 '21 at 14:01

mirek

1,140
11
10

How to center a section with bulma

2 Answers2