This is pretty basic but I can’t figure it out. I have 2 columns on a page. I would like to keep one column with static infor on the right of the page while having another column with repeating data on the left. How do I keep the short column on the right side of the page (on desktop view anyhow)
Hello, just add container>row and inside the row two columns with size 6 for desktop size.
1 Like
Changing the setting on my columns didn’t seem to help but making the right column 2 in the order moved it over however it does not stay on top. The wrapped repeat region data pushes it down the page. How do I keep the repeat column on the left from wrapping to the top
I don’t really get what you mean.
Please post a link to your page here so I can check it.
Can you somehow explain which part of your page needs to be repeated/dynamic and what the final result should be as your layout is a bit strange currently?
For the left column you could use the pre-scrollable class which will set the max height to 350px with a scrollbar to cope with the overflow. See https://getbootstrap.com/docs/4.0/content/code/
You can then adjust this maximum height to suit as in
<div class="pre-scrollable" style="max-height: calc(100vh - 250px">
where 100vh is the viewable browser height and 250px, the height of navbars etc.
You should not be repeating the col-xl-6, if you want to have these in one column.
You should nest a row inside the column and add another columns there, to have them all repeated in the same main column.
So the structure should be:
container > row > col-xl-6(left) + col-xl-6(right) > row > col-12(repeat this)
1 Like
Thanks, the next suggestion worked for me but I think I will try this also on a separate test page
finally got to test his and it seems to work fine thanks. if I want to have it 2 col on laptop size also I just change the xl to the next size??