{"id":788,"date":"2017-11-13T20:47:56","date_gmt":"2017-11-13T13:47:56","guid":{"rendered":"http:\/\/www.yellowweb.id\/blog\/?p=788"},"modified":"2017-11-13T20:47:56","modified_gmt":"2017-11-13T13:47:56","slug":"bootstrap-visible","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/","title":{"rendered":"Bootstrap Visible"},"content":{"rendered":"

Cari tahu yuk cara kerja Bootstrap utilities visible and hidden. Mungkin teman-teman cukup kesulitan ketika ingin menggunakan class visible dan hidden yang terdapat pada CSS Framework Bootstrap. Sebenarnya tidak terlalu sulit, jadi mari kita coba cari tahu cara kerja dari class tersebut, supaya lebih jelas.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<\/th>\nExtra small devices Phones (<768px)<\/small><\/th>\nSmall devices Tablets (\u2265768px)<\/small><\/th>\nMedium devices Desktops (\u2265992px)<\/small><\/th>\nLarge devices Desktops (\u22651200px)<\/small><\/th>\n<\/tr>\n<\/thead>\n
.visible-xs-*<\/code><\/th>\nVisible<\/td>\nHidden<\/td>\nHidden<\/td>\nHidden<\/td>\n<\/tr>\n
.visible-sm-*<\/code><\/th>\nHidden<\/td>\nVisible<\/td>\nHidden<\/td>\nHidden<\/td>\n<\/tr>\n
.visible-md-*<\/code><\/th>\nHidden<\/td>\nHidden<\/td>\nVisible<\/td>\nHidden<\/td>\n<\/tr>\n
.visible-lg-*<\/code><\/th>\nHidden<\/td>\nHidden<\/td>\nHidden<\/td>\nVisible<\/td>\n<\/tr>\n<\/tbody>\n
.hidden-xs<\/code><\/th>\nHidden<\/td>\nVisible<\/td>\nVisible<\/td>\nVisible<\/td>\n<\/tr>\n
.hidden-sm<\/code><\/th>\nVisible<\/td>\nHidden<\/td>\nVisible<\/td>\nVisible<\/td>\n<\/tr>\n
.hidden-md<\/code><\/th>\nVisible<\/td>\nVisible<\/td>\nHidden<\/td>\nVisible<\/td>\n<\/tr>\n
.hidden-lg<\/code><\/th>\nVisible<\/td>\nVisible<\/td>\nVisible<\/td>\nHidden<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Tabel diatas merupakan nama-nama class yang sudah ditentukan untuk setiap ukuran layar. Kuncinya teman-teman harus mengetahui kapan class tersebut terpanggil.<\/p>\n

Untuk file dan demonya silahkan teman-teman unduh dibawah artikel ini, kemudian jalankan di browser, lalu simulasikan ukuran layar dengan mengatur ukuran browser (responsive design mode).<\/p>\n

Untuk artikel saat ini yang teman-teman baca, sebagai referensi detailnya bisa dilihat di situs bootstrap
\nReferensi<\/strong>
\nurl: https:\/\/getbootstrap.com\/docs\/3.3\/css\/#responsive-utilities<\/a>
\nDemo<\/strong>
\nurl: http:\/\/www.yellowweb.id\/demo\/bootstrap-utilities\/<\/a>
\nDownload<\/strong>
\nurl: https:\/\/www.dropbox.com\/s\/7p95lb1mwmgjdko\/bootstrap-utilities.zip?dl=0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Cari tahu yuk cara kerja Bootstrap utilities visible and hidden. Mungkin teman-teman cukup kesulitan ketika ingin menggunakan class visible dan hidden yang terdapat pada CSS Framework Bootstrap. Sebenarnya tidak terlalu sulit, jadi mari kita coba cari tahu cara kerja dari class tersebut, supaya lebih jelas.<\/p>\n","protected":false},"author":1,"featured_media":790,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155],"tags":[7,157,378,377],"class_list":["post-788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-css-framework","tag-hidden","tag-visible"],"yoast_head":"\nBootstrap Visible - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Visible - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Cari tahu yuk cara kerja Bootstrap utilities visible and hidden. Mungkin teman-teman cukup kesulitan ketika ingin menggunakan class visible dan hidden yang terdapat pada CSS Framework Bootstrap. Sebenarnya tidak terlalu sulit, jadi mari kita coba cari tahu cara kerja dari class tersebut, supaya lebih jelas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-13T13:47:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg?fit=600%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Bootstrap Visible\",\"datePublished\":\"2017-11-13T13:47:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/\"},\"wordCount\":186,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/bootstrap-visible.jpg\",\"keywords\":[\"bootstrap\",\"css framework\",\"hidden\",\"visible\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/\",\"name\":\"Bootstrap Visible - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/bootstrap-visible.jpg\",\"datePublished\":\"2017-11-13T13:47:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/bootstrap-visible.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/bootstrap-visible.jpg\",\"width\":600,\"height\":290,\"caption\":\"bootstrap-visible\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/bootstrap-visible\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Visible\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Visible - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/","og_locale":"en_GB","og_type":"article","og_title":"Bootstrap Visible - YELLOWWEB.ID","og_description":"Cari tahu yuk cara kerja Bootstrap utilities visible and hidden. Mungkin teman-teman cukup kesulitan ketika ingin menggunakan class visible dan hidden yang terdapat pada CSS Framework Bootstrap. Sebenarnya tidak terlalu sulit, jadi mari kita coba cari tahu cara kerja dari class tersebut, supaya lebih jelas.","og_url":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2017-11-13T13:47:56+00:00","og_image":[{"width":600,"height":290,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg?fit=600%2C290&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Bootstrap Visible","datePublished":"2017-11-13T13:47:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/"},"wordCount":186,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg","keywords":["bootstrap","css framework","hidden","visible"],"articleSection":["Bootstrap"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/","url":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/","name":"Bootstrap Visible - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg","datePublished":"2017-11-13T13:47:56+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/11\/bootstrap-visible.jpg","width":600,"height":290,"caption":"bootstrap-visible"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/bootstrap-visible\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Visible"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":4,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions\/793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/790"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}