CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2377349
user2377349

Reputation:

Bootstrap container max-width doesn't work

After using the code this way: 

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container{
    max-width:980px;
}
</style>
</head>
<body>
  <div class="container" style="max-width:980px;">
     ...
  </div>

</body>
</html>

I get the whole container going over 1100px

Upvotes: 3

Views: 28080

Answers (5)

tomas.satinsky
tomas.satinsky

Reputation: 861

Take following lines from variabless.less, put it to app.less and set your values.

@container-tablet: ((720px + @grid-gutter-width));

@container-desktop: ((940px + @grid-gutter-width));

@container-lg-desktop: ((1140px + @grid-gutter-width));

Upvotes: 1

Charles Ingalls
Charles Ingalls

Reputation: 4561

This should do the trick

.container{
   max-width:980px !important;
}

Upvotes: -1

Suresh Pattu
Suresh Pattu

Reputation: 6209

Try this

.container{
    max-width:980px;
    margin:0 auto;/*make it centered*/
}

Upvotes: 3

Joshua Henn
Joshua Henn

Reputation: 70

Try this code

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

Use this in your code it will really work for you.

Upvotes: -2

RahulG
RahulG

Reputation: 1026

A better way to do this is

1)create your own less file as a main less file ( like bootstrap.less ).

2)Import all bootstrap less files you need. (in this case, you just need to import all responsive less files but responsive-1200px-min.less)

3)If you need to modify anything in original bootstrap less file, you just need to write your own less to overwrite bootstrap's less code. (Just remember to put your less code/file after @import {bootstrap's less file}; ).

@media (max-width:1200px) 
@media (min-width: 979px)

Second way

use .container-fluid

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

insert in your custom css

Upvotes: 17

Related Questions