CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3845413
user3845413

Reputation: 53

How to resize container in bootstrap.css

How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.

<body>
    <div class="container"> //This is the major container

    </div>
</body>

Upvotes: 3

Views: 28349

Answers (2)

Dan
Dan

Reputation: 9468

The default Bootstrap .container class has 15px padding on both left and right sides.

You can adjust this by adding additional padding to your container:

.container { //or use a custom class like .custom-container
  padding-left: 100px;
  padding-right: 100px;
}

Or you could also adjust the width of your container like so:

.container { 
  width: 75%;
}

Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).

Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.

Upvotes: 1

Kishore Kumar
Kishore Kumar

Reputation: 12864

You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.

Here is an sample

@media (min-width: 768px) {
    .my-custom-container{
        width:600px;
    }
}

@media (min-width: 992px) {
    .my-custom-container{
        width:720px;
    }
}

@media (min-width: 1200px) {
    .my-custom-container{
        width:900px;
    }
}

Upvotes: 4

Related Questions