How to Put Scroll Bar Only for Modal-Body

How to put scroll bar only for modal-body?

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.

See the working sample:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 80vh;
    overflow-y: auto;
}

How to add scroll in bootstrap modal?

Bootsrap modals have this feature by default.

You just have to make edits to the .modal-dialog and .modal-content classes to make the modal full screen. Check out this fiddle for a working example :)

.modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

Set Bootstrap modal content to scroll if height exceeds browser

For Bootstrap versions >= 4.3

Bootstrap 4.3 added new scroll feature to modals. This makes only the modal-body content scroll if the size of the content would make the page scroll. This might not work for the OP's situation since they have other content in the modal-body, but it might be helpful to someone else. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

Here is an example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">  Launch demo modal</button>
<!-- Modal --><div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">  <div class="modal-dialog modal-dialog-scrollable" role="document">    <div class="modal-content">      <div class="modal-header">        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true">×</span>        </button>      </div>      <div class="modal-body">        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>        the<br>quick<br>brown<br>fox<br>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>    </div>  </div></div>

How to scroll the page when a modal dialog is longer than the screen?

Try:

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

It will arrange your modal and then give it an vertical scroll

bootstrap modal removes scroll bar

This is a feature, class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

You can override this by specifying

.modal-open {
    overflow: scroll;
}

in your own css.

Scrollbar on a specific div into bootstrap modal body

I did it making the height of the modal a fixed value:

#modalShare {
    margin-left:-200px;
    height: 300px;
 }

@media (max-width: 767px) {
    #modalShare {
        width: auto;
        margin-left: auto;
    }
}

#modalShareBody {
    overflow:hidden;
}

#panelGuest{
    width: 35%;
    float:left;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right:solid #ff920a 2px;
}

#panelDetail{
    float:left;
    width: 60%;
}

Is that what you need?

Bootstrap modal scroll bar appears and disappears after triggering the another modal

After adding following style ' style="overflow-y: auto;"' its working fine now:

<div class="modal fade" id="EventModalForm" style="overflow-y: auto;">
    <div class="modal-dialog" style="max-height:100%; max-width:100%;">
        <div class="modal-content">
            <div class="modal-header">
            </div>
        </div>
    </div>
</div>

How to add vertical scroll only for selected div inside bootstrap modal?

Add .addScroll div inside .col-sm-4 div set height of it with overflow-y element

.addScroll{  overflow-y:auto;  height: 200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>    <div class="modal fade" id="myModal" role="dialog">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal">×</button>                    <h4 class="modal-title">Modal Header</h4>                </div>                <div class="modal-body">                    <div class="row">                        <div class="col-xs- 8 col-sm-8  col-md-8 col-lg-8">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.</div>                        <div class="col-xs- 4 col-sm-4  col-md-4 col-lg-4">                            <div class=" addScroll">                                In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.                            </div>                        </div>                    </div>                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                </div>            </div>        </div>    </div></div>

How to Put Scroll Bar Only for Modal-Body