Bootstrap Utility API Generator

Utility Configuration

Define your utility classes using Bootstrap's Utility API format:

{
  "margin": {
    "property": "margin",
    "class": "m",
    "values": {
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "1rem",
      "4": "1.5rem",
      "5": "3rem",
      "auto": "auto"
    }
  },
  "padding": {
    "property": "padding",
    "class": "p",
    "values": {
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "1rem",
      "4": "1.5rem",
      "5": "3rem"
    }
  },
  "width": {
    "property": "width",
    "class": "w",
    "values": {
      "25": "25%",
      "50": "50%",
      "75": "75%",
      "100": "100%",
      "auto": "auto"
    }
  },
  "text-color": {
    "property": "color",
    "class": "text",
    "values": {
      "primary": "#007bff",
      "secondary": "#6c757d",
      "success": "#28a745",
      "danger": "#dc3545",
      "warning": "#ffc107",
      "info": "#17a2b8",
      "light": "#f8f9fa",
      "dark": "#343a40",
      "white": "#fff"
    }
  },
  "background-color": {
    "property": "background-color",
    "class": "bg",
    "values": {
      "primary": "#007bff",
      "secondary": "#6c757d",
      "success": "#28a745",
      "danger": "#dc3545",
      "warning": "#ffc107",
      "info": "#17a2b8",
      "light": "#f8f9fa",
      "dark": "#343a40",
      "white": "#fff"
    }
  }
}

Bootstrap Utility API Generator

Utility Configuration

Generated CSS

Live Demo