### Update 2021 - Use `scrollbar-gutter`

The `scrollbar-gutter` CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

```css
body {
  overflow-y: auto;
  scrollbar-gutter: stable;
}
```

### Example

[![scrollbar-gutter examples][1]][1]

### Demo in Stack Snippets and [jsFiddle][2]





    body {
      padding: 16px;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 273px);
        grid-gap: 16px;
    }
    .card-header {
      margin-bottom: 4px;
      white-space: pre-line;
      font-weight: bold;
    }
    .card-body {
      overflow: auto;
      border: 1px solid black;
      height: 120px;
      
    }
    .scrollbar-stable {
      scrollbar-gutter: stable;
    }



    <h1><code>scrollbar-gutter</code> sample</h1>

    <div class="grid">

      <div class="card">
        <pre class="card-header">
    overflow: auto;
    scrollbar-gutter: auto;
        </pre>
        <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
      </div>
      
      <div class="card">
        <pre class="card-header">
    overflow: auto;
    scrollbar-gutter: stable;
        </pre>
        <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
      </div>
      
      <div class="card">
        <pre class="card-header">
    overflow: auto;
    scrollbar-gutter: auto;
        </pre>
        <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
      </div>
      
      <div class="card">
        <pre class="card-header">
    overflow: auto;
    scrollbar-gutter: stable;
        </pre>
        <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
      </div>
      
    </div>




### Further Reading

* Docs
  * [scrollbar-gutter | MDN][3]
  * [scrollbar-gutter | CanIUse][4]
* Articles
  * [Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter][5]
  * [Explainer for the "scrollbar-gutter" CSS property.][6]
  * [scrollbar-gutter | CSS-Tricks][7]
* Specs
  * [CSS WG Blog – Minutes Telecon 2021-08-04][8]
  * [CSS Overflow Module Level 3][9]
* Related
  * [HTML reserve space for scrollbar](https://stackoverflow.com/questions/38266038/1366033)
  * [Prevent scroll-bar from adding-up to the Width of page on Chrome](https://stackoverflow.com/questions/18548465/1366033)
  * [Chrome reserves space for scrollbar even if it is hidden](https://stackoverflow.com/questions/25942835/1366033)
  * [CSS 100% width but avoid scrollbar](https://stackoverflow.com/questions/3541863/1366033)
* **Alternatively**, to have the scrollbar never take up space, see:
  * [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/q/16670931/1366033)

  [1]: https://i.stack.imgur.com/sWNe9.png
  [2]: https://jsfiddle.net/KyleMit/vdbp6oLe/
  [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
  [4]: https://caniuse.com/mdn-css_properties_scrollbar-gutter
  [5]: https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property/
  [6]: https://github.com/felipeerias/scrollbar-gutter-explainer
  [7]: https://css-tricks.com/almanac/properties/s/scrollbar-gutter/
  [8]: https://www.w3.org/blog/CSS/2021/08/05/minutes-telecon-2021-08-04/
  [9]: https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter-property

I am making an application with html and am needing to have a scroll bar. But whenever I add one it shifts everything over to make the necessary room needed for the scroll bar. This screws up the layout of the application. 

So I need a way to make the scroll bar simply overlay on top of the page, meaning the page is still there behind it. I already know how to style the scroll bar to make the back transparent, I just need the scroll bar to not take up any space.

Thanks In Advance!

Make scroll bar take no space / prevent layout shift

This appears to be working as I'd expect it to. [**According to the Documentation**][Grid Options], a small screen is anything less than **`768px`** which can actually be quite large. By opening the developer tools, you can see the screen dimensions whenever you resize a web page. You can use this to see how it deals with different breakpoints.

### Here's a live demo of your code:

## [jsFiddle with Original Code][Original Fiddle]

### Screenshot:

[![screenshot][screenshot]][Original Fiddle Demo]

### Solution:

If you would like it to still have two columns at anything below 768 pixels, then change `col-xs-12` to `col-xs-6`, like this:

<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row col-md-offset-0 col-lg-offset-2&quot;&gt;
        &lt;p&gt;&lt;b&gt;We Offer:&lt;/b&gt;&lt;/p&gt;
        &lt;div class=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4&quot;&gt;
            &lt;ul&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4 &quot;&gt;
            &lt;ul&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

## [Working Demo in jsFiddle][New Demo]


[screenshot]: http://i.imgur.com/XBLiBOz.png
[Original Fiddle]: http://jsfiddle.net/KyleMit/dpW85
[Original Fiddle Demo]: http://jsfiddle.net/KyleMit/dpW85/show/light
[Grid Options]: http://getbootstrap.com/css/#grid-options
[New Demo]: http://jsfiddle.net/KyleMit/dpW85/4/

The code correctly shows two columns on large screens. But for tablet sized screens, both divs take up their own row, each using 12 columns.  

I want each of them to be in the same container using 6 columns. I have tried changing the numbers in the classes `col-xs-12 col-sm-6 col-md-6 col-lg-4` 
but nothing has worked. 

Here's my code:

    <div class="container">
        <div class="row col-md-offset-0 col-lg-offset-2">
            <p><b>We Offer:</b></p>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 ">
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>
        </div>

How do I make the div inside the container use just 6 of the 12 columns in bootstrap 3?

Th column widths will all work fine with a regular set of classes like this:

    class="col-xs-12 col-sm-6 col-md-4"

It's just a matter of targeting `sm` sized screens to appropriately clear the content.  Based off my answer to [Change section order with Bootstrap 3][SO1], you could do something like this:



    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">1</div>
        <div class="col-xs-12 col-sm-6 col-md-4 middleDiv">2</div>
        <div class="col-xs-12 col-sm-6 col-md-4">3</div>
    </div>



    @media (min-width: 768px) and (max-width: 991px) { 
        .middleDiv {
           float: right;
        }
    }

## [Demo in Fiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]

[SO1]: https://stackoverflow.com/a/24872884/1366033
[fiddle]: http://jsfiddle.net/KyleMit/NDN7W/10
[fiddle-show]: http://jsfiddle.net/KyleMit/NDN7W/10/show

[screenshot]: http://i.imgur.com/h9qPozP.gif

I am trying the whole morning to solve this one. It looks obvious but somehow I can't make it work. 

I am using Bootstrap 3 and I want to have this effect with a 3 column layout

**On wide screens**  
3 column layout  
1 - 2 - 3


**On narrow screens**  
3rd column collapses under the first column to create a two column layout like:

1 | 2  
3 | 2 

At this point my 3rd column always stacks after the seconds column height!

**On phones**  
1  
2  
3  

Thanks in advance for any help