How to use hidden and visible in bootstrap?
May 09, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use hidden and visible in bootstrap with code example.
Table of contents
- Hiding elements
- Includes bootstrap view
- Includes bootstrap library
- Includes bootstrap library
- Define its class name
This article will guide you to adding hex color in Bootstrap with example.
Step 1: Hiding elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
To hide elements simply use the .d-none
class or one of the .d-{sm,md,lg,xl}-none
classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one .d-*-none
class with a .d-*-* class
, for example .d-none .d-md-block .d-xl-none
will hide the element for all screen sizes except on medium and large devices.
Step 2: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Step 3: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Step 4: Includes bootstrap library
Now, load the Bootstrap JavaScript file before closing the body tag and done.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Step 5: Define its class name
Here we will use .card d-none d-sm-block
class to use responsive display classes for showing and hiding elements by device.
<div class="container-fluid small">
<h3 class="my-3">
Hidden and visible in bootstrap 4
</h3>
<div class="row font-weight-bold align-items-center text-center">
<div class="col-2 text-left">
<h5 title="Current viuewport width breakpoint">
<span class="badge badge-light d-inline d-sm-none">xs</span>
<span class="badge badge-success d-none d-sm-inline d-md-none">sm</span>
<span class="badge badge-warning d-none d-md-inline d-lg-none">md</span>
<span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
<span class="badge badge-danger d-none d-xl-inline">xl</span>
</h5>
</div>
<div class="col bg-light">xs</div>
<div class="col bg-success">sm</div>
<div class="col bg-warning">md</div>
<div class="col bg-info">lg</div>
<div class="col bg-danger">xl</div>
</div>
<div class="row my-3">
<div class="col-12 col-md-2 font-weight-bold">hidden only on</div>
<div class="col small">d-none d-sm-block<span class="card d-none d-sm-block">.</span></div>
<div class="col small">d-sm-none d-md-block<span class="card border-success d-sm-none d-md-block">.</span></div>
<div class="col small">d-md-none d-lg-block<span class="card border-warning d-md-none d-lg-block">.</span></div>
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container-fluid small">
<h3 class="my-3">
Hidden and visible in bootstrap 4
</h3>
<div class="row font-weight-bold align-items-center text-center">
<div class="col-2 text-left">
<h5 title="Current viuewport width breakpoint">
<span class="badge badge-light d-inline d-sm-none">xs</span>
<span class="badge badge-success d-none d-sm-inline d-md-none">sm</span>
<span class="badge badge-warning d-none d-md-inline d-lg-none">md</span>
<span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
<span class="badge badge-danger d-none d-xl-inline">xl</span>
</h5>
</div>
<div class="col bg-light">xs</div>
<div class="col bg-success">sm</div>
<div class="col bg-warning">md</div>
<div class="col bg-info">lg</div>
<div class="col bg-danger">xl</div>
</div>
<div class="row my-3">
<div class="col-12 col-md-2 font-weight-bold">hidden only on</div>
<div class="col small">d-none d-sm-block<span class="card d-none d-sm-block">.</span></div>
<div class="col small">d-sm-none d-md-block<span class="card border-success d-sm-none d-md-block">.</span></div>
<div class="col small">d-md-none d-lg-block<span class="card border-warning d-md-none d-lg-block">.</span></div>
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Check the output of the above code example.
All the best 👍