Bootstrap - Visibility

This chapter discusses about the visibilty utilities provided by Bootstrap. These utiltiy classes control the visibility of elements, without altering the display of the element.

Following are the visibility classes provided by Bootstrap:

  • .visible - It is the default setting. The visible class shows data or visible data on the web page.

  • .invisible - It is used to hide or disappear the content of the application.

The .invisible class will hide the elements both visually and for the assistive technology or screen reader users.

Let us see an example for the utility classes .visible and .invisible:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Visibility</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-2">
      <h4 class="display-5 text-success">
          Visibility utility classes
      </h4>
    </div>
    <div class="container mx-5 p-3">
    <strong>The utility classes that controls the visibility of the content on the webpage.</strong>
      <p class="visible text-bg-primary">
         The text on the webpage is visible due to the use of visibility class ".visible".
      </p>
      <p class="invisible">
        The text on the webpage is not visible due to the use of visibility class ".invisible".
      </p>
      <p class="text-bg-warning">This is the text that is without a visibility class usage.</p>
    </div>
   </body>
</html>
Advertisements