[Bootstrap4 Display property] How to switch between display and hide on responsive sites
When creating a responsive site with the Bootstrap4 grid system, I summarized the switching method to display or hide depending on the width. I hope it will help you with the layout.
Contents
List of display / hide switching methods
The following describes the block element. Change as necessary.
xs : 576px-
Code
<div class="d-block d-sm-none">【A】</div> <div class="d-none d-sm-block">【B】</div>
Example
A
B
sm : 768px –
Code
<div class="d-block d-md-none">【A】</div> <div class="d-none d-md-block">【B】</div>
Example
A
B
md : 992px –
Code
<div class="d-block d-lg-none">【A】</div> <div class="d-none d-lg-block">【B】</div>
Example
A
B
lg : 1200px –
Code
<div class="d-block d-xl-none">【A】</div> <div class="d-none d-xl-block">【B】</div>
Example
A
B
Only [sm]（576px – 768px）
Code
<div class="d-none d-sm-block d-md-none">【A】</div> <div class="d-sm-none d-md-block">【B】</div>
Example
A
B
Only [md] (768px – 992px)
Code
<div class="d-none d-md-block d-lg-none">【A】</div> <div class="d-md-none d-lg-block">【B】</div>
Example
A
B
Only [lg] (992px – 1200px)
Code
<div class="d-none d-lg-block d-xl-none">【A】</div> <div class="d-lg-none d-xl-block">【B】</div>
Example
A
B
