Arpan Sarkar
Reputation: 199
unable to fix side div using bootstrap
This is my first theme for a web site. But I am unable to to set two side div when I scroll that page.I am stuck with that.
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top:60px">
<div class="row">
<!--right-->
<div class="col-sm-3 well text-center">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="avatar3.png" class="img-circle" height="65" width="65" alt="Avatar"><br>
<button type="button" class="btn btn-default" style="margin-top: 10px">Default</button>
<button type="button" class="btn btn-primary" style="margin-top: 10px">Primary</button>
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
</div>
<div class="col-sm-7 " >
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<form>
<div class="panel-body">
<label for="comment">Status:</label>
<tr>
<textarea class="form-control" rows="2" id="comment"></textarea>
</tr>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px"><span class="glyphicon glyphicon-pencil"></span>Post</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 rounded">
<div class="well">
<img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
<p class="text-left" style="margin-top: 5px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">thumb_up</i> <b>Like</b>
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
</button>
</div>
</div>
</div>
</div>
<!--left-->
<div class="col-sm-2 well text-center">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
</div>
</div>
</div>
I want when I scroll the page that two side fixed position only middle column scroll down I am using bootstrap. I am unable to do that.please help me.I am making a simple social site template responsive.when i tried define a class of css to fix position of two div but did not work.
Upvotes: 0
Views: 50
Answers (1)
CodeCheshire
Reputation: 730
If you want just the middle container to scroll, you could write a little bit of css: overflow-y: scroll
Edit: added rncrtr's suggestion. If you want to make the sidebars fixed, you can apply position: fixed; in the CSS as well.
.scrollable {
overflow-y: scroll;
max-height: 400px;
}
.fixed {
position: fixed;
}<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top:60px">
<div class="row">
<!--right-->
<div class="col-sm-3 well text-center fixed">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="avatar3.png" class="img-circle" height="65" width="65" alt="Avatar"><br>
<button type="button" class="btn btn-default" style="margin-top: 10px">Default</button>
<button type="button" class="btn btn-primary" style="margin-top: 10px">Primary</button>
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
</div>
<div class="col-sm-7 scrollable">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<form>
<div class="panel-body">
<label for="comment">Status:</label>
<tr>
<textarea class="form-control" rows="2" id="comment"></textarea>
</tr>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px"><span class="glyphicon glyphicon-pencil"></span>Post</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 rounded">
<div class="well">
<img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
<p class="text-left" style="margin-top: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at viverra diam, eget volutpat purus. Vestibulum scelerisque lobortis velit in dictum. Curabitur accumsan eget turpis molestie commodo. Duis mattis odio quis gravida ullamcorper. Praesent
non quam cursus, malesuada mi quis, commodo sem. Aenean scelerisque est a vestibulum consectetur. Vivamus venenatis vehicula porttitor. Suspendisse potenti. Nunc tempor quam et orci vehicula pretium. In quis tortor eleifend velit eleifend
faucibus. Ut egestas, mi sit amet semper lobortis, mi nunc pulvinar leo, lacinia consequat urna lacus commodo est. Nulla congue posuere varius. Praesent commodo, risus at scelerisque tristique, arcu magna eleifend metus, id gravida dui
est tincidunt turpis. Nam hendrerit nec nunc lacinia efficitur. Pellentesque vitae tellus vulputate, sollicitudin quam vitae, semper ante. Sed et lacus sed arcu aliquet porttitor in eu dui. Sed posuere lorem et varius dapibus. Phasellus
varius sed massa volutpat tempus. Suspendisse dignissim euismod risus ac efficitur. Duis euismod mauris ac massa fermentum, vel aliquet tortor sodales. Donec porttitor sodales nisl. Suspendisse maximus viverra massa non sagittis. Duis
mattis lectus eget nunc euismod, eu ornare nunc vestibulum. Ut at pharetra turpis. Donec risus turpis, lacinia sit amet purus ut, lobortis ultrices nulla. Nunc fermentum urna non elit mattis, ut pharetra dui commodo. Fusce cursus mauris
porttitor dui varius luctus. Quisque nec vestibulum velit. Nullam orci mi, congue sit amet odio a, interdum commodo nibh. Donec nec sem sodales, ornare ligula in, placerat magna. Praesent enim nulla, hendrerit sagittis lorem ut, cursus
interdum nibh. Integer in metus justo. Mauris vitae turpis et lacus condimentum mollis quis luctus augue. Quisque fermentum augue ac purus dignissim, in luctus mauris vulputate. Phasellus id tempor purus. Donec at augue leo. Integer lectus
massa, aliquet in bibendum vel, tincidunt sed eros. Mauris ultrices ipsum non enim fermentum finibus. Nulla porttitor faucibus tempus. Curabitur dignissim sed felis nec convallis. Aliquam gravida risus fringilla nibh efficitur tempus in
sit amet ex. Vivamus id tempor neque, at euismod lorem. Sed dui justo, interdum eu augue et, molestie convallis mauris. Sed scelerisque blandit pretium. Vivamus posuere ex posuere lacus consectetur porttitor. Maecenas pulvinar arcu vel
ante ornare fringilla. Praesent maximus fringilla rhoncus. Sed ac ultrices velit.
</p>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">thumb_up</i> <b>Like</b>
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
</button>
</div>
</div>
</div>
</div>
<!--left-->
<div class="col-sm-2 well text-center fixed">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- Bootstrap problem with line-up of left sidebar & page content
- How to fix Bootstrap dropdown that is covering content to its side?
- How to remove space on right side of div?
- adding div messes the entire design
- Bootstrap 4 - Couldn't maintain the same width when affix the sidebar
- Bootstrap Side nav bar issue
- how to fix the side layout in bootstrap
- div fixed on the right side is not working
- Fixed into right side even though left div is not there - bootstrap
- Bootstrap 3: Fixed Right Sidebar