ADB ADB - 2 months ago 9
HTML Question

How to keep Bootstrap slider confined to its div?

I've be trying to put together a website with the top of the page containing a navbar, image slider and testimonial quote (with the whole section taking up 100% of screen height. Then when the user scrolls down, the contact details are below.

I've split the container div (which is set to

height: 100vh, width: 100vw;)
into individual divs for each section (navbar, slider, testimonial) but the slider will not stay in its div. I want to make sure the slider is always fully visible with the testimonial below. For some reason the slider always hangs outside of the div (highlighted in red in my JSFiddle), and doesn't seem smoothly responsive (i.e. it pushes the text around). I'd really appreciate it if someone could point out where I'm going wrong:

https://jsfiddle.net/uy86dxd9/

Attempted solutions:
I've tried setting
img { height:50vh; width: auto; }
in the hope that that would remain the same size as its div, but that didn't work.
I've also tried clearing the float as I thought that might've collapsed, but no luck there.

Any questions, please ask :) Thanks in advance.

Answer

@Roope is correct. The red shape you had was outside because of the padding, but the problem was the nested container.

https://jsfiddle.net/uy86dxd9/2/

Just remove your sub-containers and just use rows and it goes away. There is still padding but Bootstrap removes this by using negative marings on the rows.

<div class="row">
    <div class="col-lg-offset-2 col-lg-8">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">

From the bootstrap docs (http://getbootstrap.com/css/):

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Basically, you don't need a .container[-fluid] around each row. The main container is enough. After that just use rows.

Comments