CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
user1824963
user1824963

Reputation: 101

Bootstrap buttons

I am using the bootstrap v3, and trying to add the href to a button:

<button type="button" class="btn btn-default" href="http://www.example.com" aria-label="Left Align">
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
demo site</button>

However when clicking the button nothing happens, am I doing something wrong?

Upvotes: 0

Views: 264

Answers (6)

Jonathan Odle
Jonathan Odle

Reputation: 69

<a class="btn btn-default btn-lg" href="add url here" role="button"><b>Learn More!</b></a>

Upvotes: -1

Babatunde Calebs
Babatunde Calebs

Reputation: 102

The href attribute is an attribute of the anchor tags. This is why Twitter bootstrap allow you to add the .btn classes to anchor tags also. Therefore, whenever you need to create a link, and you intend to style it as a button, Use the anchor "" tags and for forms that you'd need to submit, or just lunch a modal dialog, you can use the button.

So we can modify your code thus;

OLD:

<button type="button" class="btn btn-default" href="http://www.example.com"
 aria-label="Left Align">
  <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
  demo site</button>

New: 

<a href="btn btn-default" href="http://www.example.com" aria-label="Left Align">
  <span class="glyphicon glyphicon-link" aria-hidden="true"></span>demo site</a>

Upvotes: 0

Dee
Dee

Reputation: 714

Your answer is great. You can use these Buttons in an Page, Post or even a Text Widget.

http://www.bootply.com/GCHTzGZ5K0

<a class="btn btn-success" type="button" href="http://example.com">Success (Green) Button</a>
<a class="btn btn-warning" type="button" href="http://example.com">Warning (Orange) Button</a>
<a class="btn btn-primary" type="button" href="http://example.com">Primary (Blue) Button</a>

Have more questions? Please post a support topic in the forum. http://cyberchimps.com/forum/

Upvotes: 0

oshell
oshell

Reputation: 9103

You cannot just use a href attribute for a button. You have 3 possibilities to solve this.

Option 1 with Javascript

    <button type="button" class="btn btn-default" onclick="window.location.href='http://stackoverflow.com/'" aria-label="Left Align">
                    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
                    demo site
    </button>

Option 2 without javascript

<form action="http://stackoverflow.com/">
    <button type="submit" class="btn btn-default" aria-label="Left Align">
                    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
                    demo site
    </button>  
</form>

Option 3 with another tag (especially for bootstrap)

Furthermore you could just change your button to an anchor tag.

Upvotes: 0

Mefhisto1
Mefhisto1

Reputation: 2228

Either use anchor tag, or handle the redirection in onClick handler

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

Why not use an anchor tag...

<a class="btn btn-default" href="http://www.example.com" aria-label="Left Align">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    demo site
</a>

Demo: http://bootply.com/SbX40AknyT

Upvotes: 5

Related Questions