How to create a fixed sidebar layout with Bootstrap 4

Question

I m trying to create a layout like the screenshot using Bootstrap 4 but I m having some problems with making the sidebar fixed and achieving this layout at the same time   Going with a basic example    lt div class  container  gt     lt div class  row  gt       lt div class  col-m-4  id  sticky-sidebar  gt        Sidebar      lt  div gt       lt div class  col-m-8  id  main  gt        Main Area      lt  div gt     lt  div gt   lt  div gt    It s possible to get this layout but things get tricky once I declare     sidebar   position  fixed    or absolute     Once I make the sidebar sticky  the main div starts appearing behind the sidebar instead of next to it  Of course it s possible to declare some margin and push it back to it s original position but it makes things complicated for responsiveness   I feel like I m missing something  I read the Bootstrap 4 documentation but I couldn t find a simple way to achieve this layout

User · Answer

something like this    x000D   x000D   sticky-sidebar   x000D  position fixed  x000D  max-width  20   x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 5 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4  gt  x000D         lt div class  col-xs-12  id  sticky-sidebar  gt  x000D          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-xs-8  id  main  gt  x000D        Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div x000D   x000D   x000D

User · Answer

I used this in my code    lt div class  sticky-top h-100  gt       lt nav id  sidebar  class  vh-100  gt                 this cause your sidebar height become 100  and fixed at top

User · Answer

My version   div dashmain   margin-left 150px    div dashside  position fixed  width 150px  height 100        lt div id  dashside  gt  lt  div gt   lt div id  dashmain  gt                               lt div class  container-fluid  gt           lt div class  row  gt               lt div class  col-md-12  gt Content lt  div gt           lt  div gt                   lt  div gt           lt  div gt

User · Answer

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    lt div class  container  gt       lt div class  row py-3  gt           lt div class  col-3 order-2  id  sticky-sidebar  gt               lt div class  sticky-top  gt                                   lt  div gt           lt  div gt           lt div class  col  id  main  gt               lt h1 gt Main Area lt  h1 gt                              lt  div gt       lt  div gt   lt  div gt    Demo  https   codeply com go O9GMYBer4l  or  use position-fixed    lt div class  container-fluid  gt       lt div class  row  gt           lt div class  col-3 px-1 bg-dark position-fixed  id  sticky-sidebar  gt                           lt  div gt           lt div class  col offset-3  id  main  gt               lt h1 gt Main Area lt  h1 gt                           lt  div gt       lt  div gt   lt  div gt    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  quot drawer quot  in Bootstrap 4

User · Answer

I m using the J S  to fix a sidebar menu  I ve tried a lot of solutions with CSS but it s the simplest way to solve it  just add J S  adding and removing a native BootStrap class   position-fixed    The J S    var lateral   false  function fixar                  var element  name  arr              element   document getElementById  minhasidebar                 if  lateral                    element className   element className replace                            bposition-fixed b g                       lateral   false                else                    name    position-fixed                   arr   element className split                       if  arr indexOf name     -1                        element className          name                                    lateral   true                             The HTML   Sidebar    lt aside gt           lt nav class  sidebar   gt                lt div id  minhasidebar  gt                    lt ul class  nav nav-pills  gt                        lt li class  nav-item  gt  lt a class  nav-link active                        th href     hoje inicial   gt   lt i class  oi oi-clipboard  gt  lt  i gt                         lt span gt Hoje lt  span gt                        lt  a gt  lt  li gt                    lt  ul gt                lt  div gt           lt  nav gt               lt  aside gt

[html] How to create a fixed sidebar layout with Bootstrap 4?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4