CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jimmery
Jimmery

Reputation: 10139

Strange Bootstrap Container Breakpoint Behaviour

If I set the browser width to 1024px the following bootstrap container rule is being applied:

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

If I extend the browser width to 1092px then the following bootstrap container rule is being applied:

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

There are no other CSS rules applied to the container, just the standard bootstrap rules:

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

Can anyone explain to me why a browser width of 1024px isn't getting the min-width: 992px rules applied to it?

Upvotes: 0

Views: 145

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

I think you forget open close bracket { } 

@media (min-width: 768px) {
            .container {
                width: 750px;
                background: yellow;
            }
        }

        @media (min-width: 992px) {
            .container {
                width: 970px;
                background: red;
            }
        }

Upvotes: 2

Related Questions