부트스트랩(Bootstrap)에서 특정 요소를 화면에 표시하지 않고 숨기려면 .hidden 클래스를 사용하면 됩니다. 이 클래스가 적용된 요소는 브라우저에서 렌더링되지 않으며, 사용자에게 보이지 않습니다.
예제
다음 코드를 실행하면 .hidden 클래스가 적용된 요소가 실제로 어떻게 숨겨지는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "row" style = "padding: 91px 100px 19px 50px;"> <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;"> This class is visible. </div> <div class = "hidden" style = "width:200px; background-color:#ccc;"> This is an example for hide class. This will be hidden. </div> </div> </body> </html>
함께 알아두면 좋은 유틸리티 클래스
위 예제에서 사용된 .show 클래스는 반대로 요소를 화면에 표시할 때 사용하는 클래스입니다. 즉, .show와 .hidden은 각각 '보이기'와 '숨기기' 기능을 담당하는 한 쌍의 헬퍼 클래스라고 할 수 있습니다.
또한 부트스트랩 3에서는 화면 크기별로 요소를 숨길 수 있는 반응형 유틸리티 클래스(.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg)도 함께 제공됩니다. 다만 부트스트랩 4 이상 버전에서는 이러한 클래스들이 .d-none, .d-block, .d-inline 같은 디스플레이(display) 유틸리티 클래스로 대체되었으므로, 프로젝트에서 사용하는 부트스트랩 버전에 맞는 클래스를 선택하는 것이 중요합니다.