Bootstrap data-target/aria-controls not triggering the id element - html

Question

I have added multiple elements to show and hide information on my HTML website code. Buttons, nav-tabs and modals are created correctly, but when I press on the triggering element, the related information doesn't show on. I have even copied the exact same code from the Boostrap documentation, but it isn't working at all. Can someone tell me what am I doing wrong? Thanks.
<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"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-succes">Send</button>
</div>
</div>
</div>
</div>
<!-- I obviously have the library imports -->
<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>

Answer 1

Have you provided correct paths to all the css and javascript files?
Does your javascript files have errors in the code? If there is an error it may block the javascript that follows from running correctly.
I have recreated your code and it works, but i have added the css and the js files from a CDN:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

I already solve it. The code had no errors. I jus changed the script and now I use
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
and it seems to work fine. I had the css references up in the head part but I assumed it was not a problem with that.