Bootstrap Carousel Controls Get Into The Other Divs

Question

I have made a simple site in Bootstrap and I used Bootstrap Carousel but the problem is that the controls of the image slider gets into the way of other layouts in SMALL DEVICES:

enter image description here

As you can see in this image the two controls gets into the blue div so its not a good thing however I have used the proper Bootstrap column system:

 <div class="row">
    <div class="container">
        <div class="col-md-3">
            <div class="box">
                <div class="header">
                    <h3 class="BHoma"><u><strong>اخبار سایت</strong></u></h3>
                </div>
                <div class="news">
                    <p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
                    <p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
                    <p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
                    <p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
                </div>
                <div class="down">
                    <hr>
                    <p class="BHoma"><a href="#"><< همه خبرها</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;" class="tales">
                        <div class="carousel-caption">
                            <h3>Los Angeles</h3>
                            <p>LA is always so much fun!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;" class="tales">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you, Chicago!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/3.jpg" alt="New York" style="width:100%;" class="tales">
                        <div class="carousel-caption">
                            <h3>New York</h3>
                            <p>We love the Big Apple!</p>
                        </div>
                    </div>

                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="box2">
                <form class="form" action="" method="POST">
                    <p><input type="text" name="" placeholder=""></p>
                    <p><input type="submit" name="" value="Submit"></p>
                </form>
            </div>
        </div>
    </div>
</div>

So do u have any idea on how can I correct this ?

Also you can checkout the site and test it...

Answer 1

You have row then container. You need to put the row inside the container for the columns to work properly. Right now your box content is getting shifted inside your col-md-6 because of the wonky layout. The classes that affect the columns aren't responding right because of it.

Edit: Actually, that isn't causing the issues. It's actually the float:left on the box class. It is making it disregard the col-md-3 that it is in and making the col-md-3 not have a height. If you put a media query on .box so that it only has float:left at a screen width of 992 or greater, then it would fix it.