How to center responsive embedd bootstrap 3

Question

I'm trying to center my layout developed using bootstrap 3 and no matter what I try from previous threads, it doesn't seem to center.

I currently have this as the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 text-center"> <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM‌8wBObKeWWFuh5zqac5d8‌XMZcfe"></iframe> </div>

Do I need to change the CSS? Is there something I am missing here?

Here is where I am having the issue. startupmarketing.tammycamp.com

I actually tried all the the options here and none of them worked:

How do i center Youtube Video (iframe) in twitter bootstrap 3?

elmarko · Answer 1 · 2016-12-02T16:17:33.400

1

You should use the center-block class not text-center To centre a div using bootstrap. Text center will centre the the text, you want the container.

You also want to apply it to your div with class embed-responsive so that it centres within the row.

Info: http://getbootstrap.com/css/#helper-classes-center

Edit: Looking at how your code is set up now. Remove what you currently have and replace it with the following:

<div class="row">
    <div class="embed-responsive embed-responsive-16by9 center-block" style="max-width: 853px;">
    <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM8wBObKeWWFuh5zqac5d8XMZcfe"></iframe>
    </div>
</div>

As you can see we are wrapping the embed div in a .row class and we are adding an inline style of max-width:853px to match your iframe elements size. This allows the browser to calculate the size of the child div in the row class and allows Bootstraps inbuilt .center-block class to work

edited Dec 02 '16 at 16:17

answered Nov 27 '16 at 18:08

elmarko

813
7
17

Thanks for taking the time to answer my question. I did follow your instructions and modified the code to the page as follows and it still did not work. Any ideas? `

` – Tammy Camp Nov 29 '16 at 14:21
Can you update your question with your current code please? – elmarko Nov 29 '16 at 14:22
But wouldn't that we weird? The responses would be different. – Tammy Camp Dec 02 '16 at 16:00
Doesn't matter, I've looked at your current code on your live site and adapted that code to center your video – elmarko Dec 02 '16 at 16:18

score 0 · Answer 2 · answered Dec 02 '16 at 16:45

0

I was looking at your source code. Try adding a container around the div and centering it within the container using center-block. In order for bootstrap to work properly, you need either .container or .container-fluid class if using grid system.

answered Dec 02 '16 at 16:45

Tom

305
1
3
15

How to center responsive embedd bootstrap 3

2 Answers2