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.
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.
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. programatically.
- 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.
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- CSS | visibility Property
- HTML | DOM Style visibility Property
- CSS | backface-visibility Property
- Scala | Controlling visibility of constructor fields
- What is the difference between visibility:hidden and display:none ?
- Method Visibility in Ruby
- SVG visibility Attribute
- How to Toggle Password Visibility in Android?
- Responsive images in Bootstrap with Examples
- Vertical alignment in Bootstrap with Examples
- List group in bootstrap with examples
- Containers in Bootstrap with examples
- Bootstrap | Close Icon for dismissing content with Examples
- Bootstrap | figure class with Examples
- Bootstrap | Float utilities with Examples
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.