{"id":8367,"date":"2024-01-11T17:50:00","date_gmt":"2024-01-11T17:50:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8367"},"modified":"2024-01-22T15:51:37","modified_gmt":"2024-01-22T10:51:37","slug":"bootstrap-toggle-switch-with-text","status":"publish","type":"post","link":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/","title":{"rendered":"15+ Bootstrap Toggle Switch With Text"},"content":{"rendered":"

This code snippet showcases a Bootstrap-based toggle switch with text, offering an on\/off functionality. The switch comes in different sizes (large, default, small, and mini) and two color options (default and secondary). It provides an interactive way to toggle between options or states.<\/p>\n

The code is easy to integrate and customize according to your project’s needs, making it a valuable addition for implementing intuitive and user-friendly switches on your website or application.<\/p>\n

How to Create Bootstrap Toggle Switch With Text<\/h2>\n

1. First of all, load the Bootstrap CSS<\/a> by adding the following CDN link into the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-alpha.6\/css\/bootstrap.min.css'><\/pre>\n
2. Now, create the HTML structure for the toggle button. You can customize the toggle button by combining different size and color classes to achieve the desired appearance. For example, to create a small toggle button with the brand secondary color, add both btn-sm<\/code> and btn-secondary<\/code> classes to the button:<\/p>\n
<button type=\"button\" class=\"btn btn-toggle btn-sm btn-secondary\" data-toggle=\"button\" aria-pressed=\"false\" autocomplete=\"off\">\r\n<\/pre>\n
3. Use the following CSS code to style the toggle buttons.<\/p>\n
.btn-toggle {\r\n  margin: 0 4rem;\r\n  padding: 0;\r\n  position: relative;\r\n  border: none;\r\n  height: 1.5rem;\r\n  width: 3rem;\r\n  border-radius: 1.5rem;\r\n  color: #6b7381;\r\n  background: #bdc1c8;\r\n}\r\n.btn-toggle:focus,\r\n.btn-toggle.focus,\r\n.btn-toggle:focus.active,\r\n.btn-toggle.focus.active {\r\n  outline: none;\r\n}\r\n.btn-toggle:before,\r\n.btn-toggle:after {\r\n  line-height: 1.5rem;\r\n  width: 4rem;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 0.75rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 2px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  transition: opacity 0.25s;\r\n}\r\n.btn-toggle:before {\r\n  content: 'Off';\r\n  left: -4rem;\r\n}\r\n.btn-toggle:after {\r\n  content: 'On';\r\n  right: -4rem;\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle > .handle {\r\n  position: absolute;\r\n  top: 0.1875rem;\r\n  left: 0.1875rem;\r\n  width: 1.125rem;\r\n  height: 1.125rem;\r\n  border-radius: 1.125rem;\r\n  background: #fff;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.active {\r\n  transition: background-color 0.25s;\r\n}\r\n.btn-toggle.active > .handle {\r\n  left: 1.6875rem;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.active:before {\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-sm:before,\r\n.btn-toggle.btn-sm:after {\r\n  line-height: -0.5rem;\r\n  color: #fff;\r\n  letter-spacing: 0.75px;\r\n  left: 0.4125rem;\r\n  width: 2.325rem;\r\n}\r\n.btn-toggle.btn-sm:before {\r\n  text-align: right;\r\n}\r\n.btn-toggle.btn-sm:after {\r\n  text-align: left;\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-sm.active:before {\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-sm.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-xs:before,\r\n.btn-toggle.btn-xs:after {\r\n  display: none;\r\n}\r\n.btn-toggle:before,\r\n.btn-toggle:after {\r\n  color: #6b7381;\r\n}\r\n.btn-toggle.active {\r\n  background-color: #29b5a8;\r\n}\r\n.btn-toggle.btn-lg {\r\n  margin: 0 5rem;\r\n  padding: 0;\r\n  position: relative;\r\n  border: none;\r\n  height: 2.5rem;\r\n  width: 5rem;\r\n  border-radius: 2.5rem;\r\n}\r\n.btn-toggle.btn-lg:focus,\r\n.btn-toggle.btn-lg.focus,\r\n.btn-toggle.btn-lg:focus.active,\r\n.btn-toggle.btn-lg.focus.active {\r\n  outline: none;\r\n}\r\n.btn-toggle.btn-lg:before,\r\n.btn-toggle.btn-lg:after {\r\n  line-height: 2.5rem;\r\n  width: 5rem;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 1rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 2px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  transition: opacity 0.25s;\r\n}\r\n.btn-toggle.btn-lg:before {\r\n  content: 'Off';\r\n  left: -5rem;\r\n}\r\n.btn-toggle.btn-lg:after {\r\n  content: 'On';\r\n  right: -5rem;\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-lg > .handle {\r\n  position: absolute;\r\n  top: 0.3125rem;\r\n  left: 0.3125rem;\r\n  width: 1.875rem;\r\n  height: 1.875rem;\r\n  border-radius: 1.875rem;\r\n  background: #fff;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-lg.active {\r\n  transition: background-color 0.25s;\r\n}\r\n.btn-toggle.btn-lg.active > .handle {\r\n  left: 2.8125rem;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-lg.active:before {\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-lg.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-lg.btn-sm:before,\r\n.btn-toggle.btn-lg.btn-sm:after {\r\n  line-height: 0.5rem;\r\n  color: #fff;\r\n  letter-spacing: 0.75px;\r\n  left: 0.6875rem;\r\n  width: 3.875rem;\r\n}\r\n.btn-toggle.btn-lg.btn-sm:before {\r\n  text-align: right;\r\n}\r\n.btn-toggle.btn-lg.btn-sm:after {\r\n  text-align: left;\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-lg.btn-sm.active:before {\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-lg.btn-sm.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-lg.btn-xs:before,\r\n.btn-toggle.btn-lg.btn-xs:after {\r\n  display: none;\r\n}\r\n.btn-toggle.btn-sm {\r\n  margin: 0 0.5rem;\r\n  padding: 0;\r\n  position: relative;\r\n  border: none;\r\n  height: 1.5rem;\r\n  width: 3rem;\r\n  border-radius: 1.5rem;\r\n}\r\n.btn-toggle.btn-sm:focus,\r\n.btn-toggle.btn-sm.focus,\r\n.btn-toggle.btn-sm:focus.active,\r\n.btn-toggle.btn-sm.focus.active {\r\n  outline: none;\r\n}\r\n.btn-toggle.btn-sm:before,\r\n.btn-toggle.btn-sm:after {\r\n  line-height: 1.5rem;\r\n  width: 0.5rem;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 0.55rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 2px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  transition: opacity 0.25s;\r\n}\r\n.btn-toggle.btn-sm:before {\r\n  content: 'Off';\r\n  left: -0.5rem;\r\n}\r\n.btn-toggle.btn-sm:after {\r\n  content: 'On';\r\n  right: -0.5rem;\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-sm > .handle {\r\n  position: absolute;\r\n  top: 0.1875rem;\r\n  left: 0.1875rem;\r\n  width: 1.125rem;\r\n  height: 1.125rem;\r\n  border-radius: 1.125rem;\r\n  background: #fff;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-sm.active {\r\n  transition: background-color 0.25s;\r\n}\r\n.btn-toggle.btn-sm.active > .handle {\r\n  left: 1.6875rem;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-sm.active:before {\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-sm.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-sm.btn-sm:before,\r\n.btn-toggle.btn-sm.btn-sm:after {\r\n  line-height: -0.5rem;\r\n  color: #fff;\r\n  letter-spacing: 0.75px;\r\n  left: 0.4125rem;\r\n  width: 2.325rem;\r\n}\r\n.btn-toggle.btn-sm.btn-sm:before {\r\n  text-align: right;\r\n}\r\n.btn-toggle.btn-sm.btn-sm:after {\r\n  text-align: left;\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-sm.btn-sm.active:before {\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-sm.btn-sm.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-sm.btn-xs:before,\r\n.btn-toggle.btn-sm.btn-xs:after {\r\n  display: none;\r\n}\r\n.btn-toggle.btn-xs {\r\n  margin: 0 0;\r\n  padding: 0;\r\n  position: relative;\r\n  border: none;\r\n  height: 1rem;\r\n  width: 2rem;\r\n  border-radius: 1rem;\r\n}\r\n.btn-toggle.btn-xs:focus,\r\n.btn-toggle.btn-xs.focus,\r\n.btn-toggle.btn-xs:focus.active,\r\n.btn-toggle.btn-xs.focus.active {\r\n  outline: none;\r\n}\r\n.btn-toggle.btn-xs:before,\r\n.btn-toggle.btn-xs:after {\r\n  line-height: 1rem;\r\n  width: 0;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 0.75rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 2px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  transition: opacity 0.25s;\r\n}\r\n.btn-toggle.btn-xs:before {\r\n  content: 'Off';\r\n  left: 0;\r\n}\r\n.btn-toggle.btn-xs:after {\r\n  content: 'On';\r\n  right: 0;\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-xs > .handle {\r\n  position: absolute;\r\n  top: 0.125rem;\r\n  left: 0.125rem;\r\n  width: 0.75rem;\r\n  height: 0.75rem;\r\n  border-radius: 0.75rem;\r\n  background: #fff;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-xs.active {\r\n  transition: background-color 0.25s;\r\n}\r\n.btn-toggle.btn-xs.active > .handle {\r\n  left: 1.125rem;\r\n  transition: left 0.25s;\r\n}\r\n.btn-toggle.btn-xs.active:before {\r\n  opacity: 0.5;\r\n}\r\n.btn-toggle.btn-xs.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-xs.btn-sm:before,\r\n.btn-toggle.btn-xs.btn-sm:after {\r\n  line-height: -1rem;\r\n  color: #fff;\r\n  letter-spacing: 0.75px;\r\n  left: 0.275rem;\r\n  width: 1.55rem;\r\n}\r\n.btn-toggle.btn-xs.btn-sm:before {\r\n  text-align: right;\r\n}\r\n.btn-toggle.btn-xs.btn-sm:after {\r\n  text-align: left;\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-xs.btn-sm.active:before {\r\n  opacity: 0;\r\n}\r\n.btn-toggle.btn-xs.btn-sm.active:after {\r\n  opacity: 1;\r\n}\r\n.btn-toggle.btn-xs.btn-xs:before,\r\n.btn-toggle.btn-xs.btn-xs:after {\r\n  display: none;\r\n}\r\n.btn-toggle.btn-secondary {\r\n  color: #6b7381;\r\n  background: #bdc1c8;\r\n}\r\n.btn-toggle.btn-secondary:before,\r\n.btn-toggle.btn-secondary:after {\r\n  color: #6b7381;\r\n}\r\n.btn-toggle.btn-secondary.active {\r\n  background-color: #ff8300;\r\n}<\/pre>\n
4. Finally, load the jQuery<\/a> and Bootstrap JS to activate the toggle functionality.<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-alpha.6\/js\/bootstrap.min.js'><\/script><\/pre>\n
You can customize the toggle switch further by adjusting the Bootstrap classes and CSS styles to match your project’s design requirements. Additionally, you can modify the text labels, button sizes, colors, and positioning to suit your specific needs.<\/p>\n
That’s it! hopefully, you have successfully created Bootstrap Toggle Switch With Text. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code snippet showcases a Bootstrap-based toggle switch with text, offering an on\/off functionality. The switch comes in different sizes…<\/p>\n","protected":false},"author":1,"featured_media":8380,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-8367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"acf":[],"yoast_head":"\n15+ Bootstrap Toggle Switch With Text — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15+ Bootstrap Toggle Switch With Text — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T17:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:51:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"15+ Bootstrap Toggle Switch With Text\",\"datePublished\":\"2024-01-11T17:50:00+00:00\",\"dateModified\":\"2024-01-22T10:51:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\"},\"wordCount\":241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\",\"url\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\",\"name\":\"15+ Bootstrap Toggle Switch With Text — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png\",\"datePublished\":\"2024-01-11T17:50:00+00:00\",\"dateModified\":\"2024-01-22T10:51:37+00:00\",\"description\":\"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png\",\"width\":1280,\"height\":960,\"caption\":\"Bootstrap Toggle Switch With Text\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"15+ Bootstrap Toggle Switch With Text\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"15+ Bootstrap Toggle Switch With Text — CodeHim","description":"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.","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:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/","og_locale":"en_US","og_type":"article","og_title":"15+ Bootstrap Toggle Switch With Text — CodeHim","og_description":"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.","og_url":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T17:50:00+00:00","article_modified_time":"2024-01-22T10:51:37+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"15+ Bootstrap Toggle Switch With Text","datePublished":"2024-01-11T17:50:00+00:00","dateModified":"2024-01-22T10:51:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/"},"wordCount":241,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/","url":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/","name":"15+ Bootstrap Toggle Switch With Text — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png","datePublished":"2024-01-11T17:50:00+00:00","dateModified":"2024-01-22T10:51:37+00:00","description":"Here is a free code snippet to create Bootstrap Toggle Switch With Text. You can view live demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/07\/Bootstrap-Toggle-Switch-With-Text.png","width":1280,"height":960,"caption":"Bootstrap Toggle Switch With Text"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-toggle-switch-with-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https:\/\/codehim.com\/category\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"15+ Bootstrap Toggle Switch With Text"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":8258,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8367"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8380"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}