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

Question

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

Navigation

#1 by (2 votes)

1

I've created a carousel on my site through the Bootstrap code, and I want it to occupy the full width of the screen (100vw) and almost all the height (90vh); so I put in the container width: 100vw and height: 90vh, but when I open the site the carousel gets something similar to a white margin (I tried to use margin: 0px and padding: 0px, but it did not work), and this causes it to exceed the limit of the screen (it has a vertical scrollbar), and the height attribute does not work at all. How could I fix this?

My code: 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><scriptsrc="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

asked by anonymous 03.10.2017 / 03:29

1 answer

Find and Copy Sheet Row to Form, Change Fields, and Write to Same Worksheet with New ID I can not return the values assigned to the variables

score 2 · Accepted Answer

The "white border" is generated by the default css rule of the class "container-fluid", which applies padding left and right of size 15px to the element that contains this class.

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

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