There is some nesting of containers in which there are grids for placing content, in which there are grids for placing content too. And at a certain point I needed to place the elements as a percentage of the screen. But bootstrap does not have a concept of size and therefore the percentage values ​​do not work. vw and vh do not work on ios , how to be? Is it really only with js ?

  • "But the bootstrap has no idea of ​​the size" is how? Styles any sizes are made. It is necessary in% relative to the entire screen or parent container? - Dmitry Kozlov
  • @DmitryKozlov, yes, you need relative to the entire screen. can I do something with css? - Ivan Petrov
  • Ie, if I understood correctly. The target object is in nested containers that are positioned according to the bootstrap mesh, but the target object itself must be positioned relative to the screen. those. regarding <body>? - Dmitry Kozlov
  • one
    getbootstrap.com/css/#grid , getbootstrap.com/css/#responsive-utilities and googling with the keywords responsive bootstrap. Have you even tried to reduce the browser window on the bootstrap home page or look in the phone emulation mode? - Dmitry Kozlov
  • one
    You can specify different column styles for different screen sizes. if you specify <div class = "col-lg-6 col-sm-12"> </ div> <div class = "col-lg-6 col-sm-12"> </ div> then they will be on the big screen near, and on the small one under the other - Dmitry Kozlov

1 answer 1

As you can not set the size in % , if the bootstrap percentage positioning.

Here are some standard media queries within which you can ask everything you need:

 /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }