How to show elements on bigger devices in Bootstrap 5

How to show elements on bigger devices in Bootstrap 5

Posted by Luke Beeno on February 28, 2022

Bootstrap can be used for fast mobile development. response display classes can be used to hide or display elements based on device.

In Bootstrap 5 the .d-none class is used or one of the .d-{sm,md,lg,xl,xxl}-none is used for any responsive screen variant. 

Here is a basic example that shows an element displaying only on bigger devices:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wecode101 responsive bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="mt-5 container">
    <h1>display content on big screen</h1>
    <div class="mt-3 d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">show on big screen</div>
</div>
</body>
</html>