How to align button to the right of this textarea

Question

I have a website that uses Bootstrap 4. In my design the contact form looks like this:

But in my actual website it looks like this:

I've tried using floats and i've also tried creating rows and columns to get them to align correctly but nothing works.

 footer input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; display: inline-block; } footer button.btn { display: flex; justify-self: flex-end; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <div class="col-md"> <form action="" method="post"> <div class="row"> <label for="name">Nombre</label> <input type="text" name="name"> <label for="email">Email</label> <input type="text" name="email"><br> <div class="form-group row"> <label for="message">Asunto</label> <textarea name="message" id="" cols="30" rows="10"></textarea> <button type="submit" class="btn btn-info">Enviar</button> </div> </div> </form> </div> 

All of my code: https://codepen.io/Wibblefish/pen/ZVEdqz

Thank you.

Answer 1

Please place your button in out side the form-group div

  footer input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; display: inline-block; } footer button.btn { display: flex; justify-self: flex-end; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <div class="col-md"> <form action="" method="post"> <div class="row"> <label for="name">Nombre</label> <input type="text" name="name"> <label for="email">Email</label> <input type="text" name="email"><br> <div class="form-group row"> <label for="message">Asunto</label> <textarea name="message" id="" cols="30" rows="10"></textarea> </div> <button type="submit" class="btn btn-info">Enviar</button> </div> </form> </div> 

Answer 2

Instead of using custom CSS for alignment and spacing, read the docs and utilize Bootstrap.

<form action="" method="post">
    <div class="form-row mb-2">
        <label for="name" class="col-md-3 text-right">Nombre</label>
        <input type="text" name="name" class="col-md-7 form-control">
     </div>
    <div class="form-row mb-2">
        <label for="email" class="col-md-3 text-right">Email</label>
        <input type="text" name="email" class="col-md-7 form-control">
     </div>
    <div class="form-row mb-2">
        <label for="message" class="col-md-3 text-right">Asunto</label>
        <textarea name="message" id="" cols="30" rows="10"  class="col-md-7 form-control"></textarea>
        <button type="submit" class="btn btn-info col-md-2 align-self-end">Enviar</button>
    </div>
</form>

Demo: https://www.codeply.com/go/nJ0HHdEB1V

With this method you want need all the extra CSS.

Answer 3

You can try making use of bootstrap's flexbox utilities :)

 input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; } footer button.btn { display: flex; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="container p-5 d-flex justify-content-center align-items-center" <form> <div class=" d-flex justify-content-center align-items-center flex-column"> <div class="form-group align-self-start"> <label for="name" class="mx-1">Nombre</label> <input type="text" name="name"> </div> <div class="form-group align-self-start"> <label for="email" class="mx-3">Email</label> <input type="text" name="email"> </div> <div class="form-group d-flex justify-content-center"> <label for="message" class="mx-2">Asunto</label> <textarea name="message" class="mx-2" id="" cols="30" rows="10"></textarea> <button type="submit" class="btn btn-info align-self-end mx-2">Enviar</button> </div> </div> </form> </div> 

Also, here's a working example :)