Fitting Video In Slider (bootstrap 4.0)

For my school I have to do a website with a video slider. I chose to work with bootstrap 4.0. So far I got a template from it and tried to put a video inside it on one of the slide

Solution 1:

First you need to fix your layout. All the content of the body should be inside a container, row, and col-12.

<divclass="container"><divclass="row"><divclass="col-12"></div></div></div>

All of the carousel related code should go inside the col-12. Doing so, the carousel's width is the same as that of the nav, and there are free space on both sides of it.

The controllers are positioned absolute. Two of their parents are positioned relative. If you do not have enough information on CSS positioning, read this post.

There are a couple of ways to get the controllers outside of the carousel.

Method 1

1. Put the two controllers code below the container.

<divclass="container"><divclass="row"><divclass="col-12"></div></div></div><aclass="carousel-control-prev"href="#video-carousel-example2"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon bg-danger"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#video-carousel-example2"role="button"data-slide="next"><spanclass="carousel-control-next-icon bg-danger"aria-hidden="true"></span><spanclass="sr-only">Next</span></a>

3. Put all the above code inside an another element with position-relative class.

<divclass="position-relative"><divclass="container"><divclass="row"><divclass="col-12"></div></div></div><aclass="carousel-control-prev"href="#video-carousel-example2"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon bg-danger"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#video-carousel-example2"role="button"data-slide="next"><spanclass="carousel-control-next-icon bg-danger"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

Check this pen

Method 2

Override the position property of carousel and the col-12 using the code below. They are relatively positioned.

.position-initial {
  position: initial !important;
}

<divclass="postion-relative"><divclass="container"><divclass="row"><headerclass="col-12 position-initial"><!--Carousel Wrapper--><divid="video-carousel-example2"class="carousel slide carousel-fade position-initial"data-ride="carousel"></div></header></div></div></div>

Now, since the div with position-relative class has full width and the controllers are absolutely positioned, the controller are inside the full-width div.

Check this pen