CODEWITHSUNDEEP
htmltwitter-bootstrapbuttonhyperlink
Philayyy
Philayyy

Reputation: 1927

How to put a link on a button with bootstrap?

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

Upvotes: 148

Views: 495620

Answers (12)

Maks Razumovsky
Maks Razumovsky

Reputation: 11

<div>
  <a href='#' className='text-decoration-none'>
    <button className="btn btn-primary btn-lg px-5 d-flex justify-content-center" type='submit'>Sign In</button>
  </a>
</div>

Upvotes: 1

JCassio
JCassio

Reputation: 13

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

Upvotes: 0

N Djel Okoye
N Djel Okoye

Reputation: 1078

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>

Upvotes: 6

Francisco Blasco Garma
Francisco Blasco Garma

Reputation: 31

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.

Upvotes: 2

Sirojiddin Komolov
Sirojiddin Komolov

Reputation: 791

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

Upvotes: 0

Andreas Bergstr&#246;m
Andreas Bergstr&#246;m

Reputation: 14610

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.

Upvotes: 232

Ish
Ish

Reputation: 414

You can just simply add the following code;

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

Upvotes: 4

ecg
ecg

Reputation: 239

This is how I solved

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

Upvotes: 15

SAUMYA
SAUMYA

Reputation: 1544

You can call a function on click event of button.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

OR Use this Code

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

Upvotes: 85

silvan
silvan

Reputation: 1113

Another trick to get the link color working correctly inside the <button> markup

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

Please keep in mind that in bs4 beta e.g. btn-primary-outline changed to btn-outline-primary

Upvotes: 20

H. A.
H. A.

Reputation: 117

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.

Upvotes: 10

Domenic D.
Domenic D.

Reputation: 5366

If you don't really need the button element, just move the classes to a regular link: 

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

Conversely, you can also change a button to appear like a link:

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

Upvotes: 143

Related Questions