Twitter Bootstrap video is floating over the Main

user_15365398 0
Viewed 23

I want to have a video next to a paragraph. I set the row and cols, but when I visualize it, the paragraph takes 100% of the screen and the video floats OVER it, hiding part of the text behind it. It's not grid and I can't see why.

Here's the HTML5 code:

<section class="container-fluid">
            <div class="row">
                <div class="col-md-1">
                    <video muted autoplay loop> 
                        <source src="MyVid.mp4"> 
                    </video>
                </div>
                <div class="col-md-6">
                    <p>
                        Some Text
                    </p>
                </div>
            </div>
</section>

twitter-bootstrap program-entry-point video grid html
1 Answers

You reversed classes col-md-1 and col-md-6. Your video container was 8.3333333333% wide, and the container text was 50%. Rearrange these classes, and also add class w-100 for the <video> tag.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />

<section class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <video class="w-100" muted autoplay loop>
                <source src="http://vjs.zencdn.net/v/oceans.mp4" />
            </video>
        </div>
        <div class="col-md-1">
            <p>
                Some Text
            </p>
        </div>
    </div>
</section>

user_135734440
Related