Bootstrap Installation for SharePoint Developers step by step

 





                  how we can download and install bootstrap in SPFX web parts?

                 There are different ways we can download and use bootstrap.

 

               1) We can download the compiled version of CSS and JS required for bootstrap and we can use it.

              https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css

              https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js

              Add this file in Assets folder of your solution and require n your tsx.


         
 

           2) you can also provide the JS and CSS file path from CDN path like below:  <SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css’)>

<SPComponentLoader.Script(‘https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js’)>



 

           3)You can install bootstrap using the npm command in your solution.

           Run this command in your terminal

           npm i bootstrap

 

          by using the above method, you can start using bootstrap in the SPFX web part.


         Problems encountered while utilizing Bootstrap:

         ·         Failed to locate files The cause of the problem is that we did not utilize a file in the bootstrap folder structure or we used the incorrect file location.

         ·         A common issue is that when it comes to bootstrap versions, we should stick to a single version and follow the documentation for that version.

        ·         We shouldn't utilize the CDN path because it will take some time and occasionally cause redirection problems.

        ·         JavaScript not working in modal popup components because jQuery isn't installed or there's a jQuery version problem.



                                                                                                                           - Janmeet

Comments

Post a Comment

Popular posts from this blog

Introduction to Copilot in PowerApps

With just a few prompts in natural language, Power Apps Copilot can develop an app with a user interface, data tables, and backend logic. All you need to do is describe in natural language, “Build an app to onboard new employees and share an induction invitation email with clear instructions.” Copilot lets you build multi-screen apps, update user interfaces, add buttons, and customize colors. According to Microsoft, makers using Copilot have a success rate 60% higher than those who don’t incorporate Copilot and are 65% more satisfied with their overall experience. Copilot can help makers build apps over data from Excel 80% faster than before. Let’s take a quick look at an example of Copilot: How Copilot can help you build apps faster and more efficiently Increased productivity: Copilot automates repetitive coding tasks, allowing you to focus on more important aspects of app development.  Faster coding: Copilot generates entire code snippets and provides smart formula suggestio...
Read more

Still using Classic SharePoint Sites?

Image
  Still using Classic SharePoint Sites? Oh! No worries, we got your back. There is one tool “ SharePoint Modernization Scanner ”. Now you must be wondering what it is? How it works? What all data you need to execute this tool? Hold on! Hold on! We will walk through all your questions one by one. Let’s Dive… Scanner is a key tool to use if you want to prepare for modernizing your classic sites as it will give you factual data about how easy  it is to modernize your site. Using the data generated on the dashboard by the scanner you will be able to drill down on the modernization readiness of your sites and plan the require work to be done where it is needed. Using this Scanner, you can prepare you classic sites for modernization. You can use to drive the planning, remediation, and migration. You will be prepared for the following modernization efforts.           The compatibility of the lists and libraries for modern user interface. Connecting these...
Read more

SharePoint Consulting Services in Canada & USA

Image
SharePoint Consulting Services in Canada, USA Description: - Desire Info Web, the top SharePoint Consulting Services in Canada, USA offers expert consulting services to help your organization enhance operations with SharePoint. In today’s fast-paced digital landscape, organizations need efficient tools and technologies to streamline their operations, enhance collaboration, and manage content effectively. SharePoint, a powerful platform developed by Microsoft, stands as a leading solution for enterprises to meet these needs. At Desire Infoweb, we take pride in delivering top-notch SharePoint consulting services in Canada, USA tailored to help businesses unlock the full potential of this versatile platform. Why Choose SharePoint for Your Business? SharePoint is more than just a content management system; it’s a comprehensive platform designed to foster collaboration, automate workflows, and centralize information. Here are some key benefits of using SharePoint: ...
Read more