CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Aaron Reba
Aaron Reba

Reputation: 759

Unable to overwrite Bootstrap's CSS

I'm simply trying to make the width of a container a percentage instead of the Bootstrap default 940px.

My CSS in main.css:

<style type=text/css>
    #main-container{
        width: 200px !important;
    }
</style>

My HTML:

<!--bootstrap-->
<link rel="stylesheet" type=text/css href="/static/css/bootstrap.css">
<script type=text/javascript src="/static/js/bootstrap.js"></script>
<!--custom css-->
<link rel="stylesheet" type=text/css href="/static/css/main.css">

<div class="container" id="main-container">
  <div class="row-fluid">
    <div class="span12">
      {% block body %}{% endblock %}
    </div>
  </div>
</div>

I'm able to change the width with a dirty method of modifying the style manually at the 7th line in the HTML. So my guess is that something is taking precedence over my CSS.

Bootstrap itself doesn't seem to specify an !important width.

At line 224 in bootstrap.css:

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

Answer:

Removed tags in main.css.

Upvotes: 0

Views: 970

Answers (2)

Luigi
Luigi

Reputation: 856

Remove <style> tag from css file. Put those only when embeding css in html files.

Upvotes: 1

Trevan Hetzel
Trevan Hetzel

Reputation: 1369

Then specifically give .container an !important width of 200px. Narrow it down as much as you can.

Upvotes: 0

Related Questions