{"id":27237,"date":"2021-06-26T06:44:36","date_gmt":"2021-06-26T06:44:36","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=27237"},"modified":"2021-06-26T07:15:09","modified_gmt":"2021-06-26T07:15:09","slug":"bootstrap-4-ios-like-toggle","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/bootstrap-4-ios-like-toggle\/","title":{"rendered":"BOOTSTRAP 4 IOS LIKE TOGGLE"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Xavier Gmez Gonzlez<\/li><li>November 28, 2016<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS \/ JS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is a cool and amazing CSS only implementation of an iOS like switch toggle for Bootstrap 4. It uses standard markup from Bootstrap 4, so you only need to add the toggle class to your element and the SCSS to your style-sheet.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n\n<p><strong><em>Bootstrap version:<\/em><\/strong> 4.0.0<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/xavigomez\/share\/zip\/GNvbdP\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/xavigomez\/pen\/GNvbdP\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Xavier Gmez Gonzlez November 28, 2016 Made with: HTML \/ CSS \/ JS About the code: This is a cool and amazing CSS only implementation of an iOS like switch toggle for Bootstrap 4. It uses standard markup from Bootstrap 4, so you only need to add the toggle class to your element and the SCSS to your style-sheet. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: &#8211; Bootstrap version: 4.0.0<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":27238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7534],"tags":[4304,7546,7540,1916,1899],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/27237"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=27237"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/27237\/revisions"}],"predecessor-version":[{"id":27239,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/27237\/revisions\/27239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/27238"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=27237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=27237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=27237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}