There seems to be an issue with buttons not functioning properly when they are placed inside specific HTML tags. They become unclickable, even in cases where: a. the classes assigned to them are identical to those of working buttons, and b. the enclosing tags are also the same as the ones that work correctly. Examples with comments provided below:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="text-left">The European What?</h3>
<h4 class="text-left">The European Union</p>
<p class="text-left">A bunch of important people from different countries gathered and thought it would be productive to work together. So now in Europe there are 28 countries that act like they’re one.</p>
<!-- This button works -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal"><i class="material-icons icon-align">list</i>Table of Contents</button>
</div>
</div>
</div>
</header>
<section id="lesson" style="position:relative;overflow-y:scroll" data-spy="scroll" data-target="#toc">
<div class="container">
<div class="row">
<!-- This button doesn't work -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
<i class="material-icons icon-align">list</i>
</button>
<div class="col-xs-12 text-center">
<h5>How was the EU Formed? This is very long.</h5>
</div>
</div>
</div>
<!-- This button works -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
<i class="material-icons icon-align">list</i>
</button>