user982124 user982124 - 6 months ago 23
jQuery Question

Add padding/space to Bootstrap Form/Page at bottom

I'm working on a Bootstrap Form which has the reset/submit buttons at the bottom of the form. When users on the iPhone go to click the Submit button, as it appears at the very bottom the screen, the Safari icons appear first, then the user has to click the Submit button a 2nd time.

Here's the code of the end of the form:



<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /container -->


<script src="assets/js/jquery.min.js"></script>

</body>

</html>





Here's a screenshot showing how it looks before users click the Submit button:

enter image description here

and here's what you see when you first click the Submit button:

enter image description here

forcing them to click the Submit button for the 2nd time. Looking for advice on best way to add some space/padding after the form/buttons to provide more space so when they scroll to the bottom they won't have to click twice.

Answer

If you want additional spacing you could give margin-bottom like 50px for the form

.form{
  position: relative;
  margin-bottom: 50px;
}

OR

This is not recommended though. You could use bootstrap to create a row that could take up some default space.

<div class="row">
  <div class="col-md-12">
  </div>
</div>

Comments