How to make a smaller container in bootstrap

Question

Im making a login page using Bootstrap that is nested in a container

I know that the way that bootstrap works is with a grid system based on the width of the device you are using to view it on so for example if Im viewing the page on my Iphone it will look fine because the width of my phone is small enough so that the container is of manageable size.

However if I view the page on either a desktop or an ipad, the width of the container looks ridiculous because the Input fields take the width of nearly the entire page.

So my question is how could I set a width to my container (or the panel that contains the login form) without messing with the way it looks on the mobile version right now which is perfect. I know that by setting a manual width to it doesnt work because it also sets the width on the mobile device. Is there a simple way to do this that I just havent seen in the documentation?

Answer 1

This might help you:

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    } 
} 
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    } 
} 
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    } 
}

.container-small, .container-large {
    max-width: 100%;
}

Then you can use the classes: container-small and container-large alongside the container class, like so <div class="container container-small">