Custom code bss5

Bootstrap Studio Help
1

Hi
I have a simple Container|Row|(3)Column. When I put in a div and convert to html to put in custom code below either all three column contents disappear or all three column contents are overlapped the full width and height of the container. The very same layout works in bss4. I just want to display three videos horizontally in a row.

2

Hard to say exactly what’s happening without seeing your .bsdesign file, but you don’t have to convert a div to HTML to add custom code. There’s a dedicated Custom Code component (Studio Panel > Misc > Custom Code) that you can drag into your columns, and then no converting is required. Just double click it, add your code, and hit the Apply button.

Or, you can use the Responsive Embed component (also in Misc folder) which IMO is the easiest way to add YouTube videos. Just go to the YouTube video, click the Share icon, click the Embed icon, copy the iframe code, grab the URL portion with the video ID (example… https://www.youtube.com/embed/eQvVxY20yOY) and paste that into the Options > Responsive Embed Options > Source URL field.

(PS - Adding ?rel=0 after the video ID will show related videos from the same channel as the video that was just played.)

3

What is very odd is the code first below in bss4 as the first column contents formats correctly in the gui, ie you see a row with three placeholders for the column contents and when previewed it shows black, as expected and the other two column contents which are youtube videos display in a horizontal row.
Now, when the same code, first below, is pasted into the first column in bss5 it forces the entire column to be the width and height of the container.
Further if the code second below is pasted into all column contents in bss5 the minute the apply is clicked for the third column the entire row disappears from the gui. On preview all three videos show but in the full width and height of the container.
ver:6.4.5

<div class="embed-responsive embed-responsive-16by9"> <video width="560" 
height="315" autoplay loop>
<source th:src="@{/videos/easy.mp4}" type="video/mp4">
Your browser does not support the video tag.
</video></div>

`<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="https://www.youtube.com/embed/668nUCeBHyY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`
4

Bootstrap 5.3 no longer uses embed-responsive and is replaced by ratio:

ratio ratio-16x9

You can read more here:

1 Like
5

There are often issues going from older versions of Bootstrap to newer versions (like what @richards pointed out.)

Sometimes it’s best to start fresh rather than converting.