Visibility of elements in bootstrap with Examples

22 Sep, 2021
There are some situations where it is needed to hide some content on a webpage without affecting the layout of the page. Bootstrap uses the CSS visibility property and provide two classes visible and invisible to control the visibility of an element on a web page.These classes do not affect the layout i.e. invisible elements will still take up space in the layout. Content will be hidden both visually and for screen readers.invisible class This class of bootstrap is used to hide an element from the page. In the below program the heading h2 “Bootstrap Tutorial” is made hidden using this class. This class basically uses the visibility property of CSS and set it’s value to hidden. Even though the heading Bootstrap Tutorial is invisible, it’ll still take up space in the layout. 
HTML
<!DOCTYPE html><html><head>  <title>GeeksForGeeks</title>     <!-- Import Jquery -->  <script src=  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>     <!-- Import Bootstrap CSS and JS files -->  <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  <script src=  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script></head> <body>    <div class="container">      <div class="jumbotron">              <!-- Making invisible -->        <h1 class="invisible">Bootstrap Tutorial</h1>                    <p>            Bootstrap is the most popular HTML, CSS, and            JS framework for developing responsive,            mobile-first projects on the web.        </p>       </div>              <p>This is some text.</p>              <p>This is another text.</p>           </div></body></html>
Output:  
visible class This class of bootstrap is used to unhide an hidden element from the page. In the below program the heading h2 “Bootstrap Tutorial” is made visible using this class. This class basically uses the visibility property of CSS and set it’s value to visible. The visible class has no effect in the example below because elements are visible by default, but this class can be helpful when a previously invisible element is to be made visible. programmatically.  
HTML
<!DOCTYPE html><html><head>  <title>GeeksForGeeks</title>     <!-- Import Jquery -->  <script src=  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>     <!-- Import Bootstrap CSS and JS -->  <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src=  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script></head> <body>    <div class="container">      <div class="jumbotron">              <!-- Making visible -->        <h1 class="visible">GeeksForGeeks</h1>                    <p>            Bootstrap is the most popular HTML, CSS,            and JS framework for developing responsive,            mobile-first projects on the web.        </p>                </div>              <p>This is some text.</p>              <p>This is another text.</p>                </div></body></html>
Output:  
Important Points:  
The visible and invisible classes of Bootstrap uses the visibility property of CSS to hide and unhide elements.
The elements made hidden will still take up space on the layout. This class just hides and element and does not removes it.
These classes does not affect or uses the display property of CSS in any way to hide or unhide elements.
Reference: https://getbootstrap.com/docs/4.1/utilities/visibility/ 
akshaysingh98088
Picked
Technical Scripter 2018
Bootstrap
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?