[Bootstrap4 Display property] How to switch between display and hide on responsive sites

2019-10-30

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

sm : 768px –

Code

<div class="d-block d-md-none">【A】</div>
<div class="d-none d-md-block">【B】</div>

Example

md : 992px –

Code

<div class="d-block d-lg-none">【A】</div>
<div class="d-none d-lg-block">【B】</div>

Example

lg : 1200px –

Code

<div class="d-block d-xl-none">【A】</div>
<div class="d-none d-xl-block">【B】</div>

Example

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

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

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

Reference site

Display property · Bootstrap

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