"fixed_column_scroll"
Bootstrap 3.3.0 Snippet by thecodinggame

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Bootply snippet - Bootstrap Right and Left Sidebars Fixed</title> <meta name="generator" content="Bootply" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="Bootstrap How to get a fixed right and left sidebar layout with Bootstrap. This template has 3 column layout with larger fluid container in the center" /> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png"> <!-- CSS code from Bootply.com editor --> <style type="text/css"> body { padding-bottom: 40px; padding-top: 60px; } .sidebar-nav-fixed { width:20%; } </style> </head> <!-- HTML code from Bootply.com editor --> <body > <div class="navbar navbar-fixed-top navbar-default"> <div class="container"> <div class="navbar-header"><a class="navbar-brand" href="#">Project name</a><a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> </a> </div> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!--/.navbar-collapse --> </div> </div> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="sidebar-nav-fixed affix"> <div class="well"> <ul class="nav "> <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> <!--/sidebar-nav-fixed --> </div> <!--/span--> <div class="col-md-6"> <div class="jumbotron"> <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-lg">Learn more »</a> </p> </div> </div> <!--/span--> <div class="col-md-3"> <div class="sidebar-nav-fixed pull-right affix"> <div class="well"> <ul class="nav "> <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> <!--/sidebar-nav-fixed --> </div> <!--/span--> </div> <!--/row--> <footer> <p>© Company 2012</p> </footer> </div> <!--/.fluid-container--> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- JavaScript jQuery code from Bootply.com editor --> <script type='text/javascript'> $(document).ready(function() { }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40413119-1', 'bootply.com'); ga('send', 'pageview'); </script> </body> </html>

Related: See More


Questions / Comments: