Hello guys. I’m trying to get a layout working and I’m almost there.
2 problems
My columns aren’t even height on the thumbnail sidebar - nothing major, I haven’t even looked into it yet.
The second, rather more pressing issue, is the columns wrapping in a strange way. I’ve tried everything I can google - every combination of adding rows, clearfix, clear:both and float: right with no avail.
The page looks great on xs, sm, md, and lg most of the time. There’s a width between md and lg where I’m having these issues.
I’m expecting the 4 widgets on the right sidebar to float right, below eachother in a straight line at all widths.
Instead, the widgets are wrapping and going into new lines
You need to separate your content with rows for the grid system to work as it should (especially when nesting cols). Here’s how the skeleton of your page should look with Bootstrap 4:
<div class="container-fluid">
<div class="row">
<!-- Header -->
<div class="col-12">
<h3 class="shu-course">Free Course</h3>
</div>
<!-- Main video container (md-6 half the screen) -->
<div class="col-md-6 col-12">
<div class="row">
<div class="col-12">
<div class="wistia_embed wistia_async_u51njmhjts videoFoam=true"></div>
<h2>#1 Welcome to Stage Hypnosis University [3:06]</h2>
<p class="lead">Bla bla bla</p>
</div>
</div>
</div>
<!-- Sidebar container md-5 with ml-auto (margin-left: auto) to push it to the right -->
<div class="col-md-5 ml-auto col-12">
<div class="row">
<!-- Video container -->
<div class="col-12" style="background-color: #2A2A2A;">
<!-- Video picture container -->
<div class="row p-1">
<div class="col-lg-6 dark-BG">
<img class="img-fluid" src="http://stagehypnosisuniversity.com/wp-content/forum/uploads/2017/08/love-business-min.jpg">
</div>
<!-- Video description -->
<div class="col-lg-6 dark-BG d-flex align-items-center">
<h2 class="SHU-video-title">#1 Welcome to Stage Hypnosis University [3:06]</h2>
</div>
</div>
</div>
</div>
</div>
</div><!-- End container row -->
</div><!-- End container -->
You don’t even need those containers for the video, all those extra paddings, floats and such. When using bootstrap you should always try to see if you can achieve something without any CSS (because, most of the time, you can). Lastly, you should link your scripts in the pen settings.
If you have any questions about the classes used in the code above, feel free to ask!