Search code examples
cssreactjsbulma

bulma flex justify content not working in reactjs

I want to make the {curdatetime} to stick to the left and the {title} to stay in the middle. so I'm trying to use flex justify content space between with bulma css but the all elements still sticks to the left..

this is my code

    <>
      <header className="has-text-centered">
        <h1>LoliGhaya</h1>
      </header>
      <div className='is-flex-justify-content-space-between mb-2'>
        <small>{curdatetime}</small>
        <strong className='is-size-4'>{title}</strong>
      </div>
    </>
Solution

  • After looking at the documentation, you're using it a bit wrong.

    This should work for you.

        <>
      <header className="has-text-centered">
        <h1>LoliGhaya</h1>
      </header>
      <div className='is-flex is-justify-content-space-between mb-2'>
        <small>{curdatetime}</small>
        <strong className='is-size-4'>{title}</strong>
      </div>
    </>