<!carousel--><divclass="container bg-danger">
<div class="row">
<div class=".col-4 mt-3 mr-4">
<div class="boxonee ">teste xd</div>
</div>
<div class=".col-4">
<div id="carouselExampleCaptions" class="carousel slide mt-3 " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="" src="images/sd1.png" data-holder-rendered="true">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="" src="images/sd2.png" data-holder-rendered="true">
</div>
<div class="carousel-item active">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="" src="images/sd1.png" data-holder-rendered="true">
</div>
</div>
</div>
</div>
<div class=".col-4">
<div class="boxone mt-3 ml-4">teste 1</div>
<div class="boxone mt-3 ml-4">teste 2</div>
<div class="boxone mt-3 ml-4">teste 2</div>
</div>
</div>
</div>
css:
body {
margin:0;
padding:0;
background:#e84118;
}
img.logo{
width: 250px;
height: 70px;
}
.prodf {
display:flex
}
.form-control-borderless {
border: none;
}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}
.minhaconta{
margin-top: 10px;
}
.dropspc{
background: #000;
}
/* actual dropdown animation */
.dropdown .dropdown-menu {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
}
.dropdown.open .dropdown-menu {
max-height: 400px;
background: #000;
width: 200px;
opacity: 1;
}
.boxone{
width: 270px;
height: 150px;
background: #000;
}
.boxonee{
width: 270px;
height: 150px;
background: #000;
}
/*import*/
.xd .carousel-item {
overflow: hidden;
width: 100%;
height: 100%; /* aqui vc ajusta a altura do slider */
}
.xd .carousel-item img {
width: 100%;
/* transform: translateY(-50%) habilitar se quiser pocicionar o meio da imagem no slider*/
}
/*import*/
I'm having this issue with these grid I'm trying to use the ml-4 and the boxes are coming down.