Container-fluid In Bootstrap 3.4 Not Stretching Horizontally 100%

I'm having the same issue as my previous question: div doesn't expand all the way horizontally All I have in my render() function is render() { return (

Solution 1:

If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

So if you want to have fullwidth for every media breakpoint, use .container-fluid.

Solution 2:

First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid

Share