Corrected Bootstrap col position

Question

How can I fix the Bootstrap bit.

I tried so, but it does not work:

<div class="row"> <div class="col-md-6">Content goes here...</div> <div class="col-md-6" style=" position: fixed">Content goes here...</div> </div> 

fixed position makes col absolute.

And how to disable a fixed position when the page scrolls from the top of 400 pixels.

Answer 1

Use a multimedia query to apply a fixed position only to a specific screen width. For example, 768px is the breakpoint of Bootstrap 4 md :

CSS ( min-height is optional):

 @media (min-width: 768px) { .fixed-posi { width: 50%; margin-left: 50%; min-height:100%; position:fixed; } } 

Then use fixed-posi in a layout like this ...

  <div class="row"> <div class="col-md-6"> Content goes here... </div> <div class="col-md-6 fixed-posi">Content goes here... (fixed position) </div> </div> 

Demo: https://www.codeply.com/go/751CygARyO

A similar question (fixed DIV on the left): How to leave a column fixed and scrollable right in Bootstrap 4, responsive?