{"id":53365,"date":"2025-05-05T15:45:52","date_gmt":"2025-05-05T05:45:52","guid":{"rendered":"https:\/\/www.cloudproinc.com.au\/?p=53365"},"modified":"2025-05-05T16:01:13","modified_gmt":"2025-05-05T06:01:13","slug":"add-bootstrap-icons-to-a-blazor-net-web-app","status":"publish","type":"post","link":"https:\/\/cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","title":{"rendered":"Add Bootstrap Icons to a Blazor .NET Web App"},"content":{"rendered":"\n

In this blog post, we\u2019ll show you how to add Bootstrap Icons<\/strong> to a Blazor .NET Web App to create visually appealing and consistent UI elements.<\/p>\n\n\n\n\n\n\n\n

Bootstrap Icons is a free, open-source library that provides over 1,800 scalable vector icons designed to integrate seamlessly with Bootstrap-based interfaces. These icons are available in SVG format, making them lightweight, customizable, and perfect for use in modern frameworks like Blazor.<\/p>\n\n\n\n

Step 1: Add Bootstrap to Your Blazor Application<\/h2>\n\n\n\n

Before using Bootstrap Icons, ensure your Blazor app has Bootstrap included.<\/p>\n\n\n\n

\ud83d\udc49 If you haven\u2019t already set it up, check out our tutorial on how to add Bootstrap to a Blazor Web Application<\/a>.<\/p>\n\n\n\n

Step 2: Choose an Icon<\/h2>\n\n\n\n
    \n
  1. Visit Bootstrap Icons<\/a><\/li>\n\n\n\n
  2. Choose the icon you want (e.g., airplane-fill<\/code>)<\/li>\n\n\n\n
  3. Copy the SVG code<\/strong> snippet provided on the page<\/li>\n<\/ol>\n\n\n\n

    Understanding SVG as CSS Background<\/h2>\n\n\n\n

    SVGs converted to CSS background images offer flexibility and performance benefits. Instead of embedding the full <svg><\/code> element into your HTML, encoding it as a data:image\/svg+xml<\/code> URL allows you to apply it like any other background image in your stylesheets. This method reduces HTML clutter and makes your components more reusable. Additionally, because SVGs are vector-based, they remain sharp and scalable at any resolution or zoom level, which is ideal for responsive Blazor applications.<\/p>\n\n\n\n

    Step 3: Convert SVG to CSS<\/h2>\n\n\n\n

    To use the icon as a background image, convert the SVG to a data:image<\/code> URL:<\/p>\n\n\n\n

      \n
    1. Visit SVG to CSS converter<\/a><\/li>\n\n\n\n
    2. Paste the copied SVG code<\/li>\n\n\n\n
    3. Generate the CSS snippet<\/li>\n<\/ol>\n\n\n\n

      Step 4: Add Icon Style to NavMenu<\/h2>\n\n\n\n

      Edit NavMenu.razor.css<\/code> and add the generated CSS:<\/p>\n\n\n\n

      Step 5: Use the Icon in Your Navigation Menu<\/h2>\n\n\n\n
      .bi-airplane-fill {\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' fill='white' class='bi bi-airplane-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151...'%3E%3C\/path%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    display: inline-block;\n    width: 1rem;\n    height: 1rem;\n    margin-right: 0.5rem;\n}<\/code><\/pre>\n\n\n\n
      Open NavMenu.razor<\/code> and modify the NavLink<\/code> to include the icon:<\/p>\n\n\n\n
      <div class=\"nav-item px-3\">\n    <NavLink class=\"nav-link\" href=\"weather\">\n        <span class=\"bi bi-airplane-fill\" aria-hidden=\"true\"><\/span> Weather\n    <\/NavLink>\n<\/div>\n<\/code><\/pre>\n\n\n\n
      Final Result<\/h2>\n\n\n\n
      You\u2019ll now see the airplane icon next to your Weather<\/strong> menu item, styled using your CSS.<\/p>\n\n\n\n
      \"Bootstrap<\/figure>\n\n\n\n
      Summary<\/h3>\n\n\n\n
      Using Bootstrap Icons in a Blazor .NET app is simple and flexible. With just a few steps, you can bring in scalable icons that improve usability and design consistency. Whether for navigation, buttons, or UI highlights, Bootstrap Icons are a powerful tool for any Blazor developer.<\/p>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      In this blog post, we\u2019ll show you how to add Bootstrap Icons to a Blazor .NET Web App to create visually appealing and consistent UI elements.<\/p>\n","protected":false},"author":1,"featured_media":53375,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"Add Bootstrap Icons to a Blazor .NET Web App","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.","_yoast_wpseo_opengraph-title":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_twitter-title":"","_yoast_wpseo_twitter-description":"","_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27,67,13],"tags":[],"class_list":["post-53365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-blazor","category-blog"],"yoast_head":"\nAdd Bootstrap Icons to a Blazor .NET Web App - CPI Consulting<\/title>\n<meta name=\"description\" content=\"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Bootstrap Icons to a Blazor .NET Web App\" \/>\n<meta property=\"og:description\" content=\"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"CPI Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-05T05:45:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-05T06:01:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cloudproinc.com.au\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CPI Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CPI Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/\"},\"author\":{\"name\":\"CPI Staff\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#\\\/schema\\\/person\\\/192eeeb0ce91062126ce3822ae88fe6e\"},\"headline\":\"Add Bootstrap Icons to a Blazor .NET Web App\",\"datePublished\":\"2025-05-05T05:45:52+00:00\",\"dateModified\":\"2025-05-05T06:01:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/\"},\"wordCount\":343,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-Bootstrap-icons-dc.png\",\"articleSection\":[\".NET\",\"Blazor\",\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/\",\"url\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/\",\"name\":\"Add Bootstrap Icons to a Blazor .NET Web App - CPI Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-Bootstrap-icons-dc.png\",\"datePublished\":\"2025-05-05T05:45:52+00:00\",\"dateModified\":\"2025-05-05T06:01:13+00:00\",\"description\":\"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#primaryimage\",\"url\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-Bootstrap-icons-dc.png\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-Bootstrap-icons-dc.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/05\\\/05\\\/add-bootstrap-icons-to-a-blazor-net-web-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Bootstrap Icons to a Blazor .NET Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/\",\"name\":\"Cloud Pro Inc - CPI Consulting Pty Ltd\",\"description\":\"Cloud, AI & Cybersecurity Consulting | Melbourne\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#organization\",\"name\":\"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd\",\"url\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/favfinalfile.png\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/favfinalfile.png\",\"width\":500,\"height\":500,\"caption\":\"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/#\\\/schema\\\/person\\\/192eeeb0ce91062126ce3822ae88fe6e\",\"name\":\"CPI Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"caption\":\"CPI Staff\"},\"sameAs\":[\"http:\\\/\\\/www.cloudproinc.com.au\"],\"url\":\"https:\\\/\\\/cloudproinc.com.au\\\/index.php\\\/author\\\/cpiadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Bootstrap Icons to a Blazor .NET Web App - CPI Consulting","description":"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","og_locale":"en_US","og_type":"article","og_title":"Add Bootstrap Icons to a Blazor .NET Web App","og_description":"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.","og_url":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","og_site_name":"CPI Consulting","article_published_time":"2025-05-05T05:45:52+00:00","article_modified_time":"2025-05-05T06:01:13+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/cloudproinc.com.au\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","type":"image\/png"}],"author":"CPI Staff","twitter_card":"summary_large_image","twitter_misc":{"Written by":"CPI Staff","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#article","isPartOf":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/"},"author":{"name":"CPI Staff","@id":"https:\/\/www.cloudproinc.com.au\/#\/schema\/person\/192eeeb0ce91062126ce3822ae88fe6e"},"headline":"Add Bootstrap Icons to a Blazor .NET Web App","datePublished":"2025-05-05T05:45:52+00:00","dateModified":"2025-05-05T06:01:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/"},"wordCount":343,"commentCount":0,"publisher":{"@id":"https:\/\/www.cloudproinc.com.au\/#organization"},"image":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","articleSection":[".NET","Blazor","Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","url":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","name":"Add Bootstrap Icons to a Blazor .NET Web App - CPI Consulting","isPartOf":{"@id":"https:\/\/www.cloudproinc.com.au\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","datePublished":"2025-05-05T05:45:52+00:00","dateModified":"2025-05-05T06:01:13+00:00","description":"Learn to add Bootstrap Icons to a Blazor .NET Web App for enhanced UI. Make your application visually appealing and modern.","breadcrumb":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#primaryimage","url":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","contentUrl":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudproinc.com.au\/"},{"@type":"ListItem","position":2,"name":"Add Bootstrap Icons to a Blazor .NET Web App"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudproinc.com.au\/#website","url":"https:\/\/www.cloudproinc.com.au\/","name":"Cloud Pro Inc - CPI Consulting Pty Ltd","description":"Cloud, AI & Cybersecurity Consulting | Melbourne","publisher":{"@id":"https:\/\/www.cloudproinc.com.au\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudproinc.com.au\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudproinc.com.au\/#organization","name":"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd","url":"https:\/\/www.cloudproinc.com.au\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudproinc.com.au\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2022\/01\/favfinalfile.png","contentUrl":"\/wp-content\/uploads\/2022\/01\/favfinalfile.png","width":500,"height":500,"caption":"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd"},"image":{"@id":"https:\/\/www.cloudproinc.com.au\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.cloudproinc.com.au\/#\/schema\/person\/192eeeb0ce91062126ce3822ae88fe6e","name":"CPI Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","caption":"CPI Staff"},"sameAs":["http:\/\/www.cloudproinc.com.au"],"url":"https:\/\/cloudproinc.com.au\/index.php\/author\/cpiadmin\/"}]}},"jetpack_featured_media_url":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","jetpack-related-posts":[{"id":53101,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","url_meta":{"origin":53365,"position":0},"title":"How to Add Bootstrap to a .NET Blazor 9 Web Application","author":"CPI Staff","date":"February 15, 2025","format":false,"excerpt":"In this Blazor .NET blog post, we will show how to add Bootstrap to a .NET 9 Blazor application and leverage the most popular CSS framework. Adding Bootstrap to .NET Blazor 9 Web Application can enhance your development experience. What is Bootstrap? Bootstrap is a powerful, open-source front-end framework developed\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1.5x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 2x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 3x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 4x"},"classes":[]},{"id":53378,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/05\/13\/publish-a-blazor-net-app-with-vs-code-to-azure\/","url_meta":{"origin":53365,"position":1},"title":"Publish a Blazor .NET App With VS Code to Azure","author":"CPI Staff","date":"May 13, 2025","format":false,"excerpt":"In this Microsoft Azure blog post, we\u2019ll walk through how to publish a Blazor .NET app using Visual Studio Code (VS Code) to Azure. VS Code, with its rich ecosystem of extensions and integrations, is more than just a code editor. It enables developers to build, test, integrate, and deploy\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 1x, \/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 1.5x, \/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 2x"},"classes":[]},{"id":53420,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/06\/25\/containerize-a-blazor-net-application\/","url_meta":{"origin":53365,"position":2},"title":"Containerize a Blazor .NET Application","author":"CPI Staff","date":"June 25, 2025","format":false,"excerpt":"In this blog post, we will show you how to containerize a Blazor .NET application using native tools\u2014without relying on third-party scripts or complex setups. Microsoft .NET is one of the most popular development frameworks today, offering a wide range of deployment options. Running applications in containers and adopting microservices\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1.5x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 2x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 3x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 4x"},"classes":[]},{"id":53341,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/05\/01\/building-a-blazor-net-app-that-recognizes-images-with-openai\/","url_meta":{"origin":53365,"position":3},"title":"Building a Blazor .NET App that Recognizes Images with OpenAI","author":"CPI Staff","date":"May 1, 2025","format":false,"excerpt":"In this blog post, we\u2019ll show you how to Build a Blazor .NET App that Recognizes Images with OpenAI. You\u2019ll see how we securely upload image files, send them to OpenAI\u2019s API, and return a natural-language response\u2014seamlessly integrated into a modern web interface. This example highlights how CPI Consulting applies\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 1x, \/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 1.5x, \/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 2x"},"classes":[]},{"id":53359,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","url_meta":{"origin":53365,"position":4},"title":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color","author":"CPI Staff","date":"May 5, 2025","format":false,"excerpt":"Blazor 9 introduces a powerful, component-driven architecture that makes it easier than ever to build interactive and modern web applications using .NET. In this tutorial, we'll walk you through how to personalize your Blazor web app by adding a custom logo and changing the sidebar color to give your app\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png 1x, \/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png 1.5x, \/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png 2x, \/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png 3x, \/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png 4x"},"classes":[]},{"id":53293,"url":"https:\/\/cloudproinc.com.au\/index.php\/2025\/04\/25\/openai-gpt-image-1-blazor-net-image-generator-web-app\/","url_meta":{"origin":53365,"position":5},"title":"OpenAI GPT-Image-1 Blazor .NET Image Generator Web App","author":"CPI Staff","date":"April 25, 2025","format":false,"excerpt":"In this blog post, we will present the OpenAI GPT-Image-1 Blazor .NET Image Generator Web App, a tool designed to demonstrate the capabilities of OpenAI's latest image generation API. \u00a0What Does the Web App Do? This Blazor-based web application leverages OpenAI's GPT-Image-1 model to generate stunning, high-quality images based on\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/cloudproinc.com.au\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/04\/OpenAI-GPT-image-1-image-API.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/04\/OpenAI-GPT-image-1-image-API.png 1x, \/wp-content\/uploads\/2025\/04\/OpenAI-GPT-image-1-image-API.png 1.5x, \/wp-content\/uploads\/2025\/04\/OpenAI-GPT-image-1-image-API.png 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/comments?post=53365"}],"version-history":[{"count":1,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53365\/revisions"}],"predecessor-version":[{"id":53368,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53365\/revisions\/53368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/media\/53375"}],"wp:attachment":[{"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/media?parent=53365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/categories?post=53365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/tags?post=53365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}