How to put a link on a button with bootstrap?

user_5579160 0
Viewed 385403

How would one put a link on a button with bootstrap?

there are 4 methods in the bootstrap documentation:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

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

twitter-bootstrap button hyperlink html
11 Answers

This is how I solved

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>
user_44120970

Combining the above answers i find a simply solution that probably will help you too:

<button type="submit" onclick="location.href = 'your_link';">Login</button>

by just adding inline JS code you can transform a button in a link and keeping his design.

user_88304460

You can just simply add the following code;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
user_70909370

I think the most easiest and clean approach is (without any extra javascript functions):

<a class="btn" href="#">
   <i class="fas fa-cloud"></i>
</a>

To use fontawesome icons, you can just put the following link in your header:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

And that's all

user_43610200

As you are asking with Bootstrap, the best option in my opinion is to choose the class btn-link.

<button type="button" class="btn btn-link">Link</button>

If you want the btn-link to send you to another page or activate something such as a modal, you can include the onClick like others suggested.

user_134853430

Just use the anchor tag as a button. Change the role to type as below in bootstrap 5.

<a type="button" class="btn btn-info" href="#">Button</a>
user_41705580

If you really need the button element, a nice trick that I found to make it work looks like this:

  • Create a data attribute with the url that you want to redirect
  • Attach an event listener to fetch the url from the data attribute on element
  • Open the url using window.open or your preferred method

Html file

<button type="button" id="newpagebutton" class="btn btn-primary mt-4 ml-3">Open new page</button>

Javascript file

$( "#newpagebutton" ).attr('data-buttonlink', 'https://www.apple.com')


$( "#newpagebutton" ).click(function() {
  const buttonlink = $("#newpagebutton").data('buttonlink')

  window.open(buttonlink)
});

Have a look at how the implementation works on fiddle.js

user_66367440
Related