0

I am trying to allow a button on my website to provide a link. So far it can be implemented using the <link to "..."> tag.

However I also need my button to stick to the bottom of the column. I have completed this in the code however when I nest my button in the <Link> tags, the button is no longer sticking to the bottom. Therefore the <Link> tag is stopping the button from working.

<div className="col-12 col-lg-6 text-left">
    <div className="d-flex flex-column h-100">
        <Link to="/portfolio/website-designs#">
            <button type="button" className="btn-outline-primary mt-auto" style={{
                'pointer-events': 'none'
            }}>   <b> Button Text </b>
            </button>
        </Link>
    </div>

If I remove the <Link> it works.

Is it because the mt-auto is working directly on the parent, the link tag? I tried nesting the Link inside around the <b> Button Text </b>, but the link wasen't working now.

Placing the link button side, unfortunately does not make the link work.

i.e. 

<button type="button" className="btn-lg btn-outline-primary mt-auto"<Link to"..."> <b> Learn More </b> </Link> </button>
J.Doe
  • 39
  • 1
  • 5

3 Answers3

0

Throw the Link tag inside of the button tag. I'd imagine that would solve your issue.

lakerskill
  • 1,019
  • 1
  • 11
  • 24
0

Link is directly under .d-flex so it's stretching 100% as a flexbox element. When you remove Link, Button goes under flexbox and stretch 100%... but if you place button under Link... Link stretch but the button doesn't (as it's not directly under the flexbox). You can add a class w-100 into your button to make it stretch

Afzal Hossain
  • 3,258
  • 1
  • 21
  • 13
  • Also like to mention that Button inside Link isn't necessary, You can add className="btn ... and other class names from button" to the Link element to make it look like a button. – Afzal Hossain Mar 30 '19 at 02:43
0

You can pass className to the Link component:

<Link to="/portfolio/website-designs#" className="btn-outline-primary mt-auto">
  Button Text
</Link>

This will allow your mt-class, which I'm assuming controls your layout, to behave as you expect it to.

You can read more about <Link /> here: https://reacttraining.com/react-router/web/api/Link/others

An important side note is that your current markup would result in a button within an anchor tag which isn't valid html and could cause accessibility issues.

This is very well explained in here: Can I nest a <button> element inside an <a> using HTML5?

Marcus H
  • 1