How to remove white margin from a Carousel (Bootstrap)?

Asked

Viewed 948 times

1

I created a Carousel on my site through the Bootstrap code, and I want it to occupy the entire width of the screen (100vw) and almost the entire height (90vh); therefore, I put in the container width: 100vw and height: 90vh, but when I open the site Carousel gets something similar to a white margin (I tried to use margin:0px and padding:0px, but it didn’t help), and this causes it to exceed the screen limit (it gets a vertical scrollbar)Besides, the height attribute doesn’t even work. How could I fix this?

My code is: HTML:

<!DOCTYPE html>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container-fluid" id="topo">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.png" alt="1" class="carousel_img">
            </div>
            <div class="item">
                <img src="img/2.png" alt="2" class="carousel_img">
            </div>
            <div class="item">
                <img src="img/3.png" alt="3" class="carousel_img">
            </div>
        </div>
    </div>
</div>

CSS:

html, body {
margin: 0px;
}

body {
height: 400vh;
}

#topo {
width: 100vw;
height: 90vh;
}

.carousel_img {
width: 100%;
height: 100%;
}
html css bootstrap-3 carousel

1 answer

3


The "white margin" is generated by the standard css rule of the "container-Fluid" class, which applies 15px left and right padding to the element containing that class.

To remove this margin, you can override this rule from the container-Fluid class by adding the css below:

.container-fluid { padding: 0 !important; }

Browser other questions tagged html css bootstrap-3 carousel

You are not signed in. Login or sign up in order to post.