Add padding/space to Bootstrap Form/Page at bottom

Question

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:

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

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.

score 0 · Accepted Answer · answered Jun 05 '16 at 05:35

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>

score 0 · Answer 2 · edited May 23 '17 at 12:08

You can make the button disabled after the 1st click on the submit button. Following link will help you to get an idea.

http://getbootstrap.com/css/#buttons-disabled

You have to use JavaScript for that. When you submit the form the onsubmit event triggers. So, use that event to call a JavaScript function which change the CSS class of your submit button into disabled state as in the link above. The following link will help you to do that.

Change an element's class with JavaScript

Add padding/space to Bootstrap Form/Page at bottom

2 Answers2