Align button to bottom right of form

Question

I made a simple page using Bootstrap 4 with a contact form and would like the button to be aligned to the bottom right, rather than bottom middle, of it. How can I accomplish this?

Here's the HTML of the form:

      <div class="row">
        <div class="col center-block">
          <div class="contact">
            <h2>Contact</h2>

              <form action="mailto:test@test.com" method="post" enctype="text/plain">
                <div class="form-group">
                  <input type="text" class="form-control" id="contact-name" placeholder="Name" required>
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
                </div>
                <button type="submit" class="btn btn-dark">Send</button>
              </form>

          </div>
        </div>
      </div>

And the CSS applied to buttons and form elements:

.form-control {
  width: 50%;
  margin: 0 auto;
  border-bottom: 1px solid #888;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0;
  padding: 10px 0px;
}

input[type=text], input[type=email] {
  background-color: WhiteSmoke;
}

button {
  margin-top: 1em;
  margin-bottom: 2em;
}

Answer 1

you need to make the width of your form 50% with margin:auto to keep it centered , and the inputs inside it 100% to fill the width of the form, wrap you button in a form-group and add text-align:right to it, this will keep the responsiveness ,

here's a fiddle : https://jsfiddle.net/takius/j730vdmp/21/

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-family: "Playfair Display", serif;
  padding-top: 0.5em;
}

h2,
h5 {
  text-transform: uppercase;
  /* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding  */
  padding: 0.5em 0;
  margin: 0;
}

.about p {
  padding: 0 4em 2em 4em;
  margin: 0;
  text-align: left;
}

.nav-link {
  text-transform: uppercase;
  color: white;
}

.nav-link:hover {
  color: white;
}

.hero-image {
  background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
  /* Set a specific height */
  height: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  /* Resizes background image to fill entire container */
  background-size: cover;
  position: relative;
}

.about {
  background-color: WhiteSmoke;
}

.portfolio {
  background-color: LightGrey;
}

.contact {
  background-color: WhiteSmoke;
}


/* Removes white space from sides of each column */

.col {
  padding: 0;
}

.footer {
  position: bottom;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  background-color: grey;
}

.footer-tag {
  color: white;
  text-align: left;
  padding: 15px;
}

.fab {
  float: right;
  padding: 10px;
  color: white;
}

.fab:hover {
  color: #4d4d4d;
}

.form-control {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #888;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0;
  padding: 10px 0px;
}

input[type=text],
input[type=email] {
  background-color: WhiteSmoke;
}

button {
  margin-top: 1em;
  margin-bottom: 2em;
}

form {
  width: 50%;
  margin: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#portfolio">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">Contact</a>
    </li>
  </ul>

</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="hero-image">
        <div class="hero-text text-white">
          <h1>Name</h1>
          <h5>Web developer</h5>
          <form action="mailto:test@test.com" method="post" enctype="text/plain">
            <button class="btn btn-dark">Contact Me</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <section id="about">
    <div class="row">
      <div class="col">
        <div class="about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed
            justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales
            eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas
            in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="portfolio">
    <div class="row">
      <div class="col">
        <div class="portfolio">
          <h2>Portfolio</h2>
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="row">
      <div class="col center-block">
        <div class="contact">
          <h2>Contact</h2>

          <form action="mailto:test@test.com" method="post" enctype="text/plain">
            <div class="form-group">
              <input type="text" class="form-control" id="contact-name" placeholder="Name" required>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
            </div>
            <div class="form-group" style="text-align:right;">
              <button type="submit" class="btn btn-dark">Send</button>


            </div>
          </form>

        </div>
      </div>
    </div>
  </section>

</div>
<!-- End of container-fluid -->

<div class="footer">
  <a href="https://www.linkedin.com/in/name/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
  <a href="https://github.com/name" target="_blank"><i class="fab fa-github fa-2x"></i></a>
  <a href="https://codepen.io/name/"><i class="fab fa-codepen fa-2x"></i></a>
  <div class="footer-tag">
    <p>Created by Name.</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

You could do something like.

button {
    margin-right: 25%;
    float : right;
}

Working example:

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-family: "Playfair Display", serif;
  padding-top: 0.5em;
}

h2, h5 {
  text-transform: uppercase;
  /* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding  */
  padding: 0.5em 0;
  margin: 0;
}

.about p {
  padding: 0 4em 2em 4em;
  margin: 0;
  text-align: left;
}

.nav-link {
  text-transform: uppercase;
  color: white;
}

.nav-link:hover {
  color: white;
}

.hero-image {
  background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  /* Resizes background image to fill entire container */
  background-size: cover;
  position: relative;
}

.about {
  background-color: WhiteSmoke;
}

.portfolio {
  background-color: LightGrey;
}

.contact {
  background-color: WhiteSmoke;
}

/* Removes white space from sides of each column */
.col {
  padding: 0;
}

.footer {
  position: bottom;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  background-color: grey;
}

.footer-tag {
  color: white;
  text-align: left;
  padding: 15px;
}

.fab {
  float: right;
  padding: 10px;
  color: white;
}

.fab:hover {
    color: #4d4d4d;
}

.form-control {
  width: 50%;
  margin: 0 auto;
  border-bottom: 1px solid #888;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0;
  padding: 10px 0px;
}

input[type=text], input[type=email] {
  background-color: WhiteSmoke;
}

button {
  margin-top: 1em;
  margin-bottom: 2em;
  margin-right: 25%;
  float : right;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <!-- Grey horizontal navbar that becomes vertical on small screens -->
  <nav class="navbar sticky-top navbar-expand-sm bg-dark">

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>

  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="hero-image">
          <div class="hero-text text-white">
            <h1>Name</h1>
            <h5>Web developer</h5>
            <form action="mailto:test@test.com" method="post" enctype="text/plain">
              <button class="btn btn-dark">Contact Me</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <section id="about">
      <div class="row">
        <div class="col">
          <div class="about">
            <h2>About</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="portfolio">
      <div class="row">
        <div class="col">
          <div class="portfolio">
            <h2>Portfolio</h2>
          </div>
        </div>
      </div>
    </section>

    <section id="contact">
      <div class="row">
        <div class="col center-block">
          <div class="contact">
            <h2>Contact</h2>

              <form action="mailto:test@test.com" method="post" enctype="text/plain">
                <div class="form-group">
                <input type="text" class="form-control" id="contact-name" placeholder="Name" required>
                </div>
                <div class="form-group">
                <input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
                </div>
                <div class="form-group">
                <input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
                </div>
                <button type="submit" class="btn btn-dark">Send</button>
              </form>

          </div>
        </div>
      </div>
    </section>

  </div> <!-- End of container-fluid -->

  <div class="footer">
    <a href="https://www.linkedin.com/in/name/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
    <a href="https://github.com/name" target="_blank"><i class="fab fa-github fa-2x"></i></a>
    <a href="https://codepen.io/name/"><i class="fab fa-codepen fa-2x"></i></a>
    <div class="footer-tag">
    <p>Created by Name.</p>
  </div>

Answer 3

<div class="form-group col-md-12 text-right mt-2">

<button type="submit" class="btn btn-primary pl-4 pr-4">Submit</button>

</div>

Answer 4

You just use d-flex class nothing else and no need to use inline CSS

<div class="d-flex flex-row-reverse">
    <button type="submit" class="btn btn-dark" >Send</button>
</div>

That's it.

Answer 5

Use this code for button:

<div class="bt-btn">
  <button type="submit" class="btn btn-dark">Send</button>
</div>

CSS:

.bt-btn {
    margin: 0 auto;
    text-align: right;
    width: 50%;
}

Answer 6

button {
 margin-top: 1em;
 margin-bottom: 2em;
 float: right;
 margin-right: 25%;
}

#contact { max-width: 960px; margin: 0 auto; }

form { padding: 75px 25px; }

I would also recommend adding a container around it and give it a max-width of 960px. The whole form area.