How to make a smaller bootstrap container

Question

Im creating a login page using Bootstrap, which is nested in a container

I know that the way the boot file works consists of a grid based on the width of the device you use to view it, for example, if I view the page on my Iphone, it will look fine, because the width of my phone is enough small so that the container has a manageable size.

However, if I view the page on the desktop or on the ipad, the width of the container looks ridiculous because the input fields occupy the width of almost the entire page.

So my question is how can I set the width for my container (or the panel containing the login form) without falling into the way it looks on the mobile version right now, which is perfect. I know that setting the manual width does not work, because it also sets the width on the mobile device. Is there an easy way to do this that I just didn't see in the documentation?

Answer 1

This may 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 next to the class container , for example<div class="container container-small">