I can not adjust my carousel in bootstrap 4

Navigation
0

I have a problem with the bootstrap carousel 4, I can not adjust it, I do not have so much knowledge in css, if someone can guide me I appreciate it.

I'll leave fragment of the code. 

<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
    <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item row no-gutters active">
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Tennant.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/PioneerEclipseLogo.jpg"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/bet.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Kawasaki_Logo.jpg"></div>
        </div>
        <div class="carousel-item row no-gutters">
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Aztec.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/advance.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/clarke.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/viper.png"></div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

that's the code I'm using, I'm going to attach some pictures of the problem I have.

that space is created in the middle and the arrows to pass the slider are passed down. I'm going to leave the link with part of the code, I appreciate all help.

link

I appreciate any advice from friends.

    
asked by José Luis Molina Cascante 20.07.2018 в 08:26
source

2 answers

0

The problem with this behavior is that in your modern-business.css file you have the class .carousel-item with these properties: 

height: 150vh;
min-height: 300px;

There you are stating that they have a minimum height of 300px for the elements, which leaves a super space for the size of your images. I do not know how necessary it is that you declare it that way, if the properties are necessary you can adjust the values, but you can omit them, already on your consideration. I hope it serves you.

    
answered by 20.07.2018 / 16:50
source
0

I can not leave comments yet, but I leave here a website with a guide to do a carousel with Bootstrap 4, which seems to be what you are using since I see that you put for example "w-100" in the code .

link

    
answered by 20.07.2018 в 09:08
Problem to upload image to local server with PHP How to consume a SOAP webservices in PHP with nested WSDL?