Why does this hyperlink not work when I use Bootstrap?

Question

Today I started learning how to use bootstrap and implementing it into my website. For some reason, a hyperlink to my youtube channel stopped working. Here is the link to jsbin.

Here is the code that styles and makes the hyperlink:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
        <p id="welcomep">This is the official website for Mykyta Solonko. Here you will be able to view my latest projects. Click <a target="blank" id="youtubeLink" href="https://www.youtube.com/channel/UCxFqK5m-OljCdLtoa3zRzVg"><strong>here</strong></a>
 to see my youtube channel. </p>
    </div>

  </div>


</div>  

Styling:

#youtubeLink{
text-decoration: none;
color: white;
}
#youtubeLink:hover{
color: yellow;  
}

Is there something obvious I am missing? The link does nothing when hovered over.

Answer 1

The problem is your custom css overriding the z-index on row:

row {
    background-color: gray;
    border-radius: 30px;
    border: black 2px solid;
    z-index: -999; //This is causing the issue
    position: relative;
    top: 20px;
}

This is coming from: https://output.jsbin.com/gowahadibi

Not sure if that's from a plugin that you're running?

Answer 2

Put .row class z-index 0

.row{z-index:0;}