How to create a Cancel button in Bootstrap

Question

I have the following Bootstrap markup:

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.

Is there a form cancel button capability in Bootstrap?

Trixy

What do u mean by leaving the form? U probably need to write ur own JS logic for the button, check this #18408332 – Junitajunius

Why don't you just make a button outside of the form? The cancel button outside of the form can act as a "back" button. – Ebert

Actually per @NaturalLam's link to another SO question, I simply added onclick="window.location='http://example.com';return false;" attribute to the button tag and got the desired result. Thanks. – Trixy

Answer 1

Change your code to the following:

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>

Kao

If you do that, Cancel and Submit would look completely different in Bootstrap since one is a link and the other is a button. That's not the idea. – Unguinous

This is the correct answer. The btn classes style links the same way as buttons. They will look alike. At the same time the links will always work, with or without JavaScript. Best for accessibility. With no coding overhead. (I would avoid using ids, though.) – Sclar

Changing this to <a class="btn btn-link"> would be a better option for this. – Lhasa

For bootstrap 4 (alpha), use btn-secondary instead of btn-default, otherwise it will not look like a button. @probie: Do not use btn-link if you want a link to look like a button. It makes buttons look like links, not the other way round. – Neolith

Answer 2

simply set the type attribute to reset as shown below;

<button type="reset" class="btn btn-default pull-right">Cancel</button>

Phonon

type="reset" will reset the form back to the original values, which isn't what the question poster is asking. They want a cancel button which will jump to another page. – Starch

Maybe not but it does solve a lot of questions like this. – Cottonade

Answer 3

A direct method is to use onclick="history.back()" Like so:

<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>

It is supported in all browsers at the time of this posting

Armington

Answer 4

if you would like to keep both elements as <button>. You can create a click handler with jQuery:

$('#cancel').click(() => {
    location.href = '../' //returns to parent
})

Ara