[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

記事がお役に立ちましたらシェアお願いします！

▲