CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Ave
Ave

Reputation: 4430

How to remove horizontal scroll in bootstrap?

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

Upvotes: 2

Views: 18866

Answers (4)

Mr Kafir
Mr Kafir

Reputation: 21

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

Upvotes: 0

Darlan Dieterich
Darlan Dieterich

Reputation: 2537

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

<div class="container-fluid">

Upvotes: 6

sandalkoyak
sandalkoyak

Reputation: 265

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

Upvotes: 7

brian treese
brian treese

Reputation: 341

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 --

  1. 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.

Upvotes: 6

Related Questions