Centered layout
Before implementing the login box, be sure to first set up the layout. You want the box to be both horizontally and vertically centered:
container: Makes sure that the box will have a maximum width, and won’t reach the edges of the page on wider viewports.columns: Is a wrapper for the single column.column: Will be horizontally centered.box: With its white background and shadow allows its content to be readable on this turquoise webpage.
<sectionclass="hero is-primary is-fullheight"><divclass="hero-body"><divclass="container"><divclass="columns is-centered"><divclass="column"><formclass="box">Login</form></div></div></div></div></section>
Even though you are using is-centered, the content doesn’t look centered. It’s because...