CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
h0neybaLL
h0neybaLL

Reputation: 101

How to adjust content in container in Bootstrap?

i'm having problem adjusting iframe in container. It looks like this:enter image description here

as you can see the iframe does not have full width and i don't know why. 

<div class="container container-kontakt-map">
<div class="row">
<div class="col-md-12">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
    </div>
</div>
</div>

This is html and here is css: 

  .container-kontakt-map {
margin-top: 70px;
width: 100%;
}

What am i doing wrong?

Upvotes: 0

Views: 77

Answers (2)

Blkc
Blkc

Reputation: 612

Inspecting the element in the console and you will see that container from Bootstrap has padding/margin. You can take off the container class to achieve full width result.

<div class="row container-kontakt-map">
    <div class="col-md-12">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
    </div>
</div>

Bootstrap Container

Upvotes: 1

Mateusz Nowak
Mateusz Nowak

Reputation: 4121

Container has a padding/margin, you need to get rid of it.

<div class="container-kontakt-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
</div>

Upvotes: 1

Related Questions