In this tutorial, you will learn how to use the Bootstrap toolkit to create fixed layouts and fluid layouts. The tutorial is based on Bootstrap version 2.0. In version 2.0, Bootstrap added responsive features for phones, tablets, laptops, small desktops, large widescreen desktops, etc. You can make the layout responsive by adding the bootstrap-responsive.css file (located under docsassetscss) to the page. If you want to create a web page or app based on a fixed number of pixels, please see this part of the tutorial. ## Usage ## Explanation Lines 261 to 273 of bootstrap.css (located under docsassetscss in the main bootstrap folder) render styles for creating the main container, thereby creating a fixed layout. The purpose of a fixed layout is to create a 940-pixel (default) wide layout for a web page or app. The following code creates a fixed layout for a web page. For customization, in addition to the default styles, a new CSS file example-fixed-layout.css needs to be created in the same folder as bootstrap.css. ## CSS Code body { padding-top: 60px; padding-bottom: 40px;}.nav li { padding-top: 5px;}.leaderboard { padding: 60px; margin-bottom: 30px; background-image: url('/twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat;-webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px;}.leaderboard h1 { font-size: 40px; margin-bottom: 5px; line-height: 1; letter-spacing: -1px; color:#FF6600;}.leaderboard p { font-size: 18px; font-weight: 200; line-height: 27px;} ## HTML Code ## Example ## Output  ## View Online [View the above example in a different browser window.](#) If you want to create a non-fixed layout, i.e., a percentage-based layout to make the layout more flexible, please see this part of the tutorial. ## Usage ## Explanation Lines 274 to 285 of bootstrap.css (located under docsassetscss in the main bootstrap folder) render styles for creating the main container, thereby creating a fluid layout. The purpose of a fluid layout is to create a percentage-based layout for a web page or app (e.g., width=20%). The following code creates a fluid layout for a web page. For customization, in addition to the default styles, a new CSS file example-fluid-layout.css needs to be created in the same folder as bootstrap.css. ## CSS Code body { padding-top: 60px; padding-bottom: 40px; } .nav li { padding-top: 5px; } .sidebar-nav { padding: 9px 0; } .leaderboard { padding: 60px; margin-bottom: 30px; background-image: url('/twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.leaderboard h1 { font-size: 40px; margin-bottom: 5px; line-height: 1; letter-spacing: -1px; color:#FF6600;}.leaderboard p { font-size: 18px; font-weight: 200; line-height: 27px;}.well { background-image: url('/twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.nav .nav-header { font-size: 18px; color:#FF9900;} ## HTML Code ## Example