Hola a todos,.!
Tengo un clásico carrusel de boostrap 4, y anda de 10, el problema es que no ocupa todo el ancho de mi pantalla, deja los espacios en cada lado, si al conteneor le pongo
container-fluid, las imágenes se me distorcionan,....
quisiera saber como hago para que el contenedor ocupe todo el ancho de mi monitor , pero no así las imagen, así podre agregarle un color de fondo..
dejo código:
Código HTML:
Ver original<div id="carousel-example-1z" class="col-12 carousel slide carousel-fade ca" data-ride="carousel"> <!--Indicators-->
<ol class="carousel-indicators"> <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-1z" data-slide-to="1"></li> <li data-target="#carousel-example-1z" data-slide-to="2"></li> <!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox"> <!--First slide-->
<div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide" style="height: 300px">
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide" style="height: 300px">
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide" style="height: 300px">
<!--/Third slide-->
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <!--/.Controls-->
<!--/.Carousel Wrapper-->
Muchas gracias por su ayuda.
Saludos cordiales a todos.!
fede