Good mates I have a problem with divs with bootstraps I can not do with bootstrap carousel suits the div, this is a layout that I made so that more or less I would like to have the carusel inside the div red and blue adapt them to those sizes, if you could help me, I'd really appreciate it.
#sistema_de_turno{
position: absolute;
float: left;
width:20%;
height: 90%;
margin: 10px;
background-color: black;
margin-bottom: 0;
}
#videos{
margin-top: 14.5%;
width:75%;
height: 60%;
margin-left: 21%;
position: absolute;
}
#banner{
width:75%;
height: 30%;
margin: 0px;
margin-left: 21%;
position: absolute;
top: 10px;
}
#videos video{
max-width: 100%;
max-height: 80%;
}
#oficina{
height: 90%;
width: 50%;
margin: 0px;
float: left;
}#turno{
height: 90%;
float: left;
width: 50%;
margin: 0px;
}
#oficinas{
margin:0;
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-sisben{
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-familia{
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-salud{
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-despacho{
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-adulto{
height: 18%;
background-color: green;
text-align: center;
margin-bottom: 1px;
}
#turno-sisben h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}
#turno-sisben h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}
#turno-sisben h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}
#turno-familia h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}
#turno-salud h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}
#turno-despacho h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}#turno-adulto h1{
margin-top: 10px;
text-align-last: center;
color:white;
display:inline-block;
vertical-align:middle;
line-height:normal;
}#oficinas p{
text-align-last: center;
color:white;
}<!DOCTYPE html>
<html>
<head>
<title>TURNO</title>
<link rel="stylesheet" type="text/css" href="css/divs.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</head>
<body>
<div id="sistema_de_turno" >
<div id="oficina"><h5>OFICINA</h5>
<div id="oficinas"><p align="center">SISBEN</p></div>
<div id="oficinas"><p align="center">FAMILIAS </p></div>
<div id="oficinas"><p align="center">SALUD</p></div>
<div id="oficinas"><p align="center">DESPACHO</p></div>
<div id="oficinas"><p align="center">ADULTO MAYOR</p></div>
</div>
<div id="turno">
<h5>TURNOS</h5>
<div id="turno-sisben" data-toggle="counter-up"><h1>00</h1></div>
<div id="turno-familia" data-toggle="counter-up"><h1>00</h1></div>
<div id="turno-salud" data-toggle="counter-up"><h1>00</h1></div>
<div id="turno-despacho" data-toggle="counter-up"><h1>00</h1></div>
<div id="turno-adulto" data-toggle="counter-up"><h1>00</h1></div>
</div>
</div>
<div id="banner" class="bg-danger"></div>
<div id="videos" class="bg-primary">
</div>
</div>
</div>
</body>
</html>