Los botones dentro del modal no aparecen, incluso si copio un código de una página y lo pego en mi html. Lo único que no se muestra son los botones. Aquí el código:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="codigo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>CliffPedia</title>
</head>
<body>
<!--Barra de navegacion-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand mb-0 h1" href="PaginaPrincipalBootstrap.html"><img class="d-inline-block align-top" src="https://steamuserimages-a.akamaihd.net/ugc/91604190949969147/088A09E3C677498614C124ACE76365CBDF969000/?imw=268&imh=268&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true" width="30" height="30"/>CliffPedia</a>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Menu</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="Yo.html" class="nav-link active">Yo</a>
</li>
<li class="nav-item active">
<a href="Contacto.html" class="nav-link active">Contacto</a>
</li>
<li class="nav-item active">
<a href="Historia.html" class="nav-link active">Historia</a>
</li>
</ul>
<!--Modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="justify-tracks: left;">
Iniciar Sesion
</button>
<div class="modal fade" id="exampleModal" 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">Inicio de Sesion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="text-center">
<form>
<img src="https://steamuserimages-a.akamaihd.net/ugc/91604190949969147/088A09E3C677498614C124ACE76365CBDF969000/?imw=268&imh=268&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true" height="72" alt="Logo">
<h1>Iniciar Sesion</h1>
<label for="correo" class="sr-only"></label>
<input type="email" id="correo" class="form-control" placeholder="Correo electronico" required autofocus>
<br>
<label for="contraseña" class="sr-only">Contraseña</label>
<input type="password" id="contraseña" placeholder="Contraseña" class="form-control">
<div class="checkbox">
<label>
<input type="checkbox" value="Recuerdame">Recuerdame
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal-->
</div>
</nav>
<!--Barra de navegacion-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
Y aquí el css:
.col{
margin-left: 150px;
}
.btn{
position: absolute;
left: 1710px;
background-color: grey;
}
.container{
background-color: rgb(160, 155, 155);
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(92, 91, 95);
margin-top: 50px;
}
.overlay-image{
height: 80vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar-brand{
color: white;
}
.col{
margin-top: 50px;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-image: url("https://cdn.planetradio.co.uk/one/media/5f6c/6239/f694/007e/c382/1df3/20151018_044604_7549_770421.jpeg?quality=80&format=jpg&width=960&ratio=16-9&crop=25,0,476,800&resize=crop");
size: 100%;
}
En caso de no haberse entendido lo de arriba: Al añadir un botón con <button>
dentro del modal no se muestra, solo se añade una especie de espacio en blanco con el que no puedes interactuar. He intentado borrando el modal que tengo ahí y copiando otro de alguna página pero es lo mismo, aún así sigue sin mostrarse el botón.