Bulma: Login form - vertical and horizontal center

[CoderJason123]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

Description

Hello. I am really liking the styles. I only have some minor questions at this point, and it deals with the difficulty in taking something like a login form and centering it both horizontally and vertically. The samples that i found require wrapping in hero tags, columns, etc. Ultimately, it was too verbose for what I want in relation to accessibility.

I need 2 things to move forward.

1. on desktop, i don't want the input widths 100%. Mobile that is great but desktop it's not, how can i do that?

2. How to center a form vertically and horizontally without a lot of extra html elements and tricks, and to keep it accessible-friendly.

Thank you kindly.

[CoderJason123]

I solved it by removing everything on my container except the form, and created a css class like this, which i placed on my top level div. Works great. Leaving this here in case it helps anyone else out.

.centerall {
height: 100vh;
padding: 0;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}

[ghost]

You just needed to add is-desktop and is-vcentered to columns.
display is not flex by default on columns. is-desktop makes it so.

[simvolice]

https://bulma.io/documentation/columns/options/#centering-columns