Lynob Lynob - 1 year ago 110
HTML Question

Bootsrap carousel: remove bottom margin

here's the site. If you resize the window to a smaller size. You'll notice there's a bottom margin/padding caused by

.carousel-inner {
background-color: #03324c;

I could remove that but the indicators won't be visible and there will be an empty gap at the bottom . I know that that the images have different size, I tried resizing, same issue. I have tried many things for 2 days, nothing worked.

.carousel-inner {
background-color: #03324c;
.carousel-inner img {
margin-left: auto;
margin-right: auto;
margin-top: auto;
opacity: 0.7;
width: 100vw;
height: auto;
max-height: 100vh;
bottom: 0;
.carousel-caption h3 {
color: #fff !important;

Answer Source

You'd be better off using a background-image combined with background-size:cover on the .item elements.

For example, your first item would change to this (just remove the img tag):

<div class="item" style="min-height: 710px;">
  <div class="carousel-caption">
    <h3>New York</h3>
    <p>The atmosphere in New York is lorem ipsum.</p>

And the styling for the corresponding .item element would be this:

.item {
  background-image: url(images/medium/quote.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download