0

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>",
m33bo
  • 1,334
  • 1
  • 17
  • 34

2 Answers2

0

The problem is you're using id many times, use class instead. id should be unique. so be careful.

from:

id="thisone"

to:

class="thisone"

you can read more about the problem here: https://stackoverflow.com/a/11114634/2649456

Community
  • 1
  • 1
mrvncaragay
  • 1,240
  • 1
  • 8
  • 15
0

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;
}
m33bo
  • 1,334
  • 1
  • 17
  • 34