CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvideotwitter-bootstrap-3
Tammy Camp
Tammy Camp

Reputation: 1

How to center responsive embedd bootstrap 3

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?

Upvotes: 0

Views: 3041

Answers (2)

Tom
Tom

Reputation: 345

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.

Upvotes: 0

elmarko
elmarko

Reputation: 923

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

Upvotes: 1

Related Questions