Align two or more elements vertically with bootstrap 4

Navigation
-2

I have a title and an online form within a div I need these to be aligned vertically and horizontally with bootstrap 4. I used the classes align-items-center and justify-content center works but the title of the form is very separate, I want it to be immediately below but in the center.

This is my code 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid ">
      <div class="row d-flex align-items-center justify-content-center fondo">
        <h3 class="text-center  mb-">Suscríbase Aquí </h3>
        <form class="form-inline">
          <div class="form-group my-2">
            <label for="" class="mx-2">Nombre</label>
            <input type="text" class="form-control" placeholder="Ingresa tú nombre">
          </div>
          <div class="form-group my-2">
            <label for="" class="mx-2">Email</label>
            <input type="email" class="form-control" placeholder="Ingresa tú email">
          </div>
          <div class="form-group my-2">
            <button class="btn btn-primary">Enviar</button>
          </div>
        </form>
      </div>
    </div>
    
asked by Jancel Perez 04.01.2019 в 01:58
source

1 answer

0

If the idea is to remove as much space between the title and the form, you can use the class mb-0 in the h3 of the title, which equals the lower margin equal to 0, and the class mt-0 in the containers of fields of the form, this class is equivalent to superior margin equal to 0. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid ">
      <div class="row d-flex align-items-center justify-content-center fondo">
        <h3 class="text-center  mb-0">Suscríbase Aquí </h3>
        <form class="form-inline">
          <div class="form-group mt-0">
            <label for="" class="mx-2">Nombre</label>
            <input type="text" class="form-control" placeholder="Ingresa tú nombre">
          </div>
          <div class="form-group mt-0">
            <label for="" class="mx-2">Email</label>
            <input type="email" class="form-control" placeholder="Ingresa tú email">
          </div>
          <div class="form-group mt-0">
            <button class="btn btn-primary">Enviar</button>
          </div>
        </form>
      </div>
    </div>
    
answered by 04.01.2019 в 02:15
Error url blocked app session facebook Sign XML document with p12 using XADES-BES