What is the best way to align a bootstrap 5 iframe in the center?

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>


</div>

In my project using bootstrap 5, I am facing an alignment issue when using the "ratio" class with the iframe. The iframe is automatically aligned to the right. Is there a way to keep using the "ratio" class and still center-align the iframe?

cssbootstrap-5

Answer №1

Perhaps I'll receive some criticism for suggesting this given that HTML5 has deprecated it, but the <center> tag can be effective in this situation.

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fee2fd">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d1d12181c0602115016170d1111060919171347140814143901141717">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<center>
  <iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</center>

Answer №2

One alternative method is to apply 

style="display: flex; justify-content: center;"
to the outermost div element

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto" style="display: flex; justify-content: center;">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>


</div>

Answer №3

In order to properly center the div controlled by ratio width & height, you should move your flex-related classes to a div above:

<div class="flex justify-center items-center w-full">
<div class="ratio ratio-4x3 mx-auto>


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>


</div>
</div>

For Bootstrap 5 conversion of Tailwind classes, use 

justify-content-center align-items-center

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

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight

Unveiling the secrets to isolating elements from a list based on distinct characteristics

Currently, I am attempting to scrape job skills from the Wuzzuf website using the following code snippet: result = requests.get("https://wuzzuf.net/search/jobs/?q=data+analysis&a=navbl") src = result.content soup = BeautifulSoup(src, "lx ...

htmlcsspython-3.xweb-scraping

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function. Take a look at my code snippet below: HTML file -> <link rel="stylesheet" type="text/css" href="test_css.css" /> <script type="text/javascript ...

javascripthtmlcss

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Can someone please help me? I'm trying to identify the syntax highlighter being used in this code. Is it Prettify or something else? ...

javascriptcsstypographyadobe-edgeadobe-brackets

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...

javascripthtmlcssangularjsfomantic-ui

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

Avoid repeating media queries in MUI JSS by combining them efficiently

Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...

cssreactjsmaterial-uijss

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

I am seeking to customize the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) by implementing a basic hover message feature. The CSS attributes currently applied to disabled dates are as follows: .bo ...

javascriptjquerycsstwitter-bootstrapeonasdan-datetimepicker

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

javascripthtmlcssreactjs

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

htmlcss

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

htmlcssflexboxmargin

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

javascriptjqueryhtmlcss

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

javascriptcssreactjsnext.jsfrontend

Adjusting the height of a parent div according to the height of its children

Despite finding similar questions answered here, I am still struggling to make this work. I have two parent divs - one acts as a frame with a border and padding, the other has a solid black background, and the third is where a transparent image will be pl ...

css

The footer is not being properly pushed down by the DIV

I created a page and utilized toggle with jQuery. The layout of my page is great, but when clicking on the button to reveal content, the div remains fixed and my content expands and hides behind the footer. Take a look at the image here: https://i.stack.i ...

jqueryhtmlcss