1

I'm struggling with a form (in Bootstrap 4) which takes the whole (fixed) container width, there is nothing else displayed on the screen. It looks okay-ish on smaller screens, but on large ones it's ugly. What is the best practise in these situations?

I've tried:

  • full width input fields, looks too large
  • half width input fields aligned left, looks unintentional, like half of the screen didn't render properly
  • half width input fields, two in a row, stacked next to each other, I think this is an anti-pattern
  • half with input fields aligned center, looks amateur, unnatural

Any suggestion is appreciated!

  • 1
    Given that Bootstrap 4 is a 'mobile-first' design/development framework, you would expect some of the layouts and UI elements to be less than ideal on a full-width desktop display. Some customization of the style and layout can be done, but you need to be weary of not breaking the display for your most commonly used display ratios. – Michael Lai May 12 at 21:51
1

Make it narrow and centered. Make sure it's not so narrow that stuff has be wrap or overflow. If it doesn't look natural, play with adding some dark neutral colors around it. You could even put it in a modal if appropriate, that's what I do for my login form.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.