Checkbox in Bootstrap should be displayed before the submit button on smaller screens

Question

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck.

In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. However, I need a checkbox to appear before the submit button on small screens, while it's fine for it to be displayed below the input fields on larger screens.

            <form method="post">
              <div class="row">
                <div class="col-sm">
                  <input id="email" name="email" type="text" class="required email form-control form-rounded" placeholder="Email">
                </div>
                <div class="col-sm">
                  <input type="text" class="form-control form-rounded" placeholder="Number">
                </div>
                <div class="col">
                  <input name="comp" id="comp" type="text" class="form-control form-rounded" placeholder="Company">
                </div>                  
                <div class="col-sm">
                  <input type="submit" name="submit" id="subscribesubmit" class="button btn-block" value="Sign up">
                </div>
              </div>
              <div id="contactconsent" class="d-flex justify-content-center margin-top-small">
                  <input type="checkbox" name="consent" id="contactconsentcheck">
                  <label class="checkbox-inline" for="contactconsentcheck">
                    Lorem ipsum dolor sit amet
                  </label>
                </div>
            </form>

I initially thought about adjusting margins with media queries, but it doesn't seem like the best approach. Any ideas?

Thank you

css bootstrap-4

Answer 1

Answer №1

Here is an example you can try out. Make sure to click the "Full Page" button and then click on "Run code snippet" to adjust the size of the demo window.

.custom-form {
  display: flex;
}

input {
  margin: 0;
}

.text-fields {
  flex-direction: row;
}

.text {
  margin-bottom: 4px;
  width: 200px;
  height: 22px;
}

.submit-button {
  margin-left: 10px;
  width: 80px;
  height: 30px;
}

@media screen and (max-width: 767px) {
  .custom-form {
    flex-direction: column;
  }
  
  .text-fields {
    display: flex;
    flex-direction: column;
  }

  .submit-button {
      margin-left: 0;
  }
}

<form class="my-form">
  <div class="inputs">
    <div class="text-fields">
      <input class="text" type="text">
      <input class="text" type="text">
      <input class="text" type="text">
    </div>
    <input type="checkbox">
  </div>
  <input class="submit-button" type="submit" value="Submit">
</form>

Answer 2

Here is an example you can try out. Make sure to click the "Full Page" button and then click on "Run code snippet" to adjust the size of the demo window.

.custom-form {
  display: flex;
}

input {
  margin: 0;
}

.text-fields {
  flex-direction: row;
}

.text {
  margin-bottom: 4px;
  width: 200px;
  height: 22px;
}

.submit-button {
  margin-left: 10px;
  width: 80px;
  height: 30px;
}

@media screen and (max-width: 767px) {
  .custom-form {
    flex-direction: column;
  }
  
  .text-fields {
    display: flex;
    flex-direction: column;
  }

  .submit-button {
      margin-left: 0;
  }
}

<form class="my-form">
  <div class="inputs">
    <div class="text-fields">
      <input class="text" type="text">
      <input class="text" type="text">
      <input class="text" type="text">
    </div>
    <input type="checkbox">
  </div>
  <input class="submit-button" type="submit" value="Submit">
</form>

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

Answer №1

Similar questions

When an input is double-clicked, the message"[object object]" appears on the screen

Bootstrap sticky footer with adjustable height

Minify and group options available for asset managers specifically designed for traditional HTML websites

Automatically Switch Font Colors to Red and Green

Struggling to align the push menu properly within the Bootstrap framework

Transferring items between containers with stylish animations in AngularJS

Unable to retrieve dropdown value using JavaScript and display it in a div

Step-by-step guide on replacing a visible div with a new div when a button is clicked

Designing tables and image galleries using HTML, CSS, and jQuery: A guide

Tips for modifying padding in HTML and CSS?

Mastering the Art of Utilizing content_for and Rendering Partials in Rails 4

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

Changing the background color of a PHP input based on the webpage being viewed - here's how!

clicking on the anchor does not trigger the modal to open

HTML unique flex wrapping

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

Is there a variance in window.innerWidth between Chrome and Firefox?

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

The image fails to reach full width and does not expand correctly when I zoom out

Looking for assistance with resizing and repositioning an image within a viewport?