Bootstrap carousel caption buttons are not clickable

Question

Im building a page with bootstrap carousel which has caption of paragraph and two buttons, buttons are not appearing as clickable, when clicked nothing happens.

 {% block body %} <div id ="car-container"> <div class="container-fluid" style= "padding-right: 0px; padding-left: 0px;"> <div id="carousel-home" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div id = "carousel-inner"> <div class="carousel-item active"> <div class = "overlay-background"> <div class="overlay"> <img class="d-block w-100 carousel-home-img" src="empImg1.jpg" alt="First slide"> </div> </div> <div id = "cap_one" class="carousel-caption "> <div id = "cap-head"> <h5 id ="h5">The People Award</h5> </div> <p> We have been awarded 'The People Award' three years running due to our high levels of customer service.</p> <a href="{{ path('emp_services_lettings') }}" target="_blank" class="btn btn-primary btn-lg btn-md" role="button" style = "background-color: #2b459c;important: color: #FFFFFF;important">Find a property</a> <button type="button" class="btn btn-primary btn-lg btn-md" style = "background-color: #d39e00!important; color: #FFFFFF!important">Valuation</button> </div> </div>

Answer 1

for your button to be clickable you need to add an onclick event, like so:

<button type="button" class="btn btn-primary btn-lg btn-md"
style="background-color:  #d39e00!important; color: #FFFFFF!important" 
onclick="testMe()">Valuation</button>

and in your javascript create a function testMe(){ code you want to execute when clicked }

as for you href tag, I am not sure what variables you are using to create the path, so it's a little difficult to follow, but you can just put the path like so:

<a href="http://www.google.com" // and the rest of your code