Search code examples
javascripthtmlcsstwitter-bootstrapbootstrap-tour

Bootstrap tour template not applying id on all buttons

I added an id to the next button to style it following the template tag in bootstrap tour. I applied a new id to the next button but it only applies it to the first one, not the latter stages. Does anyone know why?

template: "<div class='popover tour'>
<div class='arrow'></div>
<h3 class='popover-title'></h3>
<div class='popover-content'></div>
<div class='popover-navigation'>
    <button class='btn btn-default' data-role='prev'>« Prev</button>
    <span data-role='separator'>|</span>
    <button class='btn btn-default' id="thisone" data-role='next'>Next »</button>
</div>
<button class='btn btn-default' data-role='end'>End tour</button>
</nav>
</div>",
Solution

  • I worked it out. I targeted the element with the class rather than an id as my requirement was general not singular. 

    .popover-navigation *[data-role="next"]{
    background-color:#c6c6c6;
}