Bootstrap Fluid Layout - Fixed Width of Sidebar

Fluid layout with fixed-width sidebar bootstrap

I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative CSS:

/*html, body { height: 100%}*/
body {    background-color: #1db34f;}

#side-panel {
    float: left;
    width: 240px;
    padding: 10px 20px 10px 20px;
/*    height: 100%;
    background-color: #1db34f;
    border-right: 1px solid #dddddd;    */
    text-align: center;
}

#center-panel {
    margin-left: 280px;
    background-color: #ddd;
    text-align: center;
    border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}

Fixed Sidebar on the Right in fluid layout twitter bootstrap

Just got how to do it without actually using jquery. It is really simple.

I was just missing to add "right:0" to kick it all the way up to the right. So the following code should do it.

<div class="span2" style="position:fixed; right:0">  
CONTENT 
</div>

Fixed width sidebar with responsive main div in bootstrap 2.3.2

This is because your "fixed-span" class is being overridden by the bootstrap span classes.
You can solve this removing the word "span" from your class:

<div class="row-fluid">
    <div class="fixed blue cols">...</div>
    <div class="span8 red cols">...</div>
</div>

.fixed {
    width:200px;
    float: left;
}

Here's the fiddle:
http://jsfiddle.net/KAfMB/4/

How to create a fixed sidebar layout with Bootstrap 4?

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Demo: https://codeply.com/go/O9GMYBer4l

or, use position-fixed:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Demo: https://codeply.com/p/0Co95QlZsH

Also see:
Fixed and scrollable column in Bootstrap 4 flexbox

Bootstrap col fixed position

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

How to make a fixed width column with a container-fluid?

A fixed-fluid layout is possible in Bootstrap 3, but now that Bootstrap 4 is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;, and then flex: 1; on your main column to fill remaining width...

Bootstrap 4 Alpha 2
http://codeply.com/go/eAYKvDkiGw

Here's a simpler update for the latest Bootstrap 4 which is flexbox by default:

Bootstrap 4 Alpha 6 or Beta
http://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Update 2018
Bootstrap 4.0.0 example

Bootstrap 4 layout with one width fixed column

@Denis Stephanov, you can create a flex item that doesn't shrink or grow and has a fixed width, with the following css rule:

.flex-fixed-width-item {
    flex: 0 0 100px;
}

This is the short-hand for flex-grow, flex-shrink, and flex-basis. You can read more about these properties in this CSS-Tricks article.

Adding that class to your fixed width column:

<div class="container-fluid d-flex h-100">
  <div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
    fixed 100px
  </div>
  ...

Then keeping your column ratio the same:

  ...
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
  <div class="col-4 red h-100" style="background-color: red;">
    4
  </div>
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
</div>

You'll get your requested outcome, which you can view in this codeply project.

Fluid Content next to fixed sidebar with variable width

Something like this ?

$(document).ready(function() {  $("#sidebarCollapse").click(function() {    $("#sidebar").toggleClass("active");    $(this).toggleClass('active');  });});$("#aboutbutton").click(function() {  $('html, body').animate({    scrollTop: $("#aboutDiv").offset().top  }, 2000);});

body {  font-family: 'Poppins', sans-serif;  background: #fafafa;}
p {  font-family: 'Poppins', sans-serif;  font-size: 0.1em;  font-weight: 300;  line-height: 1.7em;  color: #3498db;}
a,a:hover,a:focus {  color: inherit!important;  text-decoration: none!important;  transition: all 0.3s;}
.wrapper {  display: flex;}
#sidebar {  min-width: 250px;  max-width: 250px;  background: #2980b9;  color: #ecf0f1;  transition: all 0.3s;  height: 100%;  min-height: 100vh;  position: fixed;}
#sidebar.active {  min-width: 80px;  max-width: 80px;  text-align: center;}
#sidebar ul.components {  padding: 20px 0;}
#sidebar ul p {  color: #fff;  padding: 10px;}
#sidebar ul li a {  padding: 10px;  font-size: 1.6em;  display: block;  text-align: left;}
#sidebar ul li a:hover {  color: #ecf0f1;  background: #3498db;}
#sidebar .active ul li a {  padding: 20px 10px;  text-align: center;  font-size: 0.85em;}
#sidebar .active i {  font-size: 1em;}
#sidebar .active ul li a i {  margin-right: 0;  display: block;  font-size: 1.8em;  margin-bottom: 5px;}
#sidebar ul li.active>a,a[aria-expanded="true"] {  color: #ecf0f1;  background: #3498db;}
ul ul a {  font-size: 0.9em !important;  padding-left: 30px !important;  background: #ecf0f1;}
#sidebarCollapse {  width: 100%;  height: 80%;  background: #2980b9;  padding: 20px 0;  font-size: 1.6em;  display: block;  border: 0;}
#sidebarCollapse-wrapper {  padding-top: 5%;  padding-bottom: 5%;}
#sidebarCollapse span {  width: 30%;  height: 2px;  margin: 0 auto;  display: block;  background: #fff;  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);}
#sidebarCollapse span:first-of-type {  /* rotate first one */  transform: rotate(45deg) translate(2px, 2px);}
#sidebarCollapse span:nth-of-type(2) {  /* second one is not visible */  opacity: 0;}
#sidebarCollapse span:last-of-type {  /* rotate third one */  transform: rotate(-45deg) translate(1px, -1px);}
#sidebarCollapse.active span {  /* no rotation */  transform: none;  /* all bars are visible */  opacity: 1;  margin: 5px auto;}
.sidebar-nav.active + div#content{margin-left:80px;}.sidebar-nav:not(.active) + div#content{margin-left:250px;}

section {  min-height: 100vh;  height: 100vh;  box-sizing: border-box;  display: flex;}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"><link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>

<!DOCTYPE html><html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <title>José Gomes - Website</title>  <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  <!-- Material Design Bootstrap -->  <link rel="stylesheet" href="css/mdb.min.css">  <!-- Scrollbar Custom CSS -->  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">  <!-- Our Custom CSS -->  <link rel="stylesheet" href="css/custom.css">
  <!-- in your header -->  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"></head>
<body>
  <!-- Content will go here -->    <!-- Sidebar -->    <nav class="sidebar-nav" data-spy="affix" id="sidebar">      <!-- Sidebar Header -->      <div id="sidebarCollapse-wrapper">        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">        <span></span>        <span></span>        <span></span>      </button>      </div>      <!-- Sidebar Links -->      <ul class="list-unstyled components">        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1          </a></li>        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>      </ul>    </nav>

  <!-- Page Content -->  <div id="content" class="p-0">

    <div class="d-flex flex-column">      <section class="p-3 p-lg-5 content-page" id="Section1">        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -      </section>      <section class="p-3 content-page">        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -      </section>      <section class="p-3 content-page">        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>    </div>
  </div>
  </div>