<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div>
  <h1>Hello World</p>
    <p>This is the content of the p element. It shrinks when I shrink the viewport</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Why is the content shrinking on resizing the viewport even though it does not have a container class? (any example to witness the difference between div having container-class and a non-container div will be highly appreciated)

CodePudding user response：

By default a div has 100% width, so it will shrink with the viewport if that is resized (and if the div is a direct child of body or of any other element that always fills the viewport's width).

Bootstrap has certain classes, but if none of those is used, a div must still behave like a "regular" div (i.e. any div without using bootstrap)

CodePudding user response：

Try using:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In the Head section of your HTML file