Make column fixed position in bootstrap

Question

Using Bootstrap  I have a grid column class  col-lg-3  that I want to place it in position fixed while the other  col-lg-9 is normal position  scroll-able through the page     lt div class  row  gt       lt div class  col-lg-3  gt          Fixed content      lt  div gt       lt div class  col-lg-9  gt          Normal scrollable content      lt  div gt    lt  div gt    Just the same way like the left column in LifeHacker com You will see that the left part is fixed however I scroll though the page   I use bootstrap v3 1 1

User · Answer

iterating over Ihab s answer  just using position fixed and bootstraps col-offset you don t need to be specific on the width    lt div class  row  gt       lt div class  col-lg-3  style  position fixed  gt          Fixed content      lt  div gt       lt div class  col-lg-9 col-lg-offset-3  gt          Normal scrollable content      lt  div gt   lt  div gt

User · Answer

Following the solution here http   jsfiddle net dRbe4     lt div class  row  gt       lt div class  col-lg-3 fixed  gt          Fixed content      lt  div gt       lt div class  col-lg-9 scrollit  gt          Normal scrollable content      lt  div gt     lt  div gt    I modified some css to work just perfect    fixed           position  fixed          width  25      scrollit           float  left          width  71      Thanks  Lowkase for sharing the solution

User · Answer

With bootstrap 4 just use col-auto   lt div class  container-fluid  gt       lt div class  row  gt           lt div class  col-sm-auto  gt              Fixed content          lt  div gt           lt div class  col-sm  gt              Normal scrollable content          lt  div gt       lt  div gt   lt  div gt

User · Answer

in Bootstrap 3 class  affix  works  but in Bootstrap 4 it does not  I solved this problem in Bootstrap 4 with class  sticky-top   using position  fixed in CSS has its own problems   code will be something like this    lt div class  row  gt       lt div class  col-lg-3  gt           lt div class  sticky-top  gt              Fixed content          lt  div gt       lt  div gt       lt div class  col-lg-9  gt          Normal scrollable content      lt  div gt   lt  div gt

User · Answer

Use this  works for me and solve problems with small screen    lt div class  row  gt       lt  --  fixed content  JUST VISIBLE IN LG SCREEN -- gt       lt div class  col-lg-3 device-lg visible-lg  gt          lt div class  affix  gt             fixed position           lt  div gt       lt  div gt       lt div class  col-lg-9  gt       lt  --  fixed content  JUST VISIBLE IN NO LG SCREEN -- gt       lt div class  device-sm visible-sm device-xs visible-xs device-md visible-md   gt          lt div gt             NO fixed position          lt  div gt       lt  div gt         Normal data enter code here      lt  div gt   lt  div gt

User · Answer

lt div class  row  gt       lt div class  col-lg-3  gt          lt div class  affix  gt             fixed position           lt  div gt       lt  div gt       lt div class  col-lg-9  gt         Normal data enter code here      lt  div gt   lt  div gt

User · Answer

Updated for Bootstrap 4  Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS      lt div class  container  gt       lt div class  row  gt           lt div class  col-lg-3  gt               lt div class  position-fixed  gt                  Fixed content              lt  div gt           lt  div gt           lt div class  col-lg-9  gt              Normal scrollable content          lt  div gt       lt  div gt   lt  div gt    https   www codeply com go yOF9csaptw

User · Answer

Use  col instead of col-lg-3    lt div class  quot row quot  gt      lt div class  quot col quot  gt        Fixed content     lt  div gt      lt div class  quot col-lg-9 quot  gt        Normal scrollable content     lt  div gt   lt  div gt

[css] Make column fixed position in bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3