How to change design from fluid to fixed

Question

Possible Duplicate:
twitter bootstrap, fluid vs fixed, then add in responsive, how does it all fit together?

Here is the demo of the design on which I am working

but this design is coming as fluid.. how can I make this design as fixed?

Below is the source for the page

    <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> web page</title>




      <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">



  <style type='text/css'>
    body {
    padding-bottom: 40px;
    padding-top: 60px;
}

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}





  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){


}//]]>  

</script>


</head>
<body>
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">

          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
      </div><!--/.nav-collapse -->

    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row-fluid row">
    <div class="span3">
      <div class="well sidebar-nav-fixed">
        <ul class="nav nav-list">

          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>

          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->

    <div class="span9 span-fixed-sidebar">
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>
      <div class="row-fluid">

        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div><!--/span-->
      </div><!--/row-->
      <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">

          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/span-->
  </div><!--/row-->

  <hr>

  <footer>
    <p>&copy; Company 2012</p>
  </footer>

</div><!--/.fluid-container-->

</body>


</html>

I didn't downvote, but I would imagine it's because both the [Bootstrap docs](http://twitter.github.com/bootstrap/scaffolding.html) and the [first result on Google](http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it-all-fit-t) for `How to change design from fluid to fixed bootstrap` answer your question. — Sara, Oct 26 '12 at 22:43

score 3 · Accepted Answer · answered Oct 26 '12 at 22:23

3

You're using the container-fluid and row-fluid classes in your HTML.
The Bootstrap docs specifically explain how to use both the default and fluid grid systems; you want default, i.e. container and row.

Excerpt:

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.

answered Oct 26 '12 at 22:23

Sara

8,222
1
37
52

Thanks for the help. I should have read the documents before posting the question though. I have very weak hands in designing so when I fear to change the design I usually comes to SO. :) – Zerotoinfinity Oct 27 '12 at 08:18
No problem, glad you got it working! – Sara Oct 27 '12 at 17:18

score 1 · Answer 2 · answered Oct 26 '12 at 22:06

1

Twitter bootstrap is meant to be responsive. If you want to change that you'll need to download the css and put it on your server for you to be able to modify it. After that go step by step and eliminate all that makes your site to resize. Like percentage width (other than 100%) and so on.

There's no easy solution to that.

answered Oct 26 '12 at 22:06

Caelea

2,318
15
22

Thanks for the clarification. +1 to assist me understanding it. I am actually zero when it comes to design. Let me try that. in case I fail, I will edit my question with proper code and css. – Zerotoinfinity Oct 26 '12 at 22:08
That's incorrect - you're not including the [responsive stylesheet](http://twitter.github.com/bootstrap/scaffolding.html#responsive) so your layout is not responsive. – Sara Oct 26 '12 at 22:25

How to change design from fluid to fixed

2 Answers2