{"id":53101,"date":"2025-02-15T17:15:40","date_gmt":"2025-02-15T07:15:40","guid":{"rendered":"https:\/\/www.cloudproinc.com.au\/?p=53101"},"modified":"2025-02-15T17:15:42","modified_gmt":"2025-02-15T07:15:42","slug":"how-to-add-bootstrap-to-a-net-blazor-9-web-application","status":"publish","type":"post","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","title":{"rendered":"How to Add Bootstrap to a .NET Blazor 9 Web Application"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-bootstrap\">What is Bootstrap?<\/h2>\n\n\n\n<p>Bootstrap is a powerful, open-source front-end framework developed by Twitter. It is designed to help developers build responsive, mobile-first web applications effortlessly.<\/p>\n\n\n\n<p>Bootstrap provides a collection of CSS and JavaScript tools that simplify the process of designing web pages.<\/p>\n\n\n\n<p>The framework includes a&nbsp; range of components like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation bars<\/li>\n\n\n\n<li>Buttons<\/li>\n\n\n\n<li>Forms<\/li>\n\n\n\n<li>Modals<\/li>\n<\/ul>\n\n\n\n<p>One of the key advantages of Bootstrap is its grid system, which enables developers to create complex, responsive layouts with ease.<\/p>\n\n\n\n<p>The grid system is based on a 12-column layout that adjusts seamlessly to different screen sizes and devices.<\/p>\n\n\n\n<p>Bootstrap is also highly customizable. Developers adding Bootstrap to .NET Blazor 9 Web Application can modify the framework&#8217;s variables and mixins to create a unique design that aligns with their branding requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-blazor-9-latest-features\">Blazor 9 Latest Features<\/h2>\n\n\n\n<p>Blazor, is a web framework within the .NET ecosystem, continues to evolve, and .NET 9 brings with it a host of exciting new features which are in this <a href=\"https:\/\/learn.microsoft.com\/en-us\/aspnet\/core\/release-notes\/aspnetcore-9.0?view=aspnetcore-10.0\">link<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-add-bootstrap-to-a-net-blazor-9-web-application\"><strong>How to Add Bootstrap to a .NET Blazor 9 Web Application<\/strong><\/h2>\n\n\n\n<p>To add Bootstrap to a .NET 9 Blazor application, start by removing the existing Bootstrap folder found under the <strong>wwwroot<\/strong> directory of your project. This ensures that there are no conflicts with multiple versions of Bootstrap when adding Bootstrap to .NET Blazor 9 Web Application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-delete-bootstrap-folder\">Delete bootstrap folder<\/h2>\n\n\n\n<p>Blazor uses Bootstrap 5.1 by default. First, delete the Bootstrap folder in the wwwroot directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"266\" height=\"121\" data-src=\"\/wp-content\/uploads\/2025\/02\/image.png\" alt=\"Bootstrap folder in Blazor 9 application\" class=\"wp-image-53102 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 266px; --smush-placeholder-aspect-ratio: 266\/121;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-edit-app-razor-page\">Edit App.razor page<\/h2>\n\n\n\n<p>Next, edit the App.Razor page, which serves as the root component for your Blazor application.<\/p>\n\n\n\n<p>&nbsp;This page is pivotal in defining the layout and behavior of your Blazor app, setting up routing configurations, injecting services, and establishing global components.<\/p>\n\n\n\n<p>Instead of using the local Bootstrap files, it&#8217;s recommended to use the CDN Bootstrap installation for ease of updates and better performance.<\/p>\n\n\n\n<p>Add the Bootstrap to .NET Blazor 9 Web Application will streamline your development process. You can achieve this by modifying your App.Razor file to include the Bootstrap CDN link, facilitating a streamlined and efficient integration of Bootstrap into your Blazor application.<\/p>\n\n\n\n<p>We&#8217;ll use the recommended CDN method to install Bootstrap. Replace line 8 and add line 18 in your code.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-0c1c374b7e8ac6437c52911fe6183e4d\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"utf-8\" \/>\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    &lt;base href=\"\/\" \/>\n  <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">  <strong>&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH<\/strong>\" crossorigin=\"anonymous\"><\/mark>\n    &lt;link rel=\"stylesheet\" href=\"@Assets&#91;\"app.css\"]\" \/>\n    &lt;link rel=\"stylesheet\" href=\"@Assets&#91;\"crm.styles.css\"]\" \/>\n    &lt;ImportMap \/>\n    &lt;link rel=\"icon\" type=\"image\/png\" href=\"favicon.png\" \/>\n    &lt;HeadOutlet @rendermode=\"InteractiveServer\" \/>\n&lt;\/head>\n\n&lt;body>\n    &lt;Routes \/>\n    &lt;script src=\"_framework\/blazor.web.js\">&lt;\/script>\n  <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz\" crossorigin=\"anonymous\">&lt;\/script><\/mark><\/strong>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/code><\/pre>\n\n\n\n<p>Once the changes are made, we can use Bootstrap CSS classes as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-f3a511957f30b52a36fd70db9e6153fd\"><code>&lt;h1 class=\"text-center fw-bolder\">Clients&lt;\/h1><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-related-articles\">Related articles<\/h2>\n\n\n\n<ul class=\"wp-block-yoast-seo-related-links yoast-seo-related-links\">\n<li><a href=\"https:\/\/cloudproinc.com.au\/index.php\/2024\/10\/11\/create-an-app-registration-for-microsoft-azure-sdk-for-net\/\">Create an App Registration for Microsoft Azure SDK for .NET<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudproinc.com.au\/index.php\/2024\/07\/08\/creating-custom-error-pages-in-azure-web-app\/\">Creating Custom Error Pages in Azure Web App<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2024\/09\/10\/how-to-translate-text-using-azure-ai-translator-and-net\/\">How to Translate Text Using Azure AI Translator and .NET<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2024\/09\/13\/effortless-web-app-deployment-with-azure-cli\/\">Effortless Web App Deployment with Azure CLI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2024\/10\/07\/generate-dall-e-images-with-net-c-console-application\/\">Generate DALL-E Images with .NET C# Console Application<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":53103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"How to Add Bootstrap to a .NET Blazor 9 Web Application","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!","_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-53101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-blazor","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add Bootstrap to a .NET Blazor 9 Web Application - CPI Consulting<\/title>\n<meta name=\"description\" content=\"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!\" \/>\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\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Bootstrap to a .NET Blazor 9 Web Application\" \/>\n<meta property=\"og:description\" content=\"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/\" \/>\n<meta property=\"og:site_name\" content=\"CPI Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-15T07:15:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-15T07:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cloudproinc.azurewebsites.net\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\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=\"3 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\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/\"},\"author\":{\"name\":\"CPI Staff\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/person\\\/192eeeb0ce91062126ce3822ae88fe6e\"},\"headline\":\"How to Add Bootstrap to a .NET Blazor 9 Web Application\",\"datePublished\":\"2025-02-15T07:15:40+00:00\",\"dateModified\":\"2025-02-15T07:15:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/\"},\"wordCount\":462,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp\",\"articleSection\":[\".NET\",\"Blazor\",\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/\",\"url\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/\",\"name\":\"How to Add Bootstrap to a .NET Blazor 9 Web Application - CPI Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp\",\"datePublished\":\"2025-02-15T07:15:40+00:00\",\"dateModified\":\"2025-02-15T07:15:42+00:00\",\"description\":\"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#primaryimage\",\"url\":\"\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/index.php\\\/2025\\\/02\\\/15\\\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Bootstrap to a .NET Blazor 9 Web Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#website\",\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/\",\"name\":\"Cloud Pro Inc - CPI Consulting Pty Ltd\",\"description\":\"Cloud, AI &amp; Cybersecurity Consulting | Melbourne\",\"publisher\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\",\"name\":\"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd\",\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/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:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/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.azurewebsites.net\\\/index.php\\\/author\\\/cpiadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Bootstrap to a .NET Blazor 9 Web Application - CPI Consulting","description":"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!","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\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Bootstrap to a .NET Blazor 9 Web Application","og_description":"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!","og_url":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","og_site_name":"CPI Consulting","article_published_time":"2025-02-15T07:15:40+00:00","article_modified_time":"2025-02-15T07:15:42+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/cloudproinc.azurewebsites.net\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","type":"image\/webp"}],"author":"CPI Staff","twitter_card":"summary_large_image","twitter_misc":{"Written by":"CPI Staff","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#article","isPartOf":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/"},"author":{"name":"CPI Staff","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/schema\/person\/192eeeb0ce91062126ce3822ae88fe6e"},"headline":"How to Add Bootstrap to a .NET Blazor 9 Web Application","datePublished":"2025-02-15T07:15:40+00:00","dateModified":"2025-02-15T07:15:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/"},"wordCount":462,"commentCount":0,"publisher":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization"},"image":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","articleSection":[".NET","Blazor","Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","url":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","name":"How to Add Bootstrap to a .NET Blazor 9 Web Application - CPI Consulting","isPartOf":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","datePublished":"2025-02-15T07:15:40+00:00","dateModified":"2025-02-15T07:15:42+00:00","description":"Learn how to add Bootstrap to .NET Blazor 9 Web Application for responsive and mobile-first design. Get started today!","breadcrumb":{"@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#primaryimage","url":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","contentUrl":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudproinc.azurewebsites.net\/"},{"@type":"ListItem","position":2,"name":"How to Add Bootstrap to a .NET Blazor 9 Web Application"}]},{"@type":"WebSite","@id":"https:\/\/cloudproinc.azurewebsites.net\/#website","url":"https:\/\/cloudproinc.azurewebsites.net\/","name":"Cloud Pro Inc - CPI Consulting Pty Ltd","description":"Cloud, AI &amp; Cybersecurity Consulting | Melbourne","publisher":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudproinc.azurewebsites.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization","name":"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd","url":"https:\/\/cloudproinc.azurewebsites.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/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:\/\/cloudproinc.azurewebsites.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/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.azurewebsites.net\/index.php\/author\/cpiadmin\/"}]}},"jetpack_featured_media_url":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","jetpack-related-posts":[{"id":53365,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","url_meta":{"origin":53101,"position":0},"title":"Add Bootstrap Icons to a Blazor .NET Web App","author":"CPI Staff","date":"May 5, 2025","format":false,"excerpt":"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. 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\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 1x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 1.5x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 2x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 3x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 4x"},"classes":[]},{"id":53378,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/13\/publish-a-blazor-net-app-with-vs-code-to-azure\/","url_meta":{"origin":53101,"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 &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/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":53359,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","url_meta":{"origin":53101,"position":2},"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 &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/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":53420,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/06\/25\/containerize-a-blazor-net-application\/","url_meta":{"origin":53101,"position":3},"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 &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/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.azurewebsites.net\/index.php\/2025\/05\/01\/building-a-blazor-net-app-that-recognizes-images-with-openai\/","url_meta":{"origin":53101,"position":4},"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 &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/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":53293,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/04\/25\/openai-gpt-image-1-blazor-net-image-generator-web-app\/","url_meta":{"origin":53101,"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 &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/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.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/comments?post=53101"}],"version-history":[{"count":1,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53101\/revisions"}],"predecessor-version":[{"id":53104,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53101\/revisions\/53104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media\/53103"}],"wp:attachment":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media?parent=53101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/categories?post=53101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/tags?post=53101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}