{"id":109,"date":"2018-11-05T20:24:39","date_gmt":"2018-11-05T19:24:39","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/11\/05\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"how-to-use-animas-group-padding-with-our-bootstrap-buttons","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/","title":{"rendered":"How to use Animas Group Padding with our Bootstrap buttons"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"4096\" data-height=\"4096\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\"><br \/>\n<\/figure>\n<p>Ever since we first introduced Sketch2React we have gotten this question:<\/p>\n<p><em>\u201cLooks great but does it work with Anima or Paddy?\u201d<\/em><\/p>\n<p>Before that question was <em>Nope<\/em>. But today we say <strong>Yes!<\/strong> Why? Because the fine folks over at Anima app released a brand new version of their free amazing plugin that comes with a new feature: <strong>Group<\/strong> <strong>Padding!<\/strong><\/p>\n<p>And what lives inside Groups? Just about every complex <strong>Sketch2React Bootstrap Component that we have<\/strong>.<\/p>\n<p>We tried this with <strong>our buttons<\/strong> and best thing is, it doesn\u2019t break how our framework needs to be inside of Sketch for it to output HTML5 code. And, in a very near future, React code and components. Have you started salivating yet? ??<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"679\" data-height=\"438\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/0*RV9gsdfw68ccJqHx.gif\"><figcaption class=\"wp-caption-text\">In action<\/figcaption><\/figure>\n<h3>Just solve this for me, like\u00a0now<\/h3>\n<p>Feel like just jumping in and ignore how this was done? We totally feel you.<\/p>\n<p>Easy, just download <a href=\"https:\/\/www.dropbox.com\/s\/ip005iknbvxyzy3\/Anima%20Testing.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">this\u00a0.sketchfile<\/a>, it already has a ready made button with Anima padding attached to it that also works with our Render App. Man is it already Christmas? ??<\/p>\n<p><strong>Important:<\/strong> You need the latest version of the <a href=\"https:\/\/www.animaapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Anima Toolkit<\/a> (2.3.2) for this to work.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"478\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*JyB1B0bpXdfSSAxIWSan5g.gif\"><figcaption class=\"wp-caption-text\">ProTip! It also works with Anima Stacks! Make sure to mirror settings inside of Stacks with the ones you have set up with Sketch2React<\/figcaption><\/figure>\n<h3>Also works with\u00a0Stacks!<\/h3>\n<p>Did some fast tests today and great news, using the fine feature Stacks within Anima also works great with Sketch2React. <strong>Note!<\/strong> You still need to name things correctly, use our [classnames], put things inside Groups, call the the correct things etc.<\/p>\n<p>Anima just makes sure things look extra neat inside of Sketch, saves you the hurdle of needing to move things around manually. One approach that we see working really well is first make sure things are correctly set up and <em>Then<\/em> use <strong>Anima Stacks<\/strong> and <strong>Group Padding<\/strong>.<\/p>\n<h3>But hey I really want to know\u00a0man!<\/h3>\n<p>Okey let\u2019s break it down for you. It took some figuring out but we are extremely (borderline) stubborn here so yeah we solve things like this no matter how many hours it may take us. We just see potential here, a way to help you with your designer workflow even better than before.<\/p>\n<h3>Tutorial time!<\/h3>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1180\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*2yZqxlpQ0MM52WhC.png\"><figcaption class=\"wp-caption-text\">Text node set to Auto is da\u00a0shiznit<\/figcaption><\/figure>\n<h3>Text node set to\u00a0Auto<\/h3>\n<p>For some reason this works much better than not having it like this. Don\u2019t ask us why.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1180\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*kySB0qBqsLgKpDD3.png\"><figcaption class=\"wp-caption-text\">\u26a0\ufe0fWarning! Do not touch or remove these\u00a0ones<\/figcaption><\/figure>\n<h3>Invisible files need to be really\u00a0small<\/h3>\n<p>All of our interactive components have one or more \u201dinvisible files\u201d that do really important stuff. Basically these are regular Sketch text nodes (T) that just points to important places in our Previewer\/Render App.<\/p>\n<p><em>They are like little smurfs running around doing all of the hard work so that you need to do very little.<\/em> We call them invisible because they have 0% opacity inside Sketch.<\/p>\n<p>Now you may ask this question: <em>If they are so important wouldn\u2019t it be a really great idea to lock them inside of Sketch?<\/em> No can do. Sadly they stop working if you lock them. So don\u2019t lock them and don\u2019t delete them.<\/p>\n<p>In order for Animas Padding to work correctly we made <strong>attribute.url<\/strong> and <strong>attribute.target <\/strong>really really small (1pt) and put them centered inside the button group. <em>Do not move them!<\/em> If things start looking bonkers inside of Sketch they may have moved causing the Anima plugin to include them in the groups padding. We don\u2019t want that. You don\u2019t want that.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1180\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*hGCz6w-iLobyWkKu.png\"><figcaption class=\"wp-caption-text\">This little Rounded Rectangle controls the hover color of this\u00a0button<\/figcaption><\/figure>\n<h3>How to change the button hover\u00a0color<\/h3>\n<p>What is a button without a hover color? Nothing we say! It\u2019s like cake without icing\u200a\u2014\u200adull Goddamnit!<\/p>\n<p>In order to get the HOVER rectangle working we instead used the Rounded Rectangle (U) and made that also very small. Also important is to have it smaller in size than the main Text Node inside your button.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1180\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*tNSta8FQ7qSg_KcIDYLfwA.png\"><figcaption class=\"wp-caption-text\">This is where you change the Group\u00a0Padding<\/figcaption><\/figure>\n<h3>How to change the padding settings in\u00a0Anima<\/h3>\n<p>To change the Group Padding you just click on the that little folder icon you see up there \u261d\ufe0f<\/p>\n<blockquote><p>\n<strong>SUPER IMPORTANT! <\/strong>Don\u2019t forget to change the padding inside our {button-primary} <strong>[m10] <\/strong>or it will not change in code. Anima Group Padding takes care of making sure things look neat inside of Sketch, it will not look the same in code if you don\u2019t put in the same settings inside our <strong>[classname]<\/strong> thingies.<\/p><\/blockquote>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"468\" data-height=\"315\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*9yDmx6Y-8hLS4ak2hpgQSw.png\"><figcaption class=\"wp-caption-text\">Change also this one, or it will not look the same in code as it does inside of your Sketch design\u00a0files<\/figcaption><\/figure>\n<h4>Best of\u00a0luck!<\/h4>\n<p><a href=\"https:\/\/sketch2react.io\/\">https:\/\/sketch2react.io\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever since we first introduced Sketch2React we have gotten this question: \u201cLooks great but does it work with Anima or Paddy?\u201d Before that question was Nope. But today we say Yes! Why? Because the fine folks over at Anima app released a brand new version of their free amazing plugin that comes with a new&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to use Animas Group Padding with our Bootstrap buttons<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[29,94,95],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design","tag-sketch-plugin","tag-sketch-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Animas Group Padding with our Bootstrap buttons | Sketch2React Blog<\/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:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Animas Group Padding with our Bootstrap buttons - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Ever since we first introduced Sketch2React we have gotten this question: \u201cLooks great but does it work with Anima or Paddy?\u201d Before that question was Nope. But today we say Yes! Why? Because the fine folks over at Anima app released a brand new version of their free amazing plugin that comes with a new&hellip;&nbsp;Read More &raquo;How to use Animas Group Padding with our Bootstrap buttons\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-05T19:24:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to use Animas Group Padding with our Bootstrap buttons\",\"datePublished\":\"2018-11-05T19:24:39+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\"},\"wordCount\":796,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\",\"keywords\":[\"Design\",\"Sketch Plugin\",\"Sketch Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\",\"name\":\"How to use Animas Group Padding with our Bootstrap buttons - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\",\"datePublished\":\"2018-11-05T19:24:39+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Animas Group Padding with our Bootstrap buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Animas Group Padding with our Bootstrap buttons | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/","og_locale":"en_US","og_type":"article","og_title":"How to use Animas Group Padding with our Bootstrap buttons - Sketch2React Blog","og_description":"Ever since we first introduced Sketch2React we have gotten this question: \u201cLooks great but does it work with Anima or Paddy?\u201d Before that question was Nope. But today we say Yes! Why? Because the fine folks over at Anima app released a brand new version of their free amazing plugin that comes with a new&hellip;&nbsp;Read More &raquo;How to use Animas Group Padding with our Bootstrap buttons","og_url":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-11-05T19:24:39+00:00","article_modified_time":"2020-06-18T07:27:01+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to use Animas Group Padding with our Bootstrap buttons","datePublished":"2018-11-05T19:24:39+00:00","dateModified":"2020-06-18T07:27:01+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/"},"wordCount":796,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg","keywords":["Design","Sketch Plugin","Sketch Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/","url":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/","name":"How to use Animas Group Padding with our Bootstrap buttons - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg","datePublished":"2018-11-05T19:24:39+00:00","dateModified":"2020-06-18T07:27:01+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QjzZZkTJ91EBOAU8sxQNIQ@2x.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-animas-group-padding-with-our-bootstrap-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Animas Group Padding with our Bootstrap buttons"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}