Skip to main content

Creating HTTP Method Badges in BookStack

Method 1: HTML Badges (Recommended)

GET Badge

<span style="background-color: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">GET</span> https://doc-hub.qbitspark.com/api/attachments

POST Badge

<span style="background-color: #fd7e14; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">POST</span> https://doc-hub.qbitspark.com/api/attachments

PUT Badge

<span style="background-color: #007bff; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">PUT</span> https://doc-hub.qbitspark.com/api/attachments/{id}

DELETE Badge

<span style="background-color: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">DELETE</span> https://doc-hub.qbitspark.com/api/attachments/{id}

PATCH Badge

<span style="background-color: #6f42c1; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">PATCH</span> https://doc-hub.qbitspark.com/api/attachments/{id}

Method 2: Using Shields.io (External Images)

Dynamic Badges

![GET](https://img.shields.io/badge/GET-green?style=flat&logo=none&logoColor=white) https://doc-hub.qbitspark.com/api/attachments

![POST](https://img.shields.io/badge/POST-orange?style=flat&logo=none&logoColor=white) https://doc-hub.qbitspark.com/api/attachments

![PUT](https://img.shields.io/badge/PUT-blue?style=flat&logo=none&logoColor=white) https://doc-hub.qbitspark.com/api/attachments/{id}

![DELETE](https://img.shields.io/badge/DELETE-red?style=flat&logo=none&logoColor=white) https://doc-hub.qbitspark.com/api/attachments/{id}

Method 3: Markdown with Background Colors

Using HTML + Markdown Combo

<div style="margin: 10px 0;">
<span style="background-color: #28a745; color: white; padding: 6px 12px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; margin-right: 10px;">GET</span>

**Get Attachments**
</div>

Get a listing of attachments visible to the user.

`https://doc-hub.qbitspark.com/api/attachments`

Method 4: Complete API Endpoint Template

Full Endpoint Documentation Style

<div style="border: 1px solid #e1e5e9; border-radius: 8px; margin: 20px 0; overflow: hidden;">
  <div style="background-color: #f8f9fa; padding: 15px; border-bottom: 1px solid #e1e5e9;">
    <span style="background-color: #28a745; color: white; padding: 6px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold; margin-right: 15px;">GET</span>
    <code style="font-size: 16px; color: #495057;">/api/attachments</code>
  </div>
  <div style="padding: 20px;">
    <h4 style="margin: 0 0 10px 0; color: #343a40;">Get Attachments</h4>
    <p style="margin: 0; color: #6c757d;">Get a listing of attachments visible to the user. The external property indicates whether the attachment is simple a link.</p>
  </div>
</div>

Method 5: Table Format with Badges

API Endpoints Table

Method Endpoint Description
GET /api/attachments List all attachments
POST /api/attachments Create new attachment
PUT /api/attachments/{id} Update attachment
DELETE /api/attachments/{id} Delete attachment

Color Reference

Standard HTTP Method Colors

  • GET: #28a745 (Green)
  • POST: #fd7e14 (Orange)
  • PUT: #007bff (Blue)
  • DELETE: #dc3545 (Red)
  • PATCH: #6f42c1 (Purple)
  • OPTIONS: #6c757d (Gray)
  • HEAD: #17a2b8 (Cyan)

Quick Copy Templates

Individual Method Templates

<!-- GET -->
<span style="background-color: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">GET</span>

<!-- POST -->
<span style="background-color: #fd7e14; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">POST</span>

<!-- PUT -->
<span style="background-color: #007bff; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">PUT</span>

<!-- DELETE -->
<span style="background-color: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; font-weight: bold;">DELETE</span>

Copy any of these templates and customize the colors, text, or styling as needed!

No comments to display

Back to top