How it works
부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있다.
Examples
<!DOCTYPE HTML>
<html>
<head>
...
</head>
<body>
<div class="container">
<div class="row">
<!-- sm 사이즈의 디바이스에서는 가려짐 -->
<div class=".d-sm-none .d-md-block col-12">
콘텐츠
</div>
</div>
</div>
</body>
</html>**텍스트**d--none, d--block 과 같이 사용되며 특정 디바이스 크기에 대해 두 클래스를 조합해서 사용해야 한다.
Hiding elements
| Screen Size | Class |
|---|---|
| Hidden on all (모든 화면에서 숨기기) | .d-none |
| Hidden only on xs (xs 크기에서만 숨기기) | .d-none .d-sm-block |
| Hidden only on sm (sm 크기에서만 숨기기) | .d-sm-none .d-md-block |
| Hidden only on md (md 크기에서만 숨기기) | .d-md-none .d-lg-block |
| Hidden only on lg (lg 크기에서만 숨기기) | .d-lg-none .d-xl-block |
| Hidden only on xl (xl 크기에서만 숨기기)) | .d-xl-none |
| Visible on all (모든 화면에서 보이기) | .d-block |
| Visible only on xs (xs 크기에서만 보이기) | .d-block .d-sm-none |
| Visible only on sm (sm 크기에서만 보이기) | .d-none .d-sm-block .d-md-none |
| Visible only on md (md 크기에서만 보이기) | .d-none .d-md-block .d-lg-none |
| Visible only on lg (lg 크기에서만 보이기) | .d-none .d-lg-block .d-xl-none |
| Visible only on xl (xl 크기에서만 보이기) | .d-none .d-xl-block |
Reference:
https://jootc.com/p/201809291831
https://getbootstrap.com/docs/4.1/utilities/display/
Step by step goes a long way ✨