How to left column fixed and right scrollable in Bootstrap 4, responsive?

by

I’m not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here’s a simple layout with fixed left side (Split 50 50).

body, html {
    height: 100%;
}

#left {
    position: fixed;
    top: 0;
    bottom: 0;
}

To make the side fixed (or sticky) only at a specific point, position:sticky doesn’t work very well across all browsers. I’d use a plugin or polyfill as explained here: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

https://codeply.com/go/IuOp3nvCpy

enter image description here

Update Bootstrap 4.0.0 – The fixed-top class is now in Bootstrap which can be used on the left side column to remove the extra css that was required for position:fixed.

Update Bootstrap 4.1 – The h-100 class is now available which eliminates the extra CSS that was needed for height:100%: https://codeply.com/go/ySC2l4xcEi

Responsive – As mentioned in the comments, a media query can be used to make the layout responsive: https://codeply.com/go/pqzJB4thBY

Related:

Bootstrap col fixed position

How to create a fixed sidebar layout with Bootstrap 4?

More Related Contents:

  1. Wrapping bootstrap columns in extra div
  2. Bootstrap 4 Multiple fixed-top navbars
  3. Bootstrap 4 responsive navbar vertical
  4. Five equal columns in twitter bootstrap
  5. How to extend/modify (customize) Bootstrap with SASS
  6. Center the content inside a column in Bootstrap
  7. Bootstrap 4 navbar with 2 rows
  8. How to make the row stretch remaining height
  9. Bootstrap Rows and Columns – Do I need to use row?
  10. Missing visible-** and hidden-** in Bootstrap v4
  11. Responsive website zoomed out to full width on mobile
  12. Left align and right align within div in Bootstrap
  13. Disable responsive (mobile) navbar in Bootstrap
  14. Bootstrap – row can I have columns add up to more then 12?
  15. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  16. How to create a sticky left sidebar menu using bootstrap 3?
  17. Align the form to the center in Bootstrap 4 [duplicate]
  18. How to create new breakpoints in bootstrap 4 using CDN?
  19. Why is the Bootstrap Navbar always collapsed? [duplicate]
  20. Bootstrap 4 Navbar align logo center and toggle icon on the left
  21. Bootstrap 4 card-deck with number of columns based on viewport
  22. Missing visible-** and hidden-** in Bootstrap
  23. bootstrap 4 nav doesn’t display hamburger on resize
  24. How can I center an image in Bootstrap?
  25. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  26. Using media breakpoints in Bootstrap 4-alpha
  27. Bootstrap – I don’t want columns to have the same height
  28. How can I get my Twitter Bootstrap buttons to right align?
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Centering the navbar content in Bootstrap 4 (alpha 5)

Leave a Comment