Using Flexbox and Bootstrap 5 to create a responsive design with Aspect Ratio

This snippet of code showcases a unique two-column layout, utilizing both bootstrap and flexbox. The left column is dedicated to displaying video descriptions, while the right column houses the embedded video.

<div class="d-flex flex-row flex-wrap">
    <div class="col-md-5 col-12 pe-md-2 order-md-first order-last">
    placeholder
    </div>
    <div class="col-md-7 col-12 ps-md-2 ratio ratio-16x9">
        <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

However, there seems to be an issue with maintaining the correct aspect ratio within the flexbox constraints. Can you pinpoint what might be missing in this setup?

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

The .ratio class sets the width to 100% which can cause issues with the .col% class family. To address this, you have the option to nest the div with the ratio class within the .col:

<div class="container">
  <div class="row">
    <div class="col-5 order-md-first order-last">
      placeholder
    </div>
    <div class="col-7" <div class="ratio ratio-16x9">
      <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
</div>

Answer №2

In accordance with the instructions found in the Bootstrap documentation...

"When creating grid layouts, it's important to remember that all content should be placed within columns. The structure of Bootstrap’s grid follows a hierarchy from container to row to column to your content. While it is possible to combine content and column in some cases, be cautious as this may lead to unintended outcomes."

Therefore, it is essential to consider the aspect ratio inside the column...

<div class="d-flex flex-row flex-wrap">
    <div class="col-md-5 col-12 pe-md-2 order-md-first order-last">
    placeholder
    </div>
    <div class="col-md-7 col-12 ps-md-2">
        <div class="ratio ratio-16x9">
           <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to target specific text within the DOM without including text within attributes?

We are currently displaying search results from various posts on our website, and we would like to highlight the search terms in the displayed content. Currently, we are implementing this functionality on the backend using PHP. We iterate through the post ...

javascriptjqueryhtml

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

javascriptjquerycss

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

javascripthtmlwysiwygwysihtml5

What is the best way to implement dynamic generation of Form::date() in Laravel 8?

Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...

javascriptphphtmlajaxlaravel-8

Applying Bootstrap's inline styling to adjust the width of a label

I'm having trouble adjusting the width of a Bootstrap label using inline styles. Here is my code: <td><span class="label label-info" style="width:30px; text-align:center; background-color:#6d8cbf"> TEXT </span></td> Unfort ...

htmlcsstwitter-bootstrapwidthinline

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

Currently, I am utilizing MUI's Menu / MenuItem to create a menu of missions / tasks similar to the screenshot below: https://i.sstatic.net/6FGrx.png The MenuItem is interactive: // ... other code <MenuItem value={mission.issu ...

javascripthtmlcssreactjsmaterial-ui

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

javascripthtml

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

htmlcss

The Bootstrap 5 Navbar dropdown is not as responsive as the dropdown showcased in the official documentation

I tried utilizing Bootstrap 5 to implement a dropdown functionality, but unfortunately, the dropdown on my website isn't behaving as expected. Unlike the dropdown in the official Bootstrap documentation, my dropdown remains open at all times even when ...

htmlcssdrop-down-menufrontendbootstrap-5

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

javascriptcssreactjssasszurb-foundation

Tips for showing a message in the modal after a user completes the registration process

This code snippet contains an HTML form for user registration. Upon clicking the register button, users are redirected to another page. However, the desired outcome is to display the message on the same modal form. <div class="popup"> ...

phpjqueryajaxhtml

Issue with switching button and content positioned absolutely

Within this container, I have some content followed by a slide toggle button and then more content. The toggle button utilizes the jQuery function slideToggle. All elements within are positioned absolutely. [Introduction Content] Toggle Button [Hidden C ...

jqueryhtml

List layout enhancement provided by Bootstrap

I'm facing an issue with the layout of a feature list content box. While it looks good on desktop, there are problems in smaller versions like tablet and mobile devices. The four words with icons are breaking and I believe this might not be the best s ...

htmlcssbootstrap-4

Modifying the div based on the color it is positioned in front of

I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light ...

htmlcss

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Currently, I am in the process of creating a JavaScript script that can facilitate clicking through <a href> links by only replacing the inner HTML instead of reloading the entire page. The interesting thing is, it seems to be functioning properly, e ...

javascriptjqueryhtmlajax

Can a hashmap variable be declared in HTML code?

Can a hashmap variable be set in HTML code? Here's an example: <form name="f1234"> <input type="text" name="map['foo1']" value="dog" /> <input type="text" name="map['foo2']" value="cat" /> </form> < ...

htmlhashmap

Tips for utilizing socket.io for managing requests

Trying to implement socket.io for communication between an HTML page and an HTTP server, encountering the error message "Cannot POST / [HTTP/1.1 404 Not Found 1ms]". Below is the server-side code: var express = require('express'); var app = expr ...

htmlnode.jssocket.iohttprequest

Variables disappearing after hiding the flash application

In the div, I have a flash file embedded. This div is initially visible with display:block;. There are two other sister divs alongside this one. All three divs are controlled by jQuery tabs, which means when a different tab is clicked, the current visible ...

htmlcssflashdata-loss