I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even double-checked by copying the exact code from the Bootstrap documentation, but it still doesn't work. Can someone please point out what I might be missing? Thank you.
<ul class="nav nav-tab" id="tablaTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="compara-tab" data-toggle="tab" href="#compara" role="tab" aria-controls="compara"aria-selected="true">Comparador</a> </li>
<li class="nav-item">
<a class="nav-link" id="pagos-tab" data-toggle="tab" href="#pagos" role="tab" aria-controls="pagos" aria-selected="false">Pagos</a> </li>
<li class="nav-item">
<a class="nav-link" id="valor-tab" data-toggle="tab" href="#valor" role="tab" aria-controls="valor" aria-selected="false">Valoraciones</a> </li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="compara" role="tabpanel" aria-labelledby="compara-tab">
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<th>Núm pax (precio por día)</th>
</thead>
<tbody>
<tr><td>1 persona <span class="oi oi-person" style="padding-left: 7px;"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
</div>
<div class="tab-pane fade" id="valor" role="tabpanel" aria-labelledby="valor-tab">
Ratings
</div>
</div>
</div>
Apart on another file:
<div class="modal fade" id="contacto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Email:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Mensaje:</label>
<textarea class="form-control" id="message-text"></texrea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-succes">Send</button>
</div>
</div>
</div>
</div>
<!-- All necessary library imports exist -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="node_modules/popper.js/dist/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>