[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.

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 

Reference site

Related article