How to put a link on a button with bootstrap

Question

How would one put a link on a button with bootstrap   there are 4 methods in the bootstrap documentation    lt a href     class  btn btn-info  role  button  gt Link Button lt  a gt   lt button type  button  class  btn btn-info  gt Button lt  button gt   lt input type  button  class  btn btn-info  value  Input Button  gt   lt input type  submit  class  btn btn-info  value  Submit Button  gt    The first one doesn t work for me  no button shows  just the text with the link  have a feeling its the theme im using   The second one shows the button which is what i want  but whats the code make the button link to another page when clicked   Cheers

User · Answer

The easiest solution is the first one of your examples:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

The reason it's not working for you is most likely, as you say, a problem in the theme you're using. There is no reason to resort to bloated extra markup or inline Javascript for this.

User · Answer

If you don t really need the button element  just move the classes to a regular link     lt div class  btn-group  gt       lt a href   save 1  class  btn btn-primary active  gt           lt i class  glyphicon glyphicon-floppy-disk  aria-hidden  true  gt  lt  i gt  Save      lt  a gt       lt a href   cancel 1  class  btn btn-default  gt Cancel lt  a gt   lt  div gt    Conversely  you can also change a button to appear like a link    lt button type  button  class  btn btn-link  gt Link lt  button gt

User · Answer

You can just simply add the following code    lt a class  btn btn-primary  href  http   localhost 8080 Home  role  button  gt Home Page lt  a gt

User · Answer

Combining the above answers i find a simply solution that probably will help you too    lt button type  submit  onclick  location href    your link    gt Login lt  button gt    by just adding inline JS code you can transform a button in a link and keeping his design

User · Answer

Another trick to get the link color working correctly inside the  lt button gt  markup   lt button type  button  class  btn btn-outline-success and-all-other-classes  gt      lt a href     style  color inherit  gt  Button text with correct colors  lt  a gt   lt  button gt    Please keep in mind that in bs4 beta e g  btn-primary-outline changed to btn-outline-primary

User · Answer

This is how I solved      lt a href      gt         lt button type  button  class  btn btn-info  gt Button Text lt  button gt      lt  a gt

User · Answer

You can call a function on click event of button    lt input type  button  class  btn btn-info  value  Input Button  onclick   relocate home    gt    lt script gt  function relocate home          location href    www yoursite com       lt  script gt    OR  Use this Code   lt a href   link  class  btn btn-info  role  button  gt Link Button lt  a gt

[html] How to put a link on a button with bootstrap?

Examples related to html

Examples related to twitter-bootstrap

Examples related to button

Examples related to hyperlink