{
   "Utilities": {
      "prefix": "!utility",
      "body": [
         "${1|!spacing,!shadow,!color,!font,!flex,!direction,!justify,!align,!display|}"
      ],
      "description": "Utilities: Forgot a utility? \n Read about them: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/api/"
   },
   "Padding / Margin": {
      "prefix": "!spacing",
      "body": [
         "${1|m,p|}${3|x,y,t,r,b,l|}-${4|auto,0,1,2,3,4,5|}"
      ],
      "description": "Quickly add Padding & Margins any class."
   },
   "Color": {
      "prefix": "!color",
      "body": [
         "${2|text,bg|}-${3|primary,secondary,success,danger,warning,info,light,dark|}"
      ],
      "description": "Quickly add color utility classes to any class."
   },
   "Font": {
      "prefix": "!font",
      "body": [
         "text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|italic,normal,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6| ,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}"
      ],
      "description": "Quickly add font utility classes to any class."
   },
   "Shadow": {
      "prefix": "!shadow",
      "body": [
         "shadow${1| ,-sm,-lg|} bg-${2|white,light,dark,primary,secondary,success,danger,warning,info|} ${3|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|}"
      ],
      "description": "Add shadow to any class"
   },
   "Utility Paper Shadow": {
      "prefix": "b5-shadow",
      "body": [
         "<div class=\"shadow${1| ,-sm,-lg|} p-3 mb-5 bg-${2|primary,secondary,success,danger,warning,info,light,dark|} ${3|!spacing,!color,!font|} \">${0}</div>"
      ],
      "description": "Utility Paper Shadow"
   },
   "Utility Color": {
      "prefix": "b5-color",
      "body": [
         "${2|text,bg|}${3|primary,secondary,success,danger,warning,info,light,dark|}"
      ],
      "description": "Text Utility"
   },
   "Utility Text": {
      "prefix": "b5-txt",
      "body": [
         "<${1|div,p,h1|} class=\"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|normal,italic,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6|none,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}\">",
         "${9:Left aligned text on all viewport sizes.}",
         "</${1|div,p,h1|}>"
      ],
      "description": "Text Utility"
   },
   "Utility Borders": {
      "prefix": "b5-borders",
      "body": [
         "<${1|div,p|} class=\"border${2| ,-0,-top,-right,-bottom,-left,-top-0,-right-0,-bottom-0,-left-0|} border-${3|white,primary,secondary,success,danger,warning,info,light,dark|} ${5| ,!round|}\">",
         "${10:Left aligned text on all viewport sizes.}",
         "</${1|div,p|}>"
      ],
      "description": "Utility Borders"
   },
   "Round - Round out any edge.": {
      "prefix": "!round",
      "body": [
         "${1|rounded,rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,rounded-pill|} ${2|rounded-sm,rounded-lg|}"
      ],
      "description": "Round - Round out any edge."
   },
   "Utility Spacing": {
      "prefix": "b5-spacing",
      "body": [
         "<${1|div,p,h1|} class=\"${2|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|} \">",
         "${0}",
         "</${1|div,p,h1|}>"
      ],
      "description": "Utility Spacing"
   },
   "Display Utilities:": {
      "prefix": "!display",
      "body": [
         "d-${2|flex,inline-flex,none,block,inline,inline-block,table,table-cell,table-row|} "
      ],
      "description": "Display Utilities:"
   },
   "Utilities MQ:": {
      "prefix": "!MQ",
      "body": [
         "${1|-sm-,-md,-lg-,-xl-,-xxl-|}"
      ],
      "description": "Display Utilities:"
   },
   "Flex Utility": {
      "prefix": "!flex",
      "body": [
         "d${1|-,!MQ|}${2|flex,inline-flex|} ${3| ,!direction,!justify,!align,!fill,!grow-shrink,!flex-wrap,!flex-order|}"
      ],
      "description": "Flex Utility: Create a flexbox container and transform direct children elements into flex items. \n\n Ends with an options to continue with other flex utilities,!direction,!justify,!align."
   },
   "Flex Direction": {
      "prefix": "!direction",
      "body": [
         "flex${1|-,!MQ|}${2|row,row-reverse,column,column-reverse|}"
      ],
      "description": "Flex Direction: Set the direction of flex items in a flex container with direction utilities"
   },
   "justify-content": {
      "prefix": "!justify",
      "body": [
         "justify-content${1|-,!MQ|}${2|start,end,center,between,around,evenly|}"
      ],
      "description": "justify-content: \n change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column) \n Read the docs: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#justify-content \n\n "
   },
   "Flex-Align": {
      "prefix": "!align",
      "body": [
         "align-${1|items,self,content|}${2|-,!MQ|}${3|start,end,center,baseline,stretch,around|}"
      ],
      "description": "Flex-Align: \n Read the docs: \n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#align-items \n\n 1. align-items: change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n  2. align-self: change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n 3. align-content: align flex items together on the cross axis. \n\n NOTE: CENTER & AROUND only apply to align Content."
   },
   "!fill": {
      "prefix": "!fill",
      "body": [
         "flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}"
      ],
      "description": "!fill - use on sibling elements to force them into widths equal to their content"
   },
   "!grow-shrink": {
      "prefix": "!grow-shrink",
      "body": [
         "flex${1|-,!MQ|}-${2|grow,shrink|}-${3|0,1|}"
      ],
      "description": "!grow-shrink - utilities to toggle a flex item’s ability to grow to fill available space"
   },
   "!flex-wrap": {
      "prefix": "!flex-wrap",
      "body": [
         "flex-${1|-,!MQ|}${2|wrap,nowrap,wrap-reverse|}"
      ],
      "description": "!flex-wrap - utilities to toggle a flex item’s ability to grow to fill available space."
   },
   "!flex-order": {
      "prefix": "!flex-order",
      "body": [
         "order-${1|-,!MQ|}${2|1,2,3,4,5,first,last|}"
      ],
      "description": "Flex Order - Change the visual order of specific flex items with a handful of order utilities."
   }
}