CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
patrickhuang94
patrickhuang94

Reputation: 2115

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 (
        <div className="container intro-body">
        </div>
    )

With CSS for intro-body like so (for color)

.intro-body {
    height: 582px;
    background-color: #3BC5C3;
}

On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.

enter image description here

But when I shrink my window to about half the size, it reaches the left and right sides

enter image description here

Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.

Upvotes: 0

Views: 1480

Answers (2)

Nathan Schwarz
Nathan Schwarz

Reputation: 641

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

Upvotes: 0

Vucko
Vucko

Reputation: 20834

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.

Upvotes: 3

Related Questions