Adaptive layout on Bootstrap 4: what is the minimum supported screen resolution of an extra small mobile device?

Question

Bootstrap 4 documetration says:

Extra small devices (portrait phones, less than 576px)

It is clear that extra small are devices whose screen width is less than 576 px. Well, less than 576 px ... and how less? The grid cannot decrease to zero. There is a limit to which the layout using the Bootstrap grid can be compressed without noticeable design distortions. In addition, there are devices with a screen width that is much smaller than 576 px (320 or 240 px).

If we mathematically represent the supported screen width for extra small devices as an interval, we get [a, b), where b = 576 according to the documentation.. So then... what is a equalled to? The documentation does not cover this question.

There is an adaptive header in the code example below (container-fluid with row and 12 columns). In the developer’s tools in Chrome I found the value a = 360 that is the last value on which the grid is not yet distorted (witha = 359, the 12th column does not fit in width and goes to the "new row").

Of course, I can reset the paddings and then everything fits both 320 and 240 px, but this solution is not out of the box:

.row > div {
    padding: 0;
}

Is 360 px really the minimum supported screen width in Bootstrap 4?

Example for quick viewing:

.header {
  background: rgb(240,240,240);
  min-height: 70px;
  border-bottom: 1px solid gray;
  align-items: center;
  text-align: center;
}

.logo {
  border: 1px dashed black;
  height: 40px;
  width: 100px;
  display: inline-block;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row header">
    <div class="col-1">
      <i class="fas fa-bars"></i>
    </div>
    <div class="col-9 text-center">
      <div class="logo">Logo</div>
    </div>
    <div class="col-1">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <div class="col-1">
      <i class="fas fa-search"></i>
    </div>
  </div>
</div>

The same code for a simple copy to a text editor (maybe someone wants to look into the dev tools):

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <style type="text/css">
        .header {
            min-height: 70px;
            border-bottom: 1px solid gray;
            align-items: center;
            text-align: center;
        }

        .logo {
            border: 1px dashed black;
            height: 40px;
            width: 100px;
            display: inline-block;
        }
    </style>

</head>
<body>
    <div class="container-fluid">
        <div class="row header">
            <div class="col-1">
                <i class="fas fa-bars"></i>
            </div>
            <div class="col-9 text-center">
                <div class="logo">Logo</div>
            </div>
            <div class="col-1">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="col-1">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </div>
</body>
</html>

For literally everything that is that is less than 576px that styling will be aplied. Doesn't mean that that styling will look good for example for a screen width of 1px.. — Laurens, Jan 23 '19 at 09:21
@Laurens, it's okay. But there is resolutions that are less than default *extra small* 576 px (like 320 and 240 px). It looks like Bootstrap team does not consider the screen widths because the grid distorts with 359 px. Am I right? — Bogdan, Jan 23 '19 at 09:28

score 1 · Answer 1 · answered Jan 23 '19 at 09:43

1

You are right, the minimum supported resolution by bootstrap is 240 x 320 pixels. The developers of bootstrap have defined the minimum width taking in the view of the current market. Most of the feature bar phones that come in now a days have the resolution of 240x320 . However if you want to run the code into some old school bar such as Samsung Guru with res 128 x 160 you can custom define the media queries accordingly.

answered Jan 23 '19 at 09:43

SIDDHARTH

11
2

1

if the minimum supported resolution by bootstrap is 240x320 px then why the header in my example breaks down with width that equalled 359 px? – Bogdan Jan 23 '19 at 19:35

Adaptive layout on Bootstrap 4: what is the minimum supported screen resolution of an extra small mobile device?

1 Answers1