Position the button at the bottom right corner of the form

Question

Position the button at the bottom right corner of the form

I created a basic webpage using Bootstrap 4 with a contact form and I am trying to figure out how to align the button to the bottom right instead of the bottom middle. Can anyone help me achieve this?

https://i.sstatic.net/0Dnz1.jpg

Below is the HTML code for the form:

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

              <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fcedfbfcc8fcedfbfca6ebe7e5">[email protected]</a>" 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>

Also, here is the CSS styling 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;
}

css bootstrap-4

Answer 1

Answer №1

Please utilize the following code snippet to create a button:

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

Custom CSS:

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

Answer 2

Please utilize the following code snippet to create a button:

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

Custom CSS:

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

Answer 3

Answer №2

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

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

form { padding: 75px 25px; }

To enhance the form layout, it is advisable to encapsulate it within a container and set its maximum width to 960px for better presentation.

Answer 4

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

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

form { padding: 75px 25px; }

To enhance the form layout, it is advisable to encapsulate it within a container and set its maximum width to 960px for better presentation.

Answer 5

Answer №3

All you have to do is add the d-flex class, no need for any additional inline CSS.

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

That's all there is to it.

Answer 6

All you have to do is add the d-flex class, no need for any additional inline CSS.

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

That's all there is to it.

Answer 7

Answer №4

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

</div>

Answer 8

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

</div>

Answer 9

Answer №5

Consider this approach.

button {
    margin-left: 50%;
    float : right;
}

An illustration:

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-left: 50%;
  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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c5d4c2c5f1c5d4c2c59fd2dedc">[email protected]</a>" 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. Pell...
          </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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e296879196a296879196cc818d8f">[email protected]</a>" 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 10

Consider this approach.

button {
    margin-left: 50%;
    float : right;
}

An illustration:

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-left: 50%;
  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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c5d4c2c5f1c5d4c2c59fd2dedc">[email protected]</a>" 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. Pell...
          </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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e296879196a296879196cc818d8f">[email protected]</a>" 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 11

Answer №6

To ensure your form remains centered, set its width to 50% and use margin:auto. Additionally, make the inputs inside the form spread out by setting their width to 100%. Wrap your button in a form-group and apply text-align:right to it for responsiveness.

Here's a fiddle for reference: 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;
}
...
...
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 12

To ensure your form remains centered, set its width to 50% and use margin:auto. Additionally, make the inputs inside the form spread out by setting their width to 100%. Wrap your button in a form-group and apply text-align:right to it for responsiveness.

Here's a fiddle for reference: 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;
}
...
...
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Position the button at the bottom right corner of the form

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

HTML code displaying a fixed message at the top of the webpage

Create a new division directly underneath the bootstrap column

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Exploring the functionality of maximizing and minimizing logic in an Angular Bootstrap modal popup

Align component within material-ui grid

Pictures are not aligned at the center of the bigger card container

Ways to horizontally line up text boxes

Is it possible to place a secondary read more button next to the first one using CSS?

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?

Transform a dropdown menu into an inverted footer

What is the code to make an arrow symbol in CSS that represents 'greater than' symbol?

Different floating divisions that are tightly packed adjacent to each other

manipulating dropdown visibility with javascript

Tips for creating a horizontal bar with CSS using the float property

Mosaic-inspired image gallery with HTML and CSS styling

What is the process for triggering data-dismiss after the href has been activated?

Looking for advice on designing a unique Gallery layout using CSS?

Interference in the output of .innerHTML leads to disruption

Guide to Adding a Video Background in Your ASP .NetCore MVC Web Application

When items are set to full width, material ui grid alignItems flex-start only affects the first row