Mark Pelf – Blog

Docker – ASP.NET Core with Nginx SSL Reverse Proxy – Part2

Mark Pelf — Wed, 19 Nov 2025 18:45:39 +0000

Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part2

This project demonstrates a Docker Compose setup with: 1) ASP.NET Core 8.0 MVC application; 2) Nginx reverse proxy with SSL termination

1 Introduction

This project is based on Docker/Container technology and demonstrates how to set up an ASP.NET Core application with Nginx as a reverse proxy, handling SSL termination.
The goal is to provide a secure HTTPS endpoint for the application while allowing for easy development and testing using Docker.

Article will for technical reasons be divided into 2 parts:

Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part1
Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part2

2 Pushing to Docker Hub

To push the ASP.NET Core application image to Docker Hub, follow these steps:

1- Build the ASP.NET Core application image:

   # build image
   docker build -t docker.io/markpelf/asp_net_app:1.0 . 
   # see images
   docker image ls

131-10pic.png

2- Log in to Docker Hub:

   docker login

3- push the image to Docker Hub:

   docker push docker.io/markpelf/asp_net_app:1.0

3 DockerCompose - Run from Docker Hub

To run the ASP.NET Core application from Docker Hub with Nginx reverse proxy and SSL, follow these steps:
1- Create a project_asp_ssl_02.yaml file with the following content:

# project_asp_ssl_02.yaml
# build & run project
# docker compose -p project_asp_ssl -f project_asp_ssl_02.yaml up -d
# see images
# docker image ls
# see containers
# docker ps -a
# stop project
# docker compose -p project_asp_ssl down

services:
  reverseproxy:
      build:
        context: .
        dockerfile: nginx.Dockerfile
      depends_on: 
        - asp_net_app
      ports:
        - "50443:443"
        - "50080:80"
      networks:
        - net01

  # main app
  asp_net_app:
    image: docker.io/markpelf/asp_net_app:1.0
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_URLS=http://+:8080
    ports:
      - "8080:8080"
    networks:
      - net01

networks:
  net01:

2- Copy folder ssl/ containing nginx.crt, nginx.key and nginx.pfx to the same directory as project_asp_ssl_02.yaml.
3- Import the pfx file as a trusted certificate. Follow the steps to import the pfx file as a trusted certificate on your machine.
4- Run the Docker Compose setup:

    # build & run project
    docker compose -p project_asp_ssl -f project_asp_ssl_02.yaml up -d
    # see images
    docker image ls
    # see containers
    docker ps -a
    # stop project
    docker compose -p project_asp_ssl down

5- Access the application:

HTTPS (recommended): https://localhost:50443

3.1 Running on Windows Box

Similar as in Part1.

4 Moving Docker images without Docker Hub

4.1 Using docker save and docker load

This is the most common and robust method for transferring Docker images between hosts without a registry. On the source machine.

    docker save -o my_image.tar my_image:tag

This command saves the Docker image named my_image with the specified tag into a single .tar archive file named my_image.tar. Transfer the .tar file.
Copy the my_image.tar file to the destination machine using tools like scp, rsync, or even a USB drive. On the destination machine.

    docker load -i my_image.tar

This command loads the Docker image from the my_image.tar file into the local Docker image repository on the destination machine.
Docker images compress well, so you can zip the .tar file before transferring it to save bandwidth and storage space.

4.2 Renaming and saving images

On the source machine, rename the images to match those specified in the new Docker Compose file:

    docker tag project_asp_ssl-asp_net_app:latest asp_net_app:1.3
    docker tag project_asp_ssl-reverseproxy:latest reverseproxy:1.3

    #Then save the renamed images to tar files:
    docker save -o asp_net_app-1.3.tar asp_net_app:1.3
    docker save -o reverseproxy-1.3.tar reverseproxy:1.3

Now we will delete the renamed images from the source machine to simulate a fresh environment on the destination machine:

    docker rmi asp_net_app:1.3
    docker rmi reverseproxy:1.3
    docker rmi project_asp_ssl-asp_net_app:latest
    docker rmi project_asp_ssl-reverseproxy:latest

4.3 New Docker Compose file

Here is new Docker Compose file, using local images instead of pulling from Docker Hub:

# project_asp_ssl_03.yaml
# build & run project
# docker compose -p project_asp_ssl -f project_asp_ssl_03.yaml up -d
# see images
# docker image ls
# see containers
# docker ps -a
# stop project
# docker compose -p project_asp_ssl down

services:
  reverseproxy:
      image: reverseproxy:1.3
      depends_on: 
        - asp_net_app
      ports:
        - "50443:443"
        - "50080:80"
      networks:
        - net01

  # main app
  asp_net_app:
    image: asp_net_app:1.3
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_URLS=http://+:8080
    ports:
      - "8080:8080"
    networks:
      - net01

networks:
  net01:

4.4 Loading images on destination machine and running Docker Compose

On the destination machine, load the saved images from the tar files:

    docker load -i asp_net_app-1.3.tar
    docker load -i reverseproxy-1.3.tar

Now, run the Docker Compose setup using the new Docker Compose file:

    # build & run project
    docker compose -p project_asp_ssl -f project_asp_ssl_03.yaml up -d
    # see images
    docker image ls
    # see containers
    docker ps -a
    # stop project
    docker compose -p project_asp_ssl down

All works as before, with the ASP.NET Core application accessible via HTTPS through the Nginx reverse proxy.

5 References

[1] Containerize a .NET app reference, https://learn.microsoft.com/en-us/dotnet/core/containers/publish-configuration

[2] Docker with SSL and an nginx reverse proxy, https://gist.github.com/dahlsailrunner/679e6dec5fd769f30bce90447ae80081

[99] https://github.com/MarkPelf/ArticlesCode , folder 130_project_asp_ssl_1

Docker – ASP.NET Core with Nginx SSL Reverse Proxy – Part1

Mark Pelf — Wed, 19 Nov 2025 18:42:41 +0000

Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part1

This project demonstrates a Docker Compose setup with: 1) ASP.NET Core 8.0 MVC application; 2) Nginx reverse proxy with SSL termination

1 Introduction

Article will for technical reasons be divided into 2 parts:

Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part1
Docker - ASP.NET Core with Nginx SSL Reverse Proxy - Part2

1.1 Architecture

Project has 2 Docker Containers (services):

reverseproxy - Nginx Reverse Proxy - Handles SSL termination and forwards requests to the ASP.NET app over HTTP.
asp_net_app - ASP.NET Core Hello World Application - The web application running on Kestrel server.

Exposed Ports:

50443 - HTTPS access to the application via Nginx reverse proxy.
50080 - HTTP access to the application via Nginx reverse proxy (redirects to HTTPS).
8080 - Direct HTTP access to the ASP.NET Core application (no SSL).

Communication Flow:

Https on port 50443
Client(Browser) --HTTPS:50443--> reverseproxy(SSLTermination) --HTTP:8080--> asp_net_app

Http on port 50080 (redirects to HTTPS)
Client(Browser) --HTTP:50080--> reverseproxy(SSLTermination) 
Client(Browser) <--Redirect.HTTPS:50443-- reverseproxy(SSLTermination) 
Client(Browser) --HTTPS:50443--> reverseproxy(SSLTermination) --HTTP:8080--> asp_net_app

Direct access to AspNetApp (no SSL)
Client(Browser) --HTTP:8080--> asp_net_app

1.2 Prerequisites (Windows box)

Docker and Docker Compose installed
OpenSSL (for generating SSL certificates)

2 DockerCompose - Build&Run - Setup Instructions (Windows box)

2.1 Generate SSL Certificates (Development Only)

Before running the containers, you need to generate self-signed SSL certificates:

2.1.1 Generate SSL Certificates

In Windows Terminal - WSL:

# Create ssl directory if it doesn't exist
mkdir -p ssl

# Generate self-signed certificate for development
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout ssl/nginx.key \
  -out ssl/nginx.crt \
  -subj "/C=RS/ST=Serbia/L=Belgrade/O=MyBussines/OU=DevOps/CN=localhost" \
  -addext "subjectAltName=DNS:localhost,IP:127.0.0.1" -passin pass:Password1!

This will create a ssl/ directory with:

nginx.crt - SSL certificate
nginx.key - SSL private key

2.1.2 Export a pfx that you can import / trust

In Windows Terminal - WSL:

sudo openssl pkcs12 -export -out ssl/nginx.pfx -inkey ssl/nginx.key -in ssl/nginx.crt

2.1.3 Import the pfx file as a trusted certificate

Follow the steps to import the pfx file as a trusted certificate on your machine.

Windows: Use the Certificate Manager (certmgr.msc) to import the nginx.pfx into "Trusted Root Certification Authorities".

2.2 Files

Ensure you have the following files in your project directory:

project_asp_ssl_01.yaml - Defines the services, networks, and volumes for the Docker Compose setup.
Dockerfile - Multi-stage build for the ASP.NET Core application.
nginx.Dockerfile - Builds the Nginx image with SSL configuration.
nginx.conf - Nginx configuration file with SSL settings.

2.2.1 project_asp_ssl_01.yaml - Docker Compose configuration

# project_asp_ssl_01.yaml
# build & run project
# docker compose -p project_asp_ssl -f project_asp_ssl_01.yaml up -d
# see images
# docker image ls
# see containers
# docker ps -a
# stop project
# docker compose -p project_asp_ssl down

services:
  reverseproxy:
      build:
        context: .
        dockerfile: nginx.Dockerfile
      depends_on: 
        - asp_net_app
      ports:
# Use other ports from 50443 and 50080 if those are not available on your machine:
        - "50443:443" 
        #- "50447:443" 
        #- "50080:80" 
        - "51080:80" 
      networks:
        - net01

  # main app
  asp_net_app:
    build:
      context: ../AspNetHelloWorld2/
      dockerfile: Dockerfile
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_URLS=http://+:8080
    ports:
      - "8080:8080"
    networks:
      - net01

networks:
  net01:

2.2.2 Dockerfile - Multi-stage build for ASP.NET app

# Build stage
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
WORKDIR /src

# Copy csproj and restore dependencies
COPY AspNetHelloWorld2.csproj .
RUN dotnet restore

# Copy everything else and build
COPY . .
RUN dotnet publish -c Release -o /app/publish --no-restore

# Runtime stage
FROM mcr.microsoft.com/dotnet/aspnet:8.0-alpine AS runtime
WORKDIR /app
COPY --from=build /app/publish .

# Expose port 8080
EXPOSE 8080

ENTRYPOINT ["dotnet", "AspNetHelloWorld2.dll"]

2.2.3 nginx.Dockerfile - Nginx reverse proxy image

FROM nginx

# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Create directory for SSL certificates
RUN mkdir -p /etc/nginx/ssl

# Copy SSL certificates
COPY ssl/nginx.crt /etc/nginx/ssl/nginx.crt
COPY ssl/nginx.key /etc/nginx/ssl/nginx.key

EXPOSE 80 443

CMD ["nginx", "-g", "daemon off;"]

2.2.4 nginx.conf - Nginx configuration with SSL settings

events {
    worker_connections 1024;
}

http {
    # Strip any incoming port from Host header (e.g., "example.com:80" -> "example.com")
    map $http_host $host_without_port {
        ~^(?[^:]+)(?::\d+)?$ $hn;
    }

    # Upstream ASP.NET Core app (listening only on HTTP 8080 inside its container)
    upstream aspnet_backend {
        server asp_net_app:8080;
    }

    # ---------------------------
    # HTTP listener (container 80)
    # ---------------------------
    server {
        listen 80 default_server;
        server_name _;

        # Force HTTPS with 308 (permanent, preserves method/body)
        location / {
            # Redirect explicitly to the published HTTPS port of NGINX (e.g., 50443 on host)
            # Use other ports from 50443 and 50080 if those are not available on your machine:
            return 308 https://$host_without_port:50443$request_uri;
            # return 308 https://$host_without_port:50447$request_uri;
        }
    }

    # ---------------------------------------
    # HTTPS reverse proxy (container 443 SSL)
    # ---------------------------------------
    server {
        listen 443 ssl default_server;
        server_name _;

        # TLS cert/key (self-signed or provided)
        ssl_certificate     /etc/nginx/ssl/nginx.crt;
        ssl_certificate_key /etc/nginx/ssl/nginx.key;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;

        # Optional security headers (uncomment after validation)
        # add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        # add_header X-Content-Type-Options nosniff;
        # add_header X-Frame-Options DENY;

        location / {
            proxy_pass http://aspnet_backend;
            proxy_http_version 1.1;

            # Connection / Upgrade
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection keep-alive;

            # Forward original host WITHOUT port for app logic
            proxy_set_header Host $host_without_port;
            proxy_set_header X-Forwarded-Host $host_without_port;

            # Forward scheme & external HTTPS port so ASP.NET Core can build correct absolute URLs
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header X-Forwarded-Port 50443;
            proxy_set_header X-Forwarded-Ssl on;

            # Client IP chain
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # Disable caching for upgraded connections
            proxy_cache_bypass $http_upgrade;
        }
    }
}

2.3 Services (Docker Containers)

2.3.1 reverseproxy

Built from nginx.Dockerfile
Handles SSL termination
Forwards requests to ASP.NET app via HTTP
Ports:
- 50443:443 (HTTPS)
- 50080:80 (HTTP, redirects to HTTPS)

2.3.2 asp_net_app

Built from Dockerfile using multi-stage build
ASP.NET Core 8.0 MVC application
Listens on port 8080 (HTTP only, SSL handled by proxy)
Port 8080 exposed for direct access (optional)

2.4 Build and Run

Start the containers:
In Windows Terminal:

# build & run project
docker compose -p project_asp_ssl -f project_asp_ssl_01.yaml up -d
# see images
docker image ls
# see containers
docker ps -a

Stop the containers:
In Windows Terminal:

# stop project
docker compose -p project_asp_ssl down

2.5 Access the Application

HTTPS (recommended): https://localhost:50443
HTTP (redirects to HTTPS): http://localhost:50080
Direct ASP.NET app (without SSL): http://localhost:8080

Note: Since we're using self-signed certificates, your browser will show a security warning. This is expected for development. Click "Advanced" and proceed to accept the certificate.

2.6 Screenshots from Windows Box

2.7 Production Considerations

For production deployment:

Use real SSL certificates from a Certificate Authority (Let's Encrypt, etc.)
Remove direct port exposure (8080) for the ASP.NET app
Add security headers in nginx configuration
Configure proper logging
Use Docker secrets for sensitive data

2.8 Troubleshooting

2.8.1 Check container logs:

docker compose -p project_asp_ssl logs asp_net_app
docker compose -p project_asp_ssl logs reverseproxy

2.8.2 Rebuild containers:

docker compose -p project_asp_ssl -f project_asp_ssl_01.yaml up -d --build

2.8.3 Check if containers are running:

docker ps

3 References

[1] Containerize a .NET app reference, https://learn.microsoft.com/en-us/dotnet/core/containers/publish-configuration

[2] Docker with SSL and an nginx reverse proxy, https://gist.github.com/dahlsailrunner/679e6dec5fd769f30bce90447ae80081

[99] https://github.com/MarkPelf/ArticlesCode , folder 130_project_asp_ssl_1

Custom Bootstrap 5 Breadcrumbs -Ver 6

Mark Pelf — Fri, 03 Oct 2025 08:43:09 +0000

Custom Bootstrap 5 Breadcrumbs -Ver 6

Custom Breadcrumbs for Bootstrap 5 framework

Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs. This is an improved version of the previously published article.

1 The need for better Breadcrumbs – ver6

This is a continuation of the article:
• Custom Bootstrap 5 Breadcrumbs -Ver 5
I will not repeat what was explained previously. Just continue to improve the code.

1.1 Problems with Bootstrap Themes

In version 4, I applied some text shadows for better readability of the text. Readability was not that good, so I improved it in this version.
But, that was not good enough for my clients. Text shadows were not liked by my clients. Main problem reported was READABILITY OF TEXT.
I agree with them in principle, the right solution is to do it properly. That means to inherit theme colors all the way and fully.

2 New solution

Here is the new CSS file (breadcrumb3.css) :


/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

/* Inherit text-bg-primary text color dynamically from any Bootstrap theme */
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
    /* here I am assigning my CSS variable --_bs-primary
       used in this library. First I look if Bootstrap CSS
       variable --bs-primary is defined, to get value from it.
       If not, then I assign default value #0d6efd */
       --_bs-primary: var(--bs-primary,#0d6efd);    
    /* Dynamic text colors that match text-bg-* classes - automatically detected by JavaScript
       Falls back to appropriate colors if JavaScript hasn't run yet or fails */
    --_bs-primary-text: var(--_bs-primary-text-dynamic, #fff);
    --_bs-primary-text-emphasis: var(--bs-primary-text-emphasis,#052c65);
    --_bs-primary-bg-subtle: var(--bs-primary-bg-subtle,#cfe2ff);

    --_bs-secondary: var(--bs-secondary,#6c757d);
    --_bs-secondary-text: var(--_bs-secondary-text-dynamic, #fff);
    --_bs-secondary-text-emphasis: var(--bs-secondary-text-emphasis,#0a3622);
    --_bs-secondary-bg-subtle: var(--bs-secondary-bg-subtle,#e2e3e5);

    --_bs-success: var(--bs-success,#198754);
    --_bs-success-text: var(--_bs-success-text-dynamic, #fff);
    --_bs-success-text-emphasis: var(--bs-success-text-emphasis,#0a3622);
    --_bs-success-bg-subtle: var(--bs-success-bg-subtle,#d1e7dd);

    --_bs-info: var(--bs-info,#0dcaf0);
    --_bs-info-text: var(--_bs-info-text-dynamic, #000);
    --_bs-info-text-emphasis: var(--bs-info-text-emphasis, #055160);
    --_bs-info-bg-subtle: var(--bs-info-bg-subtle,#cff4fc);

    --_bs-warning: var(--bs-warning,#ffc107);
    --_bs-warning-text: var(--_bs-warning-text-dynamic, #000);
    --_bs-warning-text-emphasis: var(--bs-warning-text-emphasis,#664d03);
    --_bs-warning-bg-subtle: var(--bs-warning-bg-subtle,#fff3cd);

    --_bs-danger: var(--bs-danger,#dc3545);
    --_bs-danger-text: var(--_bs-danger-text-dynamic, #fff);
    --_bs-danger-text-emphasis: var(--bs-danger-text-emphasis,#58151c);
    --_bs-danger-bg-subtle: var(--bs-danger-bg-subtle,#f8d7da);

    --_bs-light: var(--bs-light,#f8f9fa);
    --_bs-light-text: var(--_bs-light-text-dynamic, #000);
    --_bs-light-text-emphasis: var(--bs-light-text-emphasis,#495057);
    --_bs-light-bg-subtle: var(--bs-light-bg-subtle,#fcfcfd);

    --_bs-dark: var(--bs-dark,#212529);
    --_bs-dark-text: var(--_bs-dark-text-dynamic, #fff);
    --_bs-dark-text-emphasis: var(--bs-dark-text-emphasis,#495057);
    --_bs-dark-bg-subtle: var(--bs-dark-bg-subtle,#ced4da);

    --_bs-gray: var(--bs-gray,#6c757d);
    --_bs-white: white;
    --_bs-black: black;

    /* changeable colors */
    --_bgcolor: var(--_bs-info);
    --_color: var(--_bs-black);
    --_bg-subtle: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

@media (max-width: 767px) {
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg  .breadcrumb3-item {
        width: 80% ;
        border-radius: 4px 0 0 4px;
        padding-left: 25px ;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 20px ;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 18px ;
    }
}

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
/*text-shadow: -1px -1px 2px var(--_bg-subtle), 0 -1px 2px var(--_bg-subtle), 1px -1px 2px var(--_bg-subtle), 1px 0 2px var(--_bg-subtle), 1px 1px 2px var(--_bg-subtle), 0 1px 2px var(--_bg-subtle), -1px 1px 2px var(--_bg-subtle), -1px 0 2px var(--_bg-subtle);
    */
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_color);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
  outline: none;
}

/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_color);
    margin-top: -16px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_color);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
    --_color: var(--_bs-primary-text);
    --_bgcolor: var(--_bs-primary);
    --_bg-subtle: var(--_bs-primary-bg-subtle);
    --_hover-bgcolor: var(--_bs-success);
    --_hover-color: var(--_bs-success-text);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--_bs-secondary-text);
    --_bgcolor: var(--_bs-secondary);
    --_bg-subtle: var(--_bs-secondary-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--_bs-success-text);
    --_bgcolor: var(--_bs-success);
    --_bg-subtle: var(--_bs-success-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--_bs-info-text);
    --_bgcolor: var(--_bs-info);
    --_bg-subtle: var(--_bs-info-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--_bs-warning-text);
    --_bgcolor: var(--_bs-warning);
    --_bg-subtle: var(--_bs-warning-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--_bs-danger-text);
    --_bgcolor: var(--_bs-danger);
    --_bg-subtle: var(--_bs-danger-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--_bs-light-text);
    --_bgcolor: var(--_bs-light);
    --_bg-subtle: var(--_bs-light-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

.breadcrumb3-lg .dark, .breadcrumb3-md .dark, .breadcrumb3-sm .dark {
    --_color: var(--_bs-dark-text);
    --_bgcolor: var(--_bs-dark);
    --_bg-subtle: var(--_bs-dark-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text);
}

Here is the new JavaScript file (breadcrumb3-dynamic-colors.js):


/**
 * Dynamic Color Detection for Bootstrap Breadcrumb3
 * Automatically extracts colors from Bootstrap text-bg-* classes
 * and updates CSS custom properties for breadcrumb3 components
 * 
 * Author: Mark.Pelf
 */

(function() {
    'use strict';

    /**
     * Extracts the computed color from a Bootstrap text-bg class
     * @param {string} className - The Bootstrap class name (e.g., 'text-bg-primary')
     * @returns {string} The computed color value
     */
    function getTextBgColor(className) {
        // Create a temporary element with the Bootstrap class
        const tempElement = document.createElement('div');
        tempElement.className = className;
        tempElement.style.position = 'absolute';
        tempElement.style.visibility = 'hidden';
        tempElement.style.pointerEvents = 'none';
        tempElement.style.top = '-9999px';

        // Add to DOM temporarily to compute styles
        document.body.appendChild(tempElement);

        // Get the computed color
        const computedStyle = window.getComputedStyle(tempElement);
        const color = computedStyle.color;

        // Remove the temporary element
        document.body.removeChild(tempElement);

        return color;
    }

    /**
     * Updates CSS custom properties based on Bootstrap text-bg classes
     */
    function updateBreadcrumbColors() {
        try {
            // All 8 basic Bootstrap color variants with their corresponding CSS properties
            const colorVariants = [
                { class: 'text-bg-primary', property: '--_bs-primary-text-dynamic', fallback: '#fff' },
                { class: 'text-bg-secondary', property: '--_bs-secondary-text-dynamic', fallback: '#fff' },
                { class: 'text-bg-success', property: '--_bs-success-text-dynamic', fallback: '#fff' },
                { class: 'text-bg-info', property: '--_bs-info-text-dynamic', fallback: '#000' },
                { class: 'text-bg-warning', property: '--_bs-warning-text-dynamic', fallback: '#000' },
                { class: 'text-bg-danger', property: '--_bs-danger-text-dynamic', fallback: '#fff' },
                { class: 'text-bg-light', property: '--_bs-light-text-dynamic', fallback: '#000' },
                { class: 'text-bg-dark', property: '--_bs-dark-text-dynamic', fallback: '#fff' }
            ];

            const detectedColors = {};

            colorVariants.forEach(variant => {
                try {
                    const color = getTextBgColor(variant.class);
                    document.documentElement.style.setProperty(variant.property, color);
                    detectedColors[variant.class] = color;
                } catch (error) {
                    console.warn(`Breadcrumb3: Could not detect color for ${variant.class}, using fallback ${variant.fallback}`);
                    document.documentElement.style.setProperty(variant.property, variant.fallback);
                    detectedColors[variant.class] = variant.fallback;
                }
            });

            console.log('Breadcrumb3: Dynamic colors updated successfully');
            console.log('Detected colors:', detectedColors);

            return detectedColors;

        } catch (error) {
            console.warn('Breadcrumb3: Could not detect Bootstrap colors, using fallbacks', error);
            return null;
        }
    }

    /**
     * Initialize color detection when DOM is ready
     */
    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateBreadcrumbColors);
        } else {
            // DOM already loaded
            updateBreadcrumbColors();
        }

        // Also update when window loads (in case Bootstrap CSS loads asynchronously)
        window.addEventListener('load', updateBreadcrumbColors);
    }

    /**
     * Public API to manually refresh colors (useful when switching themes dynamically)
     */
    window.Breadcrumb3 = window.Breadcrumb3 || {};
    window.Breadcrumb3.refreshColors = updateBreadcrumbColors;
    window.Breadcrumb3.getDetectedColors = function() {
        return updateBreadcrumbColors();
    };

    // Initialize
    init();

})();

And demo HTML hasn’t changed much.






     
      

    
    
     
    

    
    



    
    Large size, info case
    
        Accounts
        Account number
123456
        Details
    
    Large size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Large size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Large size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details
        
    

    
    Medium size, info case
    
        Accounts
        Account number
123456
        Details
    
    Medium size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Medium size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Medium size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details
        
    

    
    Small size, info case
    
        Accounts
        Account number
123456
        Details
    
    Small size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Small size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Small size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details

3 How Breadcrumb3 Solution Works

The Breadcrumb3 solution is a responsive, Bootstrap-compatible breadcrumb component that consists of two complementary files:

3.1 breadcrumb3.css - Visual Styling & Layout

· Dynamic Bootstrap Integration: Uses CSS custom properties to inherit colors from any Bootstrap theme, with fallback values if Bootstrap isn't available
· Responsive Design: Automatically switches from horizontal to vertical layout on mobile devices (< 768px) using CSS flexbox
· Three Size Variants: Provides breadcrumb3-lg, breadcrumb3-md, and breadcrumb3-sm classes for different use cases
· Arrow-Style Navigation: Creates characteristic breadcrumb arrows using CSS pseudo-elements (:before and :after)
· Color Theming: Supports all 8 Bootstrap color variants (primary, secondary, success, info, warning, danger, light, dark) with hover effects

3.2 breadcrumb3-dynamic-colors.js - Smart Color Detection

· Automatic Color Extraction: Dynamically detects text colors from Bootstrap's text-bg-* classes by creating temporary DOM elements
· Theme Compatibility: Ensures breadcrumb text colors match Bootstrap's design system regardless of the active theme
· Fallback System: Provides sensible defaults if color detection fails
· Public API: Exposes window.Breadcrumb3.refreshColors() for manual theme updates and dynamic theme switching

3.3 How They Work Together

· The CSS defines placeholder variables (--_bs-primary-text-dynamic, etc.) with fallback colors
· The JavaScript detects actual Bootstrap colors and updates these CSS variables at runtime
· This ensures breadcrumbs automatically adapt to any Bootstrap theme while maintaining accessibility and visual consistency
· This approach provides a robust, theme-agnostic breadcrumb component that works seamlessly with Bootstrap's design system and responds gracefully to theme changes.

4 Final Result

4.1 Default, without Bootstrap theme

Here is the resulting rendering, without any Bootstrap theme, with default colors.

4.2 With default Bootstrap theme

Here is the resulting rendering, with the default Bootstrap theme.

4.3 With custom Bootstrap theme

Here is the resulting rendering, with some custom Bootstrap theme. This component Breadcrumbs inherits the color scheme from the custom Bootstrap theme.

5 References

[1] https://icons.getbootstrap.com/#install
[2] https://www.w3.org/Style/Examples/007/text-shadow
[99] https://github.com/MarkPelf/ArticlesCode , folder 129_BootstrapBreadcrumbs_ver6

Custom Bootstrap 5 Breadcrumbs -Ver 5

Mark Pelf — Wed, 01 Oct 2025 10:13:22 +0000

Custom Bootstrap 5 Breadcrumbs -Ver 5

Custom Breadcrumbs for Bootstrap 5 framework

Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs. This is an improved version of the previously published article.

1 The need for better Breadcrumbs – ver4

This is a continuation of the article:

Custom Bootstrap 5 Breadcrumbs -Ver 4

I will not repeat what was explained previously. Just continue to improve the code.

1.1 Problems with Bootstrap Themes

The problem with ver3 was that background colors were taken from the applied bootstrap theme, but text had hardcoded colors. So, I decided to improve on that one.
The idea is to try to fetch global Bootstrap color CSS variables and apply them in this library CSS, and provide defaults if the original Bootstrap was not found.
In version 4, I applied some text shadows for better readability of the text. Readability was not that good, so I improved it in this version.

2 New solution

Here is the new CSS file:


/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
    /* here I am assigning my CSS variable --_bs-primary
       used in this library. First I look if Bootstrap CSS
       variable --bs-primary is defined, to get value from it.
       If not, then I assign default value #0d6efd */
    --_bs-primary: var(--bs-primary,#0d6efd);
    --_bs-primary-text-emphasis: var(--bs-primary-text-emphasis,#052c65);
    --_bs-primary-bg-subtle: var(--bs-primary-bg-subtle,#cfe2ff);

    --_bs-secondary: var(--bs-secondary,#6c757d);
    --_bs-secondary-text-emphasis: var(--bs-secondary-text-emphasis,#0a3622);
    --_bs-secondary-bg-subtle: var(--bs-secondary-bg-subtle,#e2e3e5);

    --_bs-success: var(--bs-success,#198754);
    --_bs-success-text-emphasis: var(--bs-success-text-emphasis,#0a3622);
    --_bs-success-bg-subtle: var(--bs-success-bg-subtle,#d1e7dd);

    --_bs-info: var(--bs-info,#0dcaf0);
    --_bs-info-text-emphasis: var(--bs-info-text-emphasis, #055160);
    --_bs-info-bg-subtle: var(--bs-info-bg-subtle,#cff4fc);

    --_bs-warning: var(--bs-warning,#ffc107);
    --_bs-warning-text-emphasis: var(--bs-warning-text-emphasis,#664d03);
    --_bs-warning-bg-subtle: var(--bs-warning-bg-subtle,#fff3cd);

    --_bs-danger: var(--bs-danger,#dc3545);
    --_bs-danger-text-emphasis: var(--bs-danger-text-emphasis,#58151c);
    --_bs-danger-bg-subtle: var(--bs-danger-bg-subtle,#f8d7da);

    --_bs-light: var(--bs-light,#f8f9fa);
    --_bs-light-text-emphasis: var(--bs-light-text-emphasis,#495057);
    --_bs-light-bg-subtle: var(--bs-light-bg-subtle,#fcfcfd);

    --_bs-dark: var(--bs-dark,#212529);
    --_bs-dark-text-emphasis: var(--bs-dark-text-emphasis,#495057);
    --_bs-dark-bg-subtle: var(--bs-dark-bg-subtle,#ced4da);

    --_bs-gray: var(--bs-gray,#6c757d);
    --_bs-white: white;
    --_bs-black: black;

    /* changeable colors */
    --_bgcolor: var(--_bs-info);
    --_color: var(--_bs-black);
    --_bg-subtle: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

@media (max-width: 767px) {
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg  .breadcrumb3-item {
        width: 80% ;
        border-radius: 4px 0 0 4px;
        padding-left: 25px ;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 20px ;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 18px ;
    }
}

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
    text-shadow: -1px -1px 2px var(--_bg-subtle), 0 -1px 2px var(--_bg-subtle), 1px -1px 2px var(--_bg-subtle), 1px 0 2px var(--_bg-subtle), 1px 1px 2px var(--_bg-subtle), 0 1px 2px var(--_bg-subtle), -1px 1px 2px var(--_bg-subtle), -1px 0 2px var(--_bg-subtle);
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_color);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
  outline: none;
}

/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_color);
    margin-top: -16px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_color);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
    --_color: var(--_bs-primary-text-emphasis);
    --_bgcolor: var(--_bs-primary);
    --_bg-subtle: var(--_bs-primary-bg-subtle);
    --_hover-bgcolor: var(--_bs-success);
    --_hover-color: var(--_bs-success-text-emphasis);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--_bs-secondary-text-emphasis);
    --_bgcolor: var(--_bs-secondary);
    --_bg-subtle: var(--_bs-secondary-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--_bs-success-text-emphasis);
    --_bgcolor: var(--_bs-success);
    --_bg-subtle: var(--_bs-success-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--_bs-info-text-emphasis);
    --_bgcolor: var(--_bs-info);
    --_bg-subtle: var(--_bs-info-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--_bs-warning-text-emphasis);
    --_bgcolor: var(--_bs-warning);
    --_bg-subtle: var(--_bs-warning-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--_bs-danger-text-emphasis);
    --_bgcolor: var(--_bs-danger);
    --_bg-subtle: var(--_bs-danger-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--_bs-light-text-emphasis);
    --_bgcolor: var(--_bs-light);
    --_bg-subtle: var(--_bs-light-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

.breadcrumb3-lg .dark, .breadcrumb3-md .dark, .breadcrumb3-sm .dark {
    --_color: var(--_bs-dark-text-emphasis);
    --_bgcolor: var(--_bs-light);
    --_bg-subtle: var(--_bs-dark-bg-subtle);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-primary-text-emphasis);
}

And demo HTML hasn’t changed much, just it can optionally load bootstrap original CSS.





    
    
    
    
    



    
    Large size, info case
    
        Accounts
        Account number
123456
        Details
    
    Large size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Large size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Large size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details
        
    

    
    Medium size, info case
    
        Accounts
        Account number
123456
        Details
    
    Medium size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Medium size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Medium size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details
        
    

    
    Small size, info case
    
        Accounts
        Account number
123456
        Details
    
    Small size, info case, with no hover effect on the last button
    
        Contracts
        Contract number
99999-2024
        Contract Info
    
    Small size, Rainbow
    
        Breadcrumb
info
        Breadcrumb
primary
        Breadcrumb
warning
        Breadcrumb
success
        Breadcrumb
secondary
        Breadcrumb
light
        Breadcrumb
danger
    
    Small size, icons usage
    
        
             
            Users
        
        
            
            User number
123456
        
         
            
            Details

3 Final Result

3.1 Default, without Bootstrap theme

Here is the resulting rendering, without any Bootstrap theme, with default colors.

3.2 With default Bootstrap theme

Here is the resulting rendering, with the default Bootstrap theme.

3.3 With custom Bootstrap theme

Here is the resulting rendering, with some custom Bootstrap theme. This component Breadcrumbs inherits the color scheme from the custom Bootstrap theme.

6 References

[1] https://icons.getbootstrap.com/#install
[2] https://www.w3.org/Style/Examples/007/text-shadow

GitHub Copilot Agent — Impressive performance on the real ASP.NET8 project

Mark Pelf — Thu, 19 Jun 2025 11:47:14 +0000

GitHub Copilot Agent — Impressive performance on the real ASP.NET8 project

GitHub Copilot – Huge Quality Advancement in 3 months (June 2025)

GitHub Copilot (Gen-AI) coding tool, as of June 2025, looks much more capable than it did 3 months ago.

Abstract: After the appearance of the GitHub Copilot Agent, I decided to try it on my real-life ASP.NET8 project. I tried assisted coding and produced 5.300 lines of code, of which 95% was generated. There is a very, very big quality advancement in usability of this version compared to the version I tried 3 months ago.

1 Real-life project in VS2022

I am working on the development of C#/.NET8/ASP.NET application, which now has around 123.000 lines of code (SLOC), in Visual Studio 2022.

Environment is:

Visual Studio 2022, 17.14.5
GitHub Copilot (GHC). License Copilot Pro+
Agent mode, GPT-4o, GPT-4.1, Claude 3.7 Sonnet
C#/.NET8/ASP.NET/JavaScript/jQuery/HTML/CSS/Bootstrap/SQL-Server

2 Trying GitHub Copilot

2.1 March 2025

I first seriously tried to use GitHub Copilot (GHC) on my project in March 20025, and I detailed the results in the article [1]. I found it practically useless, except for short snippets.

2.2 June 2025

After the appearance of the GitHub Copilot Agent, I decided to try it again. It is described in [2]. [3], [4], [5]. It showed so far as a good tool for template code cloning and generation

2.3 Comparison

I was selfish; I was just interested in how useful this Gen-AI tool could be to my project work. I did not care if they called it “chat mode” or “agent mode”; I just wanted to see what it could do for me and my project.

	GitHub Copilot (GHC) March 2025	GitHub Copilot (GHC) June 2025
Main functionality	Ghost Text GHC Chat	Ghost Text GHC Chat Agent Mode
Prompt engineering	Requires strict use of # for files etc.	Natural language accepted
Ghost Text	Very good predictions	Very good predictions
Syntax Errors in C#	Numerous not sure of the nullability of variables, mixes string with string?, leave all that mess to the user to fix it Has a problem with inserting snippets of code into the app; the user needs to add/remove brackets Generated code can not be compiled.	No syntax errors at all. All compiled.
Coding style	Does not follow user instructions strictly, sometimes enforces his own ( from who knows which textbook) style	Does not follow user instructions strictly, sometimes enforces his own ( from who knows which textbook) style
Hallucinated methods and properties	A huge number of hallucinated methods and properties The code does not compile at all Leaves to the user to manually resolve the mess and refer to proper methods and references Generated code can not be compiled.	No hallucinated methods or properties at all. All methods and properties refer to real classes. All compiles. Only unresolved stay some new strings from .resx file, it looks like it can find properly existing strings in .resx but can not add new ones
GHC chat	Serious focus problem, just babbles sometimes Tend to waste time with verbose answers off-topic	Not sure yet
Follow user instructions closely	Does not follow user instructions strictly, improvises what he (GHC) thinks is better	Does not follow user instructions strictly, improvises what he (GHC) thinks is better

	GitHub Copilot (GHC) March 2025	GitHub Copilot (GHC) June 2025
Small, limited-scope tasks	Excels	Excels
a little project of 4 C# files	Does 1 file properly. The task needs to be divided into subtasks and given explicit instructions for each file	Does 3 files properly. The task needs to be divided into subtasks and given explicit instructions for each file
Clone with modifications a 200 lines C# method	Does with some syntax errors and hallucinated properties and methods. Can not be compiled.	Does perfectly well. All compiles. Really good work, changed all variable names, comments, figured out proper EF LINQ, method parameters
Leaves unfinished work to the user	Leaves partly usable code, full of syntax errors and hallucinated properties/methods Requires a lot of user work to manually fix all the errors	All compiles No or very little work for the user to fix the generated code
Template based task	Poor results even for a task carefully chosen for GHC The final generated code is so bad quality and requires so much manual rework that it is not worth using.	Excels in template-based tasks Does perfectly well. All compiles. Really good work, changed all variable names, comments, figured out proper EF LINQ, method parameters Even found in a project which icons should be used in singular vs plural for Account/Accounts Still, small logical errors if it can not figure out why is some parameter passed in JS
Usability for a practical ASP.NET project	The number of syntax errors and hallucinated code was so big that it required huge manual rework. Practically useless, except for short snippets	All compiles. Practically no syntax errors or hallucinated properties/methods Good tool for template code cloning and generation

3 Project work done

3.1 Work with GHC assistance

In my project, I used GHC assistance to add around 5.300 lines of code, out of which 95% is generated by GHC. (measured by Visual Studio Code Metrics tool).
All that was done in the new Agent mode
This was still a task carefully chosen for GHC, in the sense that it is template-based. It only needed to clone the code and adapt it from the Account entity to the Contract entity.
Since this was a template-based task, carefully chosen for GHC, I am still not sure about usability for general code generation for brand new methods/functions. Needs to be verified first.

3.2 Things I did manually

It looked it had problems with locating and creating Razor .cshtml files. So I created empty files with proper names in the proper location and let GHC fill the content
It looked like it could not add new strings to .resx files. But it created string names in the code. I added proper 4 language strings to .resx
For simple HTML buttons here and there, it is easier to just add it than to write a command prompt
Moved code/methods, reorganized a bit to my liking
Some sophisticated EF-LINQ expressions I modified manually. Easier than to explain it in the command prompt
GHC tends to omit C# comments, and I like my comments, so I added/copied them manually

3.3 Perspective of a programmer

I was selfish; I was just interested in how useful this Gin-AI tool could be to my project work. I did not care if they call it “chat mode” or “agent mode”, just what it can do for me
In this version of GHC, syntax errors are very rare, but there were a few logical errors.
It is a bit of a limitation of us humans to review all the changes if changes are spread across too many places. I refused all that, even if that may be OK. I make GHC do the work again
I do not see the programmer role disappearing, it is going more be on a higher level, leading and verifying the work of Gen-AI
I GO SLOW AND REVIEW every line of generated code. Slow in review, but altogether saves time later because of fewer defects.
So, basically, it is a Generate-Review-Drop-Generate-Review-Accept cycle as a work process. Reviewing is a burden on humans and requires significant effort, because you are reading someone else’s code, but I just do not want to accept anything into my repository that I haven’t read and understood.
It is a bit of a limitation of us humans to review changes. That GHC thing can generate 200 lines of valid code every 10 minutes, but I can not read and understand that code that fast. There is also human fatigue appearing, you get tired from reading and reviewing the generated code whole day.
It actually feels (on this smaller task, based on produced results) a bit like human coworker, does not figure it right away, so you need to explain details more, it does quality job, but it does not do exactly what you asked and does some things his own way, and sometimes is more clever that you think it will be.
Based on modifications GHC made to the code of my original template C#/cshtml 4 files, I was able to follow “how GHC is thinking”, and it does think like a good programmer.
It does feel as if you have a competent coworker who gets instructions from you, and you can delegate work to him/her.
Commands to GHC are in practically natural language, no “pseudo-science” prompt engineering needed, I spontaneously stopped using # for marking file names, and it all worked. I just reasonably explain like I would to some other developer in an email.

4 Weird behaviors of GHC – probably bugs

It seems there are still bugs in the product. Plain VS2022/GHC restarts from time to time are beneficial.

I was working on some plain HTML and was giving a task to GHC to add some JavaScript, and GHC thing was suddenly so stupid. For an hour, I was changing different LLMs, it was telling me it added JS to the code, and I did not see anything or just unfinished fragments. I was thinking, how come it can do so complicated tasks, and can’t add just 30 lines of JS? It took me an hour to figure out. It all disappeared when I restarted VS2022. It seems that automation in Agent mode was stuck somewhere; it was not reading or writing files. It looks like GHC keeps some tmp files where it remembers its work. Some file corruption somewhere. It started to work well after a restart.

5 Intellectual Property and Copyright

I noticed that in point of time, GHC Agent loaded 750 source files of my project. It was looking for something, trying to find something, or learning about the project. Is he learning from my code? So, if I work with GHC, all my code is Open Source?

For example, I am working on a specific Bank protocol ABCD. After working 2 weeks with GHC, it has practically loaded all my source files. Has he learned and memorized all that?

What if a month later, some other user, somewhere, asks GHC to implement a similar app with ABCD Banking protocol? That GHC thing can, in several minutes, create a whole app based on what it learned from my source code. And, it can, of course, easily make it unrecognizable/different from my source code.

Where are my legal “Intellectual Property” and “Copyright” rights? You get the idea.

Who can guarantee that those AI companies are not behaving like pirates? They already claim that used all the text on the Internet ([7]) and their systems are still “text hungry”.

6 Conclusion: Seeing is Believing

I was a great sceptic, with a good reason. Marketing on AI is very strong, and Rock-star CEOs tend to overpromise in order to sell their company's products and shares. An example is Tesla’s Autonomous drive promised in December 2015 ([6]).

I was very disappointed in the version of GHC from March 2025. It did not look practically usable. The number of syntax errors and hallucinated code was so big that it required huge manual rework. Also, there were many hallucinated properties and methods, meaning that GHC did not look into other files of the project, just working on one.

In contrast, the version of GHC from June 2025 is practically without syntax errors. Hallucinated methods and properties are all gone, meaning GHC now reads (a number of) project source files to resolve dependencies. Delivered generated code all compiles, but it can have logical errors. GHC is now quite usable for practical projects.

Progress in the quality of GitHub Copilot in 3 months from March 2025 to June 2025 is much more than we usually see for software products. If it continues to progress in quality like this…well, by the end of the year, we will have a very smart code assistant.

So, the version of GHC from June 2025 starts to look like what all those media personalities were talking about, a replacement for Junior/Intermediate level programmers ([8]). I am starting to see the basis for that prediction.

7 References

[1] GitHub Copilot (Gen-AI) is Helpful, But Not Great (March 2025)
https://markpelf.com/2717/github-copilot-gen-ai-is-helpful-but-not-great-march-2025/

[2] GitHub Copilot Agent looks promising - Part1 (June 2025)
https://markpelf.com/2744/github-copilot-agent-looks-promising-june-2025/

[3] GitHub Copilot Agent looks promising – Part2 (June 2025)
https://markpelf.com/2746/github-copilot-agent-looks-promising-part2-june-2025/

[4] GitHub Copilot Agent looks promising – Part3 (June 2025)
https://markpelf.com/2748/github-copilot-agent-looks-promising-part3-june-2025/

[5] GitHub Copilot Agent looks promising – Part4 (June 2025)
https://markpelf.com/2750/github-copilot-agent-looks-promising-part4-june-2025/

[6] There’s a Very Simple Pattern to Elon Musk’s Broken Promises
https://www.wired.com/story/theres-a-very-simple-pattern-to-elon-musks-broken-promises/

[7] Microsoft AI CEO Says Almost All Content on the Internet Is Fair Game for AI Training
https://www.entrepreneur.com/business-news/microsoft-ai-ceo-anything-on-open-web-fair-use-for-training/477030

[8] Zuckerberg claims AI will replace mid-level developers, halting hiring in Korea
https://biz.chosun.com/en/en-it/2025/01/13/GLJEIP6PGRHIFC77IB6Q747DCQ/

Bootstrap Theme Colors – HTML page

Mark Pelf — Wed, 18 Jun 2025 06:31:51 +0000

Bootstrap Theme Colors – HTML page

HTML page that shows currently selected Bootstrap theme colors.

1 Purpose

In my project we are using Bootstrap 5.3 CSS framework, with different color themes for different customers (according to their brand color scheme) .To enable easier overview of theme colors, for Customers and Project Owner (PO), I created a page in web app that can be accessed only by explicitly typing link /Info/Colors. It gives overview of colors expected in the app and verifying that color scheme of choice has been property coordinated. It shows currently selected Bootstrap theme colors.

2 Source code

Here is the source code. I am assuming Bootstrap CSS scheme of choice was invoked via Framework Layout page.



    
        
            Bootstrap Theme Colors
        
        
            
                Class
            
            
                Foreground
            
            
                Background
            
            
                Sample
                  
        
    
    
        
        
            
                bg-primary
            
            
            
            
        
        
            
                bg-secondary
            
            
            
            
        
        
            
                bg-success
            
            
            
            
        
        
            
                bg-info
            
            
            
            
        
        
            
                bg-warning
            
            
            
            
        
        
            
                bg-danger
            
            
            
            
        
        
            
                bg-dark
            
            
            
            
        
        
            
                bg-light
            
            
            
            
        
        
        
            
                bg-primary-subtle
            
            
            
            
        
        
            
                bg-secondary-subtle
            
            
            
            
        
        
            
                bg-success-subtle
            
            
            
            
        
        
            
                bg-info-subtle
            
            
            
            
        
        
            
                bg-warning-subtle
            
            
            
            
        
        
            
                bg-danger-subtle
            
            
            
            
        
        
            
                bg-dark-subtle
            
            
            
            
        
        
            
                bg-light-subtle
            
            
            
            
        
        
        
            
                text-bg-primary
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-secondary
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-success
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-info
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-warning
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-danger
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-dark
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-bg-light
            
            
            
            This is test text, 1,2,3,4,5.
        
        
        
            
                text-primary
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-secondary
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-success
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-info
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-warning
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-danger
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-dark
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-light
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-black
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-white
            
            
            
            This is test text, 1,2,3,4,5.
        
        
        
            
                text-primary-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-secondary-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-success-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-info-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-warning-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-danger-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-dark-emphasis
            
            
            
            This is test text, 1,2,3,4,5.
        
        
            
                text-light-emphasis
            
            
            
            This is test text, 1,2,3,4,5.

4 Sample execution

Here are some screenshots of sample execution.

GitHub Copilot Agent looks promising – Part4 (June 2025)

Mark Pelf — Mon, 16 Jun 2025 20:52:58 +0000

GitHub Copilot Agent looks promising – Part4 (June 2025)

GitHub Copilot Agent, as of June 2025, looks much more capable than it did 2 months ago.

Abstract: After the appearance of the GitHub Copilot Agent, I decided to try it on my real-life ASP.NET8 project of 123.000 SLOC. I tried some limited-scope tasks, and the initial results are much better than my GitHub Copilot tests two months ago.

1 GitHub Copilot in VS2022

I am working on the development of .NET8/C#/ASP.NET8/EF8 application, which now has around 123.000 lines of code (SLOC), out of which 50.000 is the EF-database-first model, in Visual Studio 2022.

I have a subscription to GitHub Copilot Pro + license. So far, that AI tool has been good for limited-scope tasks. I wanted to try the new GitHub Copilot Agent mode. Below are notes from my regular work.

Environment is:

Visual Studio 2022, 17.14.5
GitHub Copilot (GHC). License Copilot Pro+
Agent mode, GPT-4o, GPT-4.1, Claude 3.7 Sonnet
C#/.NET8/ASP.NET/JavaScript/jQuery/HTML/CSS/SQL-Server

2 Anecdotal Experience with Real ASP.NET8 project

2.1 Impressions and observations

GHC is not equally smart every time. Sometimes, for a very similar task, “sees” different logic in the original template and improvises. But GHC gets its idea, it makes sense in a way, “like a guy that does not understand project business logic well”, but it makes it work, even though no one needs that functionality really. But it builds it to a compiled state. It was not that good, GHC built and calculated its own and created the property “countOfLinkedAccounts” and it didn’t see that I am at another place calculating, and there is the property “numberOfAccounts”, and the calculation is more elaborate ( soft delete, etc.) than what it calculated.
Small error in C#, there was inheritance of interfaces, and it added the same method 2 times to the interface, at different levels of the interface hierarchy. But it got it to compile and build.
It is easier to manually move generated methods a bit to the proper files than to write a whole sentence to GTC. Generally, generated code needs to be moved/erased/ completed a bit manually.
Sometimes GHC gets confused by the comments that include code. There was an old version of the method in comments, and it started to modify that one to make it active, and then modified the actual version of the same name to do something. Maybe the final result was good, but that is not how I want the work process, and also, I can not see/verify in the editor that all is fine. So, it is a bit of a limitation of us humans to review all the changes if changes are spread across too many places. I refused all that. I will delete comments that are confusing GHC and start all over from the beginning.
It is kind of easy, if you can’t understand what GHC did, you refuse it all and make it work from the beginning. It does not complain at all, like your coworker would. You can be as harsh as you want.
Sometimes, a simple request, just to move a method from one file to another, makes it work hard. I see GHC is re-reading the files and stuck, and even failed in the first build, and in the final solution, it renamed some random variables. Too much confusion for a simple request.
I am using a separate text editor (Notepad++) to carefully prepare commands for GHC. I double-check check method and file names I am giving to it and reread the command to verify that it sounds reasonable. I stopped using # for file names, just use natural language and say “file abc.cs” or “class abc in file abc.cs” and it all works.
I am not using any specific “prompt engineering” technique, just reasonably explain like I would to some other developer. I tell it, “Look at this method, which can be useful for this task”. The Internet is now full of “prompt engineering gurus” who are selling some “street smarts” on how you should outsmart AI tools, like “give me top 5% answers only,” etc. I assume AI is already doing its best effort, and I do not think I can pressure it to work harder. But of course, that is my free advice, if you want to pay $500 for self-proclaimed “prompt engineering guru” course to teach you how to “screw AI’s mind to work harder”, go do it. People tend to believe more in expensive doctors than in cheaper ones.
So, I give a task to GHC, it needs 3-5 minutes to do it and build it, and in the meantime, I go check my email or read something on the Internet. When I see it is finished, I go and review what it did. That is a tricky part, and Git is my main friend, where I can see all the changes. If I do not like or do not understand it, because it made strange changes at too many places, I undo everything. And review my command and improve it with more details, referring to things I did not like. And give the GHC command to work from the beginning. Can we call this “a work process with GitHub Copilot Agent”? So, basically, it is a Generate-Review-Drop-Generate-Review-Accept cycle as a work process? Reviewing is a burden on humans and requires significant effort, because you are reading someone else’s code, but I just do not want to accept anything into my repository that I haven’t read and understood.
Review requires understanding what GHC did and why. It is not easy. It took me time to see why in some model file it deleted some property, but after a review, GHC was right, that property is dead code and never referenced in that particular component. I just copied from the original component that needs it. So, GHC is smarter than I sometimes, but I still need to verify it. Only a machine can track each and every one of the thousands of variables in my project and see if it has become obsolete.
Sometimes you tell GHC to clone a component and modify it, and GHC omits a VERY IMPORTANT parameter in JavaScript I am passing, and the component would NOT work without it. It seems that if it can not figure, it omits it. And it was told to just clone the code. Human review of generated code can only detect it. If GHC really looked into the AJAX method on the server side, it would see that the parameter is used, but it didn’t fully understand the code. It was readable from the code, but it made a logical error.
That is the problem I was talking about, if I accept code without a VERY CAREFUL REVIEW, I will later need to go back and clear bugs. So, that is why I GO SLOW AND REVIEW every line of generated code. Slow in review, but altogether saves time later because of fewer defects.

GHC sometimes needed to make the project build 4 times. So, the power of your local resources counts. That is why I have a 16-core processor with 32GB RAM. It is kind of fancy distributed computing, build work (part of work) is done locally on your machine, and AI smarts (part of work) is done in some supercomputer in California.
I see again “hallucinated properties”. It finished work on .cshtml file, but it did NOT build it. There were added some multiannual strings were added, but not from the Resources files. I asked to add them to the Resources files and build the project. It said it can’t, I need to add it by myself. OK, I will do that. I added 2 strings to the Resource file, and it compiles now.

3 Form created using GitHub Copilot

Here is the result of the work:

It took maybe 15 command prompts ( some were research ) to create the form
It was not that easy. I divided the task into several subtasks, to create methods by method, so I can fully have control of creation and verify the quality of each generated method. Reviewing code is serious work, in my opinion.
It was pretty smart with .cshtml file, it found proper icons, even different icons are for singular and plural Account and Contract. Looks like it was reading files of the project to find the proper icons.

4 Conclusion

This was still a task carefully chosen for GHC, in the sense that it is template-based. It only needed to clone the code and adapt it from the Account entity to the Contract entity.

The burden is still on the human programmer to review all the generated code and check for errors. In this version of GHC, syntax errors are very rare, but there were a few logical errors.

GitHub Copilot Agent looks promising – Part3 (June 2025)

Mark Pelf — Thu, 12 Jun 2025 07:56:13 +0000

GitHub Copilot Agent looks promising – Part3 (June 2025)

GitHub Copilot Agent, as of June 2025, looks much more capable than it did 2 months ago.

1 GitHub Copilot in VS2022

I am working on the development of .NET8/C#/ASP.NET8/EF8 application, which is now around 123.000 lines of code (SLOC), out of which 50.000 is EF-database-first model, in Visual Studio 2022.

I have a subscription to GitHub Copilot Pro + license. So far, that AI tool has been good for limited-scope tasks. I wanted to try the new GitHub Copilot Agent mode. Below are notes from my regular work.

Environment is:

Visual Studio 2022, 17.14.5
GitHub Copilot (GHC). License Copilot Pro+
Agent mode, GPT-4o, GPT-4.1, Claude 3.7 Sonnet

2 Anecdotal Experience with Real ASP.NET8 project

The task is described in “Part2” of this series. Here is just my further analysis.

3 Analysis – Impressions

3.1 Human reviewing GHC-generated code in the previous task (regarding Part2)

I was looking very carefully at the generated code. Here are my findings.

First, it is clean of syntax errors (C#) or similar nonsense, like extra brackets, which was a big problem 3 months ago.
Not a single time I saw “hallucinated C# class property or member” that I saw 3 months ago in quantity that made generated code unusable because of re-work needed to fix all that garbage. This time is much, much smarter, I would say not a single level of quality up, but several levels of quality up. I do not know how, but that was a big problem, and it looked like GHC was trying to “guess out” properties names, instead of looking into the EF model. This time, it looked into other files of code of the project (no other way to find the right property names) and did the comparison/match. 3 months ago, I was thinking that LLMs are unusable for coding because of the hallucination problem, but they solved that. Even the fact that my DB table names are partly English, partly German, was not a problem; it figured that Contract==Vertrag, Account==Konto, etc. It is not that simple for a machine; English and German names are mixed in DB table names, C# class names, method parameters, etc.
I told it to copy ALL COMMENTS, but it didn’t. It copied most of it. I am human and I need those comments, because 3 months later, when I look into the code, I do not remember proper API usage, so I leave comments on why and how it was invoked. I reviewed the code and copied the comments I like myself. It is not a big problem, but I noticed, GHC does not follow the given instructions strictly, it is “like a human coworker”, it does most of it, but changes a bit to its liking.
Because the task was to make new code based on the original template, it looks simple. But it is not for the machine. So, GHC changes are right, it looks like it was able to “understand” the code and figure out where it needs to change the template, and where it doesn't. That is not simple at all, but it figured it right. There are many technologies involved, MVC Razor/HTML,CSS/JS/jQuery/Databable.net in 370 lines of code (.cshtml), and to figure out which string belongs to which library is no easy task for a machine. Simply, as far as I can see, GHC figured it all out and got it right.
I didn’t ask for it, but during copying from the original template, it removed some dead JS code. I probably copied some JS functions, but later I did not need them, so they stayed there. OK, the new file is faster because it will need to load 15 lines of JS code less in the browser, but that is not the point. The point is, GHC “knows what is doing”, and that is sometimes what you want from a coworker, not just to do the task, but to fix little things-problems it notices during work, without explicit request for that.
There is one subtle thing I am doing in my ASP.NET8 View-Component and GHC didn’t get it at first, and I needed to ask for several commands to finally do it, but once it figured it out, it figured it out better than I expected. So, in a view file (.cshtml) I am using a boolean flag ((Model?.IsSelectable), to make from one component actually 2 components, one editable and one read-only. Based on that flag, I show or hide some HTML/Datatables.net elements in .cshtml file. It is kind of tricky, because you have a mixture of MVC Razor/HTML/ CSS/JS/ jQuery/Databable.net languages. It looks like GHC didn’t get it in the first iteration/command. Then in the second, it copied HTML that is generated only in the default case Model?.IsSelectable==false. In the third iteration/command, I told it to include that flag, and it did with all the proper syntax. I still didn’t run it, but by reviewing the file visually, it looks like all the HTML/JS syntax is OK. But it did even more. I am using a boolean flag ((Model?.IsSelectable) in the original template just to show/hide visual HTML elements, and load ALL the JS code anyway. What GHC thing did is, it got the idea, why load all the JS code, when you do not need the “selectable part of JS code” if the component is read-only. And based on its own initiative, it implemented the same Boolean flag to include/exclude parts of JS code. Yes, I agree, that is an improvement, not big since that is maybe 100 lines of JS, but I did not care about that because I was just happy to get the component working. I do not know how GHC works from inside, but from my point of view, it appears that GHC “understands” that the .cshtml view file is about to be loaded into a browser, and for performance reasons, optimizations are possible. And on its own initiative, implemented optimization, and as far as I can see, looks like it all syntax and functionality is fine. It is a small performance improvement ( 100 lines of JS), but the big thing is “GHC looks like it knows what it is doing”.

4 Conclusion

Again, this was a small task, and this was still a task carefully chosen for GHC, in the sense that it is template-based and component-separated from the main code. It only needed to clone the code and adapt it from the Account entity to the Contract entity. But before, GHC would fail even in such “Gen-AI favorable scenarios”.

But, compared to several months ago, this “GitHub Copilot Agent” looks much, much smarter. It actually feels (on this smaller task, based on produced results) a bit like human coworker, does not figure it right away, so you need to explain details more, it does quality job, but it does not do exactly what you asked and does some things his own way, and sometimes is more clever that you think it will be.

Based on modifications GHC made to the code of my original template C#/cshtml 4 files, I was able to follow “how GHC is thinking”, and it does think like a good programmer.

To be continued…

GitHub Copilot Agent looks promising – Part2 (June 2025)

Mark Pelf — Wed, 11 Jun 2025 04:35:48 +0000

GitHub Copilot Agent looks promising – Part2 (June 2025)

GitHub Copilot Agent, as of June 2025, looks much more capable than it did 2 months ago.

1 GitHub Copilot in VS2022

I am working on the development of .NET8/C#/ASP.NET8/EF8 application, which is now around 123.000 lines of code (SLOC), out of which 50.000 is EF-database-first model, in Visual Studio 2022.

2 Anecdotal Experience with Real ASP.NET8 project

Environment is:

Visual Studio 2022, 17.14.4
GitHub Copilot (GHC). License Copilot Pro+
Agent mode, GPT-4o, GPT-4.1, Claude 3.7 Sonnet

The task is:

The task is to create a similar View-Component based existing.
Context is WebApp (.dll) in this moment is ~66.000 SLOC , different technologies, C#, JavaScript, jQuery, Bootstrap, HTML, CSS, ASP.NET8, MVC, Razor.
The task to GHC is to create new View-Component based on the existing template. It is 4 files in different technologies. Still, it is pattern-based, practically just Contract and Account need to be switched. It is a component, so it is independent from the main app code, and it limited scope.
Component uses AJAX, so the Controller method for the component needs to be created too

2.1 Create a new AJAX method in ASP.NET MVC controller based on the existing

That is 80 lines of C# code method, just is referencing DataAccessLayer dll TBServerUI.Data. It is pattern-based; it should be no problem.

2.1.1 GHC (GPT-4o)

(Run1-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was :
- _Based on method AccountsListForContractDT_AJAX in file #AccountsController.cs, create a similar method where Contract and Account roles are switched, called ContractsListForAccountDT_AJAX . Context is TBServerUI.WebApp project. In implementation, you will need to use ContractsContractsForAccountListDT from TBServerUI.Data project.
It worked a 3 minutes, it added a method, it tried to build, it built. I looked into it. IT IS GOOD. It was pattern-based, but it did exactly what I would do manually. Just put it in AccountController, I want it in ContractController.
So, I asked to move that method to the other controller class, and it did. It was built again to verify that it all builds.
It looks GHC has some problems if VS2022 project/solution is not opened in the proper folder/view/tab. It couldn’t find the C# file. So I helped it a bit, by observing GHC-Chat-Window, which is practically a Log of what is doing, and when it was not able to find some file, I navigated VS2022 to that file/class. Then it was unstuck and continued to work.
I AM IMPRESSED. IT DOES FEEL AS IF YOU HAVE A COMPETENT COOWORKER THAT GETS INSTRUCTIONS FROM YOU AND YOU CAN DELEGATE WORK TO HIM/HER.
And commands/instructions I gave to GHC are quite normal, as I would give to some coworker, not too much of “prompt engineering pseudo science tricks” were needed. Quite a natural language. OK, I admit, I was skeptical in the past, but this looks like real AI.
The fact that GHC automates VS2022 has a big psychological effect… really looks like someone else has overtaken control of your dev tools.
I am using Git, and that is my line of defense; there, I observe every change made to project files and review each one before accepting it. I kind of do not trust AI messing with my project, without me having firm control of every line that is about to be changed.
I do read AI-generated code, but in the past, it happened that I overlooked some small change AI added, and that created problems later. What happened before, AI-generated code in case of method failure returned an empty object from the default constructor, and I usually return null in case of failure, so it messed with logic in upper invoking methods. I just didn’t see such a small deviation in code created by AI. That is why I say, be careful, AI follows some textbox conventions (from who knows which author), not your project conventions.
In this case, I read 80 lines of code, and it looks fine, but I am not a compiler, just a human, maybe some small error is somewhere.

2.2 Create a new ASP.NET View-Component based on template (4 files)

This is a bit more tricky task. It is still template-based, but involves 4 files and several different technologies.
Still, the component is a limited-scope task.
On the other hand, many ASP.NET developers do not know or use View Components.

2.2.1 GHC (GPT-4o)

(Run2-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was :
- _Based on View-Component AccountsForContractSelectableViewComponent in file #AccountsForContractSelectableViewComponent.cs, create a similar View-Component where Contract and Account roles are switched, called ContractsForAccountSelectableViewComponent. Context is TBServerUI.WebApp project. AccountsForContractSelectableViewComponent consists of several files: 1) AccountsForContractSelectableViewComponent.cs; 2) AccountsForContractSelectableViewComponent_Model.cs; 3) AccountsForContractSelectableViewComponent_ViewModel.cs; 4) AccountsForContractSelectable_Default.cshtml. You will need to refer to AJAX method ContractsListForAccountDT_AJAX in generated ContractsForAccountSelectableDefault.cshtml.
It worked for only a few minutes, and it built that work, but it was not good. It created classes for the first 3 files and embedded them into existing files. Maybe I should have told it to create new files? It didn’t create Razor view .cshtml, which is quite complicated, 477 lines of code, most JavaScript. Let’s see if we can make it do it.

(Run3-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was :
- _Move classes ContractsForAccountSelectableViewComponent_Model, ContractsForAccountSelectableViewComponentViewModel, ContractsForAccountSelectableViewComponent into their own files. File locations are same as model files on which they were generated.
It did it right, and now it looks better. Maybe complex tasks need to be broken into subtasks.
I created manually view file ContractsForAccountSelectable_Default.cshtml, because it looks like that is confusing GHC.
This Razor view with a lot of JavaScript, so let’s see how it goes
(Run4-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (***) :
- _Based on Razor view file AccountsForContractSelectable_Default.cshtml create file ContractsForAccountSelectable_Default.cshtml as a view for component ContractsForAccountSelectableViewComponent, where Contract and Account roles are switched. In file ContractsForAccountSelectable_Default.cshtml create Datatable columns same as in ContractsList.cshtml. You will need to reference AJAX call to ContractsListForAccountDTAJAX in controller Contracts.
It failed. Some errors. I will try again
(Run5-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (***)
This time it produced buildable code. Let’s check.
It was not good at all. It used wrong model class, and created some mess with JavaScript
(Run6-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (***)
- _Replace all JavaScript section in ContractsForAccountSelectable_Default.cshtml with JavaScript from AccountsForContractSelectable_Default.cshtml, and just adopt it to use Contracts_ContractsListDTJson object
Result was buildable, but JavaScript is not good. It shorten it a lot.
(Run7-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (***)
- _Replace all JavaScript section in ContractsForAccountSelectable_Default.cshtml with JavaScript from AccountsForContractSelectable_Default.cshtml, and just adopt it to use Contracts_ContractsListDT_Json object. Copy also all comments in code from AccountsForContractSelectableDefault.cshtml, just adopt it to new file. Copy also sections that are triggered with Model?.IsSelectable flag when possible.
I have read the result, which is maybe 330 lines of JavaScript that invoke some libraries. I found a small mistake, not syntax, but it didn’t pass some parameter. VS2022 can not test syntax on JavaScript embedded in Razor, but I followed it manually, and it looks solid. Only running in the browser will show any errors. But it followed a pattern, improvised some things, ok- good improvisations. Made a usable base for me to modify manually. It didn’t follow my pattern for brackets; it followed textbook rules, but OK. In one place, it looks like it searched the code for the proper icon method and found the right one. It even added some smarts too, based on some flag, including/excluding some JS code. I didn’t care if a “dead code” JS method is there. It even cleaned some “dead code” methods that I initially added to the original file but later abandoned. I can actually understand what GHC wanted to do and why. It got right, which are primary keys in Accounts/Contract, and which need to be passed to other methods after selection. That is quite clever.

So, it had a problem with that Razor MVC file with a lot of JavaScript, and needed help with it. It made 3 easy files right away, and it needed help with the 4^th one.
Very important: I did not notice garbage code in JavaScript or an obvious mess, as I saw 2 months ago.
Component needs to be tested, of course, but it looks like I got a solid codebase, with just a few modifications (~6 lines) to the generated code. And 7 prompt commands altogether.

3 Conclusion

This was still a task carefully chosen for GHC, in the sense that it is template-based and component-separated from the main code. It only needed to clone the code and adapt it from the Account entity to the Contract entity. But before, GHC would fail even in such “Gen-AI favorable scenarios”. So, the above shows 7 prompts that created ~500 lines of code, with small interventions from a human programmer ~6 lines of code, and some empty file creation. And commands are in practically natural language, no “pseudo-science” prompt engineering needed, I spontaneously stopped using # for marking file names, and it all worked.

I have always stated that prompt engineering is “a defeat for AI” and with the advancement of AI, it will become obsolete as natural language communication will prevail.

Impression: This version of GitHub Copilot (GHC) Agent is much, much stronger than GHC I saw a few months ago. There is no mess in the code I saw 2 months ago. I did not see a single hallucinated method or property, and the code is buildable, meaning syntax is proper. The automation of Visual Studio 2022 (remote control by GHC) has a kind of psychological effect; you feel like someone else is present and has taken over the control of your tools. VS2022 is alive without me doing anything. It actually builds and repeats builds after errors.

It does not feel like “pair programming” or “peer programming” as in marketing stories. GHC is quite passive, so it feels like an “intelligent code generator”. But it does look effort-efficient. In the above work, I made altogether 7 commands to GHC, and got some 500 lines of usable code. But you still need a human proficient programmer to filter out bad attempts and tweak code in a couple of places.

GitHub Copilot Agent looks promising – Part1(June 2025)

Mark Pelf — Mon, 09 Jun 2025 11:59:55 +0000

GitHub Copilot Agent looks promising - Part1 (June 2025)

GitHub Copilot Agent, as of June 2025, looks much more capable than it did 2 months ago.

1 GitHub Copilot in VS2022

I am working on the development of .NET8/C#/ASP.NET8/EF8 application, which is now around 123.000 lines of code (SLOC), out of which 50.000 is EF-database-first model, in Visual Studio 2022.

2 Anecdotal Experience with Real ASP.NET8 project

All below was done with:

Visual Studio 2022, 17.14.4
GitHub Copilot (GHC). License Copilot Pro+
Agent mode, GPT-4o, GPT-4.1, Claude 3.7 Sonnet

2.1 Code review of Data-Access-Layer dll

Context is DAL layer (.dll) in this moment is ~62.000 SLOC C# (and it will grow), and out of that 50.000 is EF model (EF-database-first).
That is a kind of limited scope task, clear C# code, .NET8
Wanted to do a code review and see what this AI thing will do
(Run1-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (*)
- I want you to do a Code Review of the project TBServerUI.Data.csproj. Identify possible software defects, and places for possible improvement of code.
Response was quick, and it said it “read 786 files” of the project. That sounds like a good start.
Replay was quite shallow. I kind of expected it would understand a bit what that .dll is doing, but it was giving me suggestions like “avoid magic number/strings” in code and “refactor method because it has too many parameters”. I do things like “shorten string to max 30 characters” before I put it in the database, and number 30 is ok there, it would just obfuscate code if I were to define const THIRTY=30 or similar garbage. I do not need that, problems I have are like 1000 times more complex, and AI gives worthless suggestions.
My expectations were higher. No human can keep and memory 786 files, so my hope was that the AI machine would load it all and figure out some smarter advice, that I can not see because there are so many files. I actually know places where I made “dirty code” to make things work and left it there, to refine it later. That GHC thing didn’t see that.
(Run2-GHC (GPT-4o) ) I run several times same command (*) to GHC (GPT-4o), to give it a chance to improve on response. Funny thing, I told it to do the same all over again (same command), but it did NOT read again all 786 classes, just 2 of them. I saw that before, that GHC thing is not following even full sentence instructions, it does what it wants to do.
(Run3-GHC (GPT-4o) ) I needed to close all open files in the editor to make it re-read all 786 files. Why do I need to do that? I was giving explicit full sentence commands (*) to review the whole project?
Again, a pretty formal response, several pages of text, but no real substance.
(Run4-GHC (GPT-4.1)) I tried same command (*) to GHC (GPT-4.1).
Answer is similar, formal, with suggestions if I want “deeper review, I must ask for it specifically for a certain class/file”. There are many files; why do I need to ask file by file?
(Run5-GHC (Claude 3.7 Sonnet)) I tried the same command (*) to GHC (Claude 3.7 Sonnet).
This time, it was quite slow in response. It said it read 786 files. Does slow mean it is doing something? I got a response finally.
The first thing is a funny one. AI thing was reading MY OWN COMMENTS IN CODE, not the code itself, and was telling me I sound “insecure” in my comments. I do not need an opinion on my comments, I need an opinion on my code. Based on my comments, it gives an evaluation of my code. If I have put a comment like “this is a great method,” would it think it is great? So, the quote of GHC is here: “The comment 'hope this is enough to prevent SQL injection' indicates uncertainty about the security measures. This should be thoroughly tested and validated.” If my company sees that, they will need to hire a Junior guy, they are ALWAYS SURE they covered all the possibilities, no matter what code they write. Funny, GHC is giving a psychological profile of developers instead of looking into real code to see if it works.
It picked on some interfaces in libraries that are marked as “obsolete”, and I use them deliberately because the Project Owner wants me to keep them all on.NET8, and I would need to upgrade the project to .NET9 to use the latest interfaces. GHC is quite shallow here, such comments would mislead someone into the project that can not be compiled.
OK, it found some properties that it sees as mutable, I do only reads from them, but yes, they are not marked as read-only, so in multithreading, there could be problems… I didn’t see that before…
Some other minor comments… nothing I find useful… refactor this or that, split interface into several smaller interfaces, all cosmetic code changes.
Ok. Enough of code review for now.

2.2 Create a new method based on the existing

The task is to create a similar method based on a 200-line C# template method
The task to GHC was to create a DB access method based on a similar one, just to reverse Contract-Account roles. The original method is ~200 lines of C# code, but it uses EF-Core, LINQ, and some Data library classes and references some DTO classes. Still, it is quite easy, I would need 15 min, but I understand the DAL layer in this moment is ~62.000 SLOC (and it will grow), and out of that 50.000 is EF model (EF-database-first).

2.2.1 GHC (GPT-4o)

(Run1-GHC (GPT-4o) ) My request COMMAND to GHC (GPT-4o) was (**):
- _Based on method Accounts_AccountsForContractListDT in file #DbWork.Contracts.cs, create a similar method where Contract and Account roles are switched, called ContractsContractsForAccountListDT. Context is TBServerUI.Data project.
So, it was running for like full 4 minutes doing something, automated VS2022, source code window opened, it was entering text, then tried a build, and the report shows no errors in the second build. Looked impressive, that automation of VS2022 made me first time feel there is somebody else present. Let us see what it made.
It created a method. Added to proper file (not the same file where original _AccountsAccountsForContractListDT (DbWork.Accounts.cs) method is, but to DbWork.Contracts.cs.
I was looking into the generated method content. It looks pretty good. The truth is I am doing a lot of work with the proper naming of all the classes in the project, so it could find the DTO just by naming conventions. But still, it found the right DTO classes. I am not a machine/compiler, but the method looks good to me. I can not really see all the details, if they are completely right.
One of the problems I noticed before with Gen-AI is that they produce a lot of text, and it is quite difficult and time-consuming to review it properly. It happened in the past, I was accepting Gen-AI code, but there was a small bug hidden that I did not notice.
So, key LINQ/EF queries looked fine. It even figured German names from the database, it is KONTO, VERTRAG table, not ACCOUNTS, CONTRACTS. And primary keys are KONTO_NR, VERTRAG_NR, etc. It figured it, and it looks like it is doing the right filtering.
It added some processing to the result that is specific for Contracts, and is not symmetric to the Accounts method I instructed it. It looks like it is quite clever, it looks like it found it somewhere in the project source code and inserted it here. Yes, the guess is right, it should be there. That is my code that is copied here, just even I can not fully review (do not remember) if all details are fine. This AI thing, of course, does not know what “Ebics Users” is, but it just saw the property “numberEbicsUsers” and it hacked it, found somewhere in the project method that calculates that property and assigned it. And the guess was good.
There is one Boolean flag that stayed unused, but that is a minor thing compared to all the other. I will set that flag.
So, looks like a good job. It compiles. No hallucinated properties/methods this time. Much better than what I have seen before for GHC.
Let’s see what other LLMs will do.

2.2.2 GHC (GPT-4.1)

(Run2-GHC (GPT-4.1) ) My request COMMAND to GHC (GPT-4.1) was (**) again.
It started to work on something. Then, in the chat window, it was loading like 6 files from the project. Then it said it is going to load 786 files of the project. Then it breaks, with an error in VS2022:
- _{"error":{"message":"prompt token count of 64602 exceeds the limit of 64000","code":"model_max_prompt_tokensexceeded"}}
It failed. Some GHC error. Let’s restart VS2022 and try all again.
(Run3-GHC (GPT-4.1) ) My request COMMAND to GHC (GPT-4.1) was (**) again.
It was running for a while. From the Chat dialog ( which actually serves as a Log window) it can be seen that it loaded a limited number of files. It was stuck, it couldn’t find/load some model C# file. It tried several times and failed. Then I manually navigated (actually, I was just checking if the file was there) and it continued.
Then it proposed a plan of changes and stopped. I was looking, but nothing was generated. So I just typed: “continue with your plan,” and it continued and did it. And it created code, and built it, and the build was successful.
I looked into the solution, and it looked the same as above by GPT-4o. At least the key parts that I checked are the same. All comments from above apply here too.

2.2.3 GHC (Claude 3.7 Sonnet)

(Run4-GHC (Claude 3.7 Sonnet) ) My request COMMAND to GHC (Claude 3.7 Sonnet) was (**) again.
Execution failed after 5 minutes with message:
- _{"error":{"message":"prompt token count of 95998 exceeds the limit of 90000","code":"model_max_prompt_tokensexceeded"}}
It failed. Let’s restart VS2022 and try all again.
(Run5-GHC (Claude 3.7 Sonnet) ) My request COMMAND to GHC (Claude 3.7 Sonnet) was (**) again.
Execution failed after 5 minutes. The error was different:
- _[Conversations Information] [CopilotClient] Copilot Internal User response: Conversations.Abstractions.Auth.CopilotUserData; [Conversations Information] [CopilotModels] Environment variable COPILOT_USEDEFAULTPROXY found: False; [Conversations Information] Copilot auth status: OK. Copilot badge status: Active
I checked. My internet connection looked fine. On this machine I have 190Mbps/19Mbps.
Let’s restart VS2022 and try all again.
(Run6-GHC (Claude 3.7 Sonnet) ) My request COMMAND to GHC (Claude 3.7 Sonnet) was (**) again.
Execution failed after 10 minutes. Error was:
- _[PersistedCopilotSessionRepository Error] Error saving updated session: MessagePack.MessagePackSerializationException: Failed to serialize Microsoft.VisualStudio.Copilot.CopilotInteraction value; [Conversations Information] [CopilotClient] Copilot Internal User response: Conversations.Abstractions.Auth.CopilotUserData; [Conversations Information] [CopilotModels] Environment variable COPILOT_USEDEFAULTPROXY found: False; [Conversations Information] Copilot auth status: OK. Copilot badge status: Active

3 Conclusion

These are, of course, limited tests involving the generation of a single method based on a clear pattern. However, even with such straightforward tasks, GHC previously either failed entirely or produced code that required substantial manual correction.

So far, the improvements are dramatic compared to two months ago. Back then, the code generated by GHC often wouldn’t compile right away and suffered from odd syntax issues, like misplaced or mismatched brackets around code blocks. Even worse, it frequently included hallucinated method or property names that didn’t exist in the project. It did not look like a meaningful work process.

Now, the generated code has correct syntax, compiles right away, and the referred properties/methods do exist. This time, it actually starts to look like a proper work process. GHC Agent automates VS2022, so on a psychological level, it actually looks like someone else has overtaken control of your dev tools.

I'll keep testing it/working with more complex scenarios, but the GitHub Copilot Agent mode already feels like a significant step forward in quality.

Bootstrap Theme Colors
Class	Foreground	Background	Sample
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-dark
bg-light
bg-primary-subtle
bg-secondary-subtle
bg-success-subtle
bg-info-subtle
bg-warning-subtle
bg-danger-subtle
bg-dark-subtle
bg-light-subtle
text-bg-primary			This is test text, 1,2,3,4,5.
text-bg-secondary			This is test text, 1,2,3,4,5.
text-bg-success			This is test text, 1,2,3,4,5.
text-bg-info			This is test text, 1,2,3,4,5.
text-bg-warning			This is test text, 1,2,3,4,5.
text-bg-danger			This is test text, 1,2,3,4,5.
text-bg-dark			This is test text, 1,2,3,4,5.
text-bg-light			This is test text, 1,2,3,4,5.
text-primary			This is test text, 1,2,3,4,5.
text-secondary			This is test text, 1,2,3,4,5.
text-success			This is test text, 1,2,3,4,5.
text-info			This is test text, 1,2,3,4,5.
text-warning			This is test text, 1,2,3,4,5.
text-danger			This is test text, 1,2,3,4,5.
text-dark			This is test text, 1,2,3,4,5.
text-light			This is test text, 1,2,3,4,5.
text-black			This is test text, 1,2,3,4,5.
text-white			This is test text, 1,2,3,4,5.
text-primary-emphasis			This is test text, 1,2,3,4,5.
text-secondary-emphasis			This is test text, 1,2,3,4,5.
text-success-emphasis			This is test text, 1,2,3,4,5.
text-info-emphasis			This is test text, 1,2,3,4,5.
text-warning-emphasis			This is test text, 1,2,3,4,5.
text-danger-emphasis			This is test text, 1,2,3,4,5.
text-dark-emphasis			This is test text, 1,2,3,4,5.
text-light-emphasis			This is test text, 1,2,3,4,5.