Fixed right sidebar in the container, bootstrap

Question

I use right sidebar with container class

<div class="container">
<div class="col-8 col-md-8 col-sm-6">
main contents
</div>
<div class="col-4 col-md-4 col-sm-6 sidebar ">
side bar
</div>

Then make the right bar stick to the right side with this css.

However, it sticks to the right side of browser.

I want to stick to the right side of container width.

Is it possible?

  .sidebar {
    position: fixed;
    top:0px;
    right:0px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto
  }

Answer 1

I don't think I understood exactly what you want. However, your code will not work properly because you didn't wrap your columns into a row . Try the following and see if it is what you want:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-8 col-md-8 col-sm-6"> main contents </div> <div class="col-4 col-md-4 col-sm-6"> side bar </div> </div> </div>

That way, you don't need to use a custom class to "stick" it to the right of the container.