How to show elements on smaller device in Bootstrap 5

How to show elements on smaller device in Bootstrap 5

Posted by Luke Beeno on February 28, 2022

How to show elements on smaller device in Bootstrap 5

How to show elements on smaller device 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 only displaying on smaller devices such as mobile phones and tablets:

<!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 smaller screens</h1>
    <div class="mt-3 d-block d-sm-block d-md-block d-lg-none d-xl-none d-xxl-none">show on small screen</div>
</div>
</body>
</html>