aGuideHub

How to use hidden and visible in bootstrap?

May 09, 2022

Hi 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.

Bootstrap, Hidden-visible

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.

Bootstrap, Hidden-visible

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts