Debo justificar varios elementos sobre una imagen de fondo con bootstrap para que me queden los elementos de manera descente. Tengo que incluir 2 botones con imagenes en el centro y 3 bottones con imagenes abajo a la izquierda. para hacer una landig page de un videojuego. ahora estan así:
el codigo que estoy usando es:
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://ucarecdn.com/270622e8-3009-4eb2-b2f1-a1f392ac57ea/CryptoBurgersBackground37x.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<head>
<title>Crypto Burgers</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div>
<a class="btn btn-lg px-5 " href="#" role="button"><img src="https://ucarecdn.com/a3a8f42d-a496-4310-b028-cbb4433305eb/BOTONWP2.png" height="30" alt="USA flag"></a>
<a class="btn btn-lg px-5" href="#" role="button"><img src="https://ucarecdn.com/e37a83f4-b943-498b-b2f5-ee82067daa9f/BOTONPLAY2.png" height="30" alt="USA flag"></a>
</div>
<div class="bg">
</div>
<div>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button"><img src="https://ucarecdn.com/4492dba6-f3ba-435f-a7c2-fc00d39a7012/telegrama.png" height="30" alt="USA flag"></a>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button"><img src="https://ucarecdn.com/1b7819f1-9fc0-49b2-b14d-92c6c8c7ce8e/gorjeo.png" height="30" alt="USA flag"></a>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button"><img src="https://ucarecdn.com/7021fe83-5d65-48c4-a9c7-b647cc082343/discordia.png" height="30" alt="USA flag"></a>
</div>
</body>