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

Image
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 suggestions,
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 sites to a Microsoft 365 group. 
Read more

SharePoint Migration

Image
Introduction To better understand the methodology of migrating content from one SharePoint system to another, we first need to understand the concept of migration itself: why organizations do it? How much time does it take? How can we minimized the risk? SharePoint has received regular upgrades every few years, and the many improvements over its tenure have resulted in multiple iterations of the platform. Because of these improvements and the expectations of today’s users, businesses are compelled to tackle a SharePoint migration more often. Why Organizations Migrate To Sharepoint 2016 / Office 365 Deeper Integration SharePoint 2016 takes a big step forward with its integration with other Microsoft products, most notably Office 365 and OneDrive for Business. Users can safely store their files for others to access them, which will be compatible with whatever program they use. It also ties in with hybrid SharePoint deployments for organizations that have chosen
Read more