CSS: align input vertically in Bootstrap form

Question

I have a Laravel webapplication that uses plain old css:

I want a simple registration form with a name field, an email field and two password fields. I would like to align them under each other instead of how it is done in the below screenshot

  <form class="form-inline d-flex" action="{{ route('register') }}" method="post" novalidate>
   @csrf
   <input
      type="text"
      class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }} flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0"
      placeholder="Enter name"
      name="name"
      value="{{ old('name') }}"
      required
   >
   @if ($errors->has('name'))
     <span class="invalid-feedback">
        <strong>{{ $errors->first('name') }}</strong>
     </span>
   @endif

   <input
      type="email"
      class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }} flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0"
      placeholder="Enter email"
      name="email"
      value="{{ old('email') }}"
      required
   >
   @if ($errors->has('email'))
     <span class="invalid-feedback">
       <strong>{{ $errors->first('email') }}</strong>
     </span>
   @endif
   ...
   ...
   <button type="submit" class="btn btn-primary btn-block">
       @lang('Create new account')
   </button>
 </form>

The relevant css is the following:

.register-section {
    padding: 10rem 0;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(rgba(22, 22, 22, 0.1)),
            color-stop(75%, rgba(22, 22, 22, 0.5)),
            to(#161616)
        ),
        url("../img/bg-signup.jpg");
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%),
        url("../img/frontend/bg-signup.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.register-section .form-inline input {
    -webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    height: auto;
    font-family: 'Varela Round';
    font-size: 80%;
    letter-spacing: 0.15rem;
    border: 0;
}

How can I ensure the input fields are aligned vertically (with some vertical padding)?

Nina Lisitsinskaya · Accepted Answer · 2019-06-02 20:54:23Z

1

With Bootstrap 4, to make the inputs stacked vertically, when you use the d-flex, you also need to add the flex-column class to the form.

<form class="form-inline d-flex flex-column"...

answered Jun 2, 2019 at 20:54

Nina Lisitsinskaya

1,81814 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wiwa1978 Over a year ago

Thanks. That fixed it indeed. Also added some padding to it via <div class="p-2"></div>

Tim · Accepted Answer · 2019-06-02 19:48:44Z

0

You could use form-groups, like bootstrap uses in their examples: https://getbootstrap.com/docs/4.1/components/forms/

I don't know if you can use the bootstrap grid system with forms, but maybe that could be a solution?

answered Jun 2, 2019 at 19:48

Tim

5615 silver badges23 bronze badges

1 Comment

wiwa1978 Over a year ago

No, surrounding each element with form-group puts all elements on 1 single horizontal row

Collectives™ on Stack Overflow

CSS: align input vertically in Bootstrap form

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related