How to make Bootstrap Modal dialog responsive on a real iPhone if it already works on an emulated iPhone on Google Chrome?

Question

I tried to make Bootstrap Modal box work and make it responsive, and read this question too: Bootstrap Modal Dialog. Can the grid system be used within a modal context?

However, the page worked well in Google Chrome, and worked well in Google Chrome simulated iPhone 5, 6, or 6 Plus (note: as simulated in developer tool) -- but not work on a real iPhone 6 Plus or iPad (in the portrait mode). (the text appears really huge).

Is there a way to make it work?

The code:

<div class="modal-body">
    <div class="container col-md-12">
        <div class="row">
            <p class="col-md-4">
                1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p class="col-md-4">
                2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p class="col-md-4">
                3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>
</div>

sample page on: http://skiesof.blue/try/

P.S. I am looking into this issue further. With my iPhone 6 Plus that has iOS 9.3.1, it seems to work well, but on an iPad with iOS 9.0 or 9.1, it has this when the modal is popped up:

Answer 1

Seems like this is an iOS9 issue and it's unrelated to the content of the modal. I haven't got an iPhone 6+ but I experienced the same issue on my iPad. Adding the following CSS made it work for me:

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

https://stackoverflow.com/a/32720590/1581477

https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 2

According to bootstrap example there is no need to add container col-md-12 after modal-body just add your html after modal-body.

<div class="modal-body">
  <div class="row">
    <div class="col-md-3">
      <p>1st col 3</p>
    </div>
    <div class="col-md-3">
      <p>2nd col 3</p>
    </div>
    <div class="col-md-3">
      <p>3rd col 3</p>
    </div>
    <div class="col-md-3">
      <p>4th col 3</p>
    </div>
  </div>
</div>