Bootstrap 提供了一些幫助器類，以便更快地實現對移動設備友好的開發。這些可以通過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。
需要謹慎使用這些工具，避免在同一個站點創建完全不同的版本。響應式實用工具目前只適用於塊和表切換。
| Class | 設備 |
|---|---|
| .visible-xs | 額外的小設備（小於 768px）可見 |
| .visible-sm | 小型設備（768 px 起）可見 |
| .visible-md | 中型設備（768 px 到 991 px）可見 |
| .visible-lg | 大型設備（992 px 及以上）可見 |
| .hidden-xs | 額外的小設備（小於 768px）隱藏 |
| .hidden-sm | 小型設備（768 px 起）隱藏 |
| .hidden-md | 中型設備（768 px 到 991 px）隱藏 |
| .hidden-lg | 大型設備（992 px 及以上）隱藏 |
打印類
下表列出了打印類。使用這些切換打印內容。
| Class | 打印 |
|---|---|
| .visible-print | 可見，可打印 |
| .hidden-print | 只對瀏覽器可見，不可打印 |
實例
下面的實例演示了上面所列舉的幫助器類的用法。調整瀏覽器的窗口大小，或者在不同的設備上加載實例，測試響應式實用工具類。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 響應式實用工具</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="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">特別小型</span> <span class="visible-xs">✔ 在特別小型設備上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">小型</span> <span class="visible-sm">✔ 在小型設備上可見</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">中型</span> <span class="visible-md">✔ 在中型設備上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">大型</span> <span class="visible-lg">✔ 在大型設備上可見</span> </div> </div> </body> </html>