CODEWITHSUNDEEP
twitter-bootstrap
Dennis
Dennis

Reputation: 143

Bootstrap container width change

I'm using Bootstrap for my website and I need to create a container with size of 1250px, but the problem is when I change the class of Bootstrap container the responsiveness won't work anymore.

What should I do?

Upvotes: 10

Views: 42983

Answers (7)

amit2091
amit2091

Reputation: 356

You can create a custom container and use it with default container (just overwriting the width). you can change the width according to your need:

CSS :

@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;
}}

HTML :

<div class="container my-custom-container">
your content Goes here .......
</div>

Upvotes: 11

Minal Telgade
Minal Telgade

Reputation: 79

You can give width to container in your css file:

.container {
    width:1250px;
}

Then write media query for making it responsive:

@media only screen and
(max-width : 1249px ) {

    .container {
        width:100%;
    }

}

Upvotes: 3

Sarower Jahan
Sarower Jahan

Reputation: 1495

Put a special class like my_custom_menu to your menu container. then copy this style below to your stylesheet.... 

@media (min-width: 1200px) {
  .container.my_custom_menu  {
    width: 1250px;
  }
}

Thank You

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

You can change the width of container as you like. For this please add these css lines: 

.container{ 
  max-width:1250px; 
  width:100%; 
}

Upvotes: 2

eroedig
eroedig

Reputation: 234

Just setting 'container-fluid' will create a 100% width container. Wrapping the whole thing in a 1250px width container will cause your container not to be responsive. The best thing to do is to assign a 'max-width' to your fluid container, I've included the markup below:

<div class="container-fluid" style="background-color:#CDCDCD; max-width:1250px">

Container-Fluid

Upvotes: 14

sunilkjt
sunilkjt

Reputation: 1005

You can change the width of container as you like.For this please add these css lines 

@media (min-width: 1200px) {
  .container {
    width: 1250px !important;
  }
}

Thanks

Upvotes: 0

user4095424
user4095424

Reputation:

Did you try fluid container for bootstrap ?

Try change 'container' to the 'container-fluid'

It may be help

Upvotes: 1

Related Questions