Bootstrap 4 align Facebook widget to right of div

Hi All

I am learning Bootstrap 4 and for the life of me I cannot work out how to align the Facebook widget to the right of a div.

I have tried so many things and none of them worked.

Here is the stripped back code I have:

<section style="background-color:#34373b; padding:5em;">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F&tabs=timeline&width=1500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
      </div>
      <div class="col border">
        <h3>HEADING</h3>
	<img src="images/facebook.png" alt="" class="rounded">
	<p class="text-white">Text.</p>
      </div>
    </div>	
  </div>
</section>

How do I align the Facebook widget to the right of the div?

Thanks for any help.

mrmbarnes

Hi,

You have the iframe in a .col div and a heading in the following .col div, so I assume the widget is currently on the left side.

Without reading the css there is only one solution: swap the columns. :wink:

Or tell what you have tried and post the relevant css you now have. :slight_smile:

Hi… yes… there is the Facebook widget on the left in a div and text etc on the right in a div.

I need to align the Facebook widget in the left div to align to the right of that div.

So the content of the div on the left is aligned to the right and the content of the div on the right is aligned to the left.

I can’t get the Facebook widget to align to the right in the left div.

Any help would be great.

mrmbarnes

I see, but without the relevant css there isn’t much to suggest changing or adding to the css you already have.

Mind I’m not fluent in Bootstrap.

Hopefully sombody knowing Bootstrap 4 in and out comes along and give you some common advice. :slight_smile:

Hey… Bootstrap is the CSS… there is no additional CSS added yet… I do not know if Bootstrap has the required CSS in it to do what I want or if additional CSS needs to be added.

It’s hard to see what’s happening without a working page or posting a complete working demo.

I do notice that the iframe has it’s width set to 100%. If it is indeed filling the width of it’s parent div then there would be no aligning it to the right. There again, I can’t see what is actually happening.

It looks like bootstrap does have a class="float-right" option for aligning images. So that says there are classes that are already set up for floating left or right.

It also notes that iframe is what bs calls Embeds and it shows classes being applied to them as well.

I’m not fluent in bootstrap either, trying to keep it that way.:slightly_smiling_face:

1 Like

Assuming you haven’t changed any of the default bootstrap classes you can swap the order of columns quite easily using order:1 on the column holding the widget because bs4 uses flexbox by default.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.fb-widget {
	order:1
}
.fb-widget iframe {
	background:red
}/* for testing*/
</style>
</head>

<body>
<section style="background-color:#34373b; padding:5em;">
  <div class="container-fluid">
    <div class="row">
      <div class="col fb-widget">
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F&tabs=timeline&width=1500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
      </div>
      <div class="col border">
        <h3>HEADING</h3>
        <img src="images/facebook.png" alt="" class="rounded">
        <p class="text-white">Text.</p>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Of course if you have applied various other styles to those elements it will be hard for us to guess as others have mentioned.

1 Like

Paul, I don’t think the OP is trying to swap columns. If you look back to post #3 his intentions are explained better.

So using the html you posted and changing the css to this should meet the requests in post 3.

<style>
.fb-widget iframe {
  background:red;
  float:right;
  width:50%;
}
</style>

But you’ll see I had to change the iframe width to show it aligning to the right of the left div. That 100% width conflict is what I mentioned earlier.

1 Like

Ah OK I got the wrong end of the stick.:slight_smile:

As you mention if the iframe is 100% of its left column then there is nothing that can be moved.

We need to see a working example to debug properly :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.