Today, I have a problem with bootstrap.

Like this image.

I want to remove horizontal scroll in grid bootstrap.

I think a problem is: I tried to add a slide image with new div.container > div.row contain a child div.container > div.row and I think this problem..

My code like this:

<div class="container">
    <div class="row">
        <div class="container">
            <div class="row"></div> <!-- /.row contain image slider-->
        </div> <!-- /.container contain image slider -->
    </div> <!-- /.row contain content of page-->
</div> <!-- /.container contain content of page-->

But I don't know how to fix this.

You can see my pen at here:

Today, I have a problem with bootstrap.

Like this image.

I want to remove horizontal scroll in grid bootstrap.

I think a problem is: I tried to add a slide image with new div.container > div.row contain a child div.container > div.row and I think this problem..

My code like this:

<div class="container">
    <div class="row">
        <div class="container">
            <div class="row"></div> <!-- /.row contain image slider-->
        </div> <!-- /.container contain image slider -->
    </div> <!-- /.row contain content of page-->
</div> <!-- /.container contain content of page-->

But I don't know how to fix this.

You can see my pen at here:

http://codepen.io/r0ysy0301/pen/zKoPAE

• javascript
• html
• css
• twitter-bootstrap

• You shouldn't be adding .container inside a .row. Why are you even using the grid layout? – Phil Commented Oct 5, 2016 at 3:37
• 2 and you can't have a .row inside a .row without it being in a grid column, grid markup should be the immediate child of .row – zanderwar Commented Oct 5, 2016 at 3:47
• I know. Thanks @Zanderwar – Ave Commented Oct 5, 2016 at 4:39

4 Answers 4

You can't insert a container INSIDE a container without changing its width. The container itself has min-width. Reference: http://getbootstrap.com/css/#grid-options

If you badly want to use a container, then use container-fluid.

Reference: http://getbootstrap.com/css/#grid-example-fluid

This is the edited html codes. Hope it helps.

http://www.bootply.com/IsEptxFAGG

The problem is that you have 2 nested .container div elements within your .tab-pane element. The .container class has a mediaquery that sets its width explicitly which makes it larger than the tab-pane.

@media (min-width: 1200px)
.container {
    width: 1170px;
}

You can probably fix it a couple of different ways:

1. You can change the overflow on the .tab-pane from overflow-y: auto to overflow-x: hidden which isn't really a great solution because it simply cuts the content off.

-- OR --

2. You could use a different class instead of the .container so that you are not bound to all of its explicit widths at different breakpoints.

Just define class of layout fluid, and the horizontal scrool bar is removed

<div class="container-fluid">

For me, the problem was I had a long number so that it couldn't be text-wrapped since there was no space between. I put text-break to class and fixed the text-wrapped issue. You can find the documentation here:

https://getbootstrap.com/docs/5.0/utilities/text/#word-break