Basically, we can create a SharePoint application with the help of default base SharePoint UI theme. But those UI designs are of very basic level themes.
That may not help to enhance the richness of our applications. So, we plan to give some good colors and cool screens for a product or application. We create a custom stylesheet and integrate into the application.
The next level is the look and feel which comes with a responsive application. Product screens need to fit with all devices without affecting the UI/UX.
What is bootstrap?
Bootstrap is a very popular and well supported responsive framework. Build projects on the web with the world's most popular front-end component library.
It is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with the variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Bootstrap is a web framework. We use this framework and construct a webpage or web applications with responsive UI so you can view your webpage in any devices.
What are the possible ways to add bootstrap in SharePoint applications?
There are two ways to integrate bootstrap framework into your SharePoint app.
The first one is, directly referring to the CDN URL of the bootstrap framework in the SharePoint Master Page. So, you can access the bootstrap files from any of the SharePoint pages which are built under your custom master page. You could get the updates in that version instantly.
Please refer to the code snippet below about including bootstrap components from CDN file
- <!-- css files-->
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
- <!-- javascript files-->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
- </script>
Another approach is to download the required files from bootstrap website and refer to it for any project. Please use the below URL to download the bootstrap framework,
https://getbootstrap.com/docs/4.0/getting-started/download/
You can find a download option in the bottom of that window. When you click on that you will get a zip file. Extract it to any folder, once extracted you will get some CSS and JS files which will help for responsive and other default bootstrap functionalities.
Include the downloaded files in your project folder where other CSS files are added.
In my case, I have added the files under Content folder. Once added in the project refer to the bootstrap.min.css into the head part of an application as below.
- <link href="../Content/bootstrap.min.css" rel="stylesheet" />
Now, refer the bootstrap.min.js URL into the below body of application.
- <script src="../Scripts/bootstrap.min.js"> </script>.
Yes, now we have integrated bootstrap framework in our SharePoint app. Very simple, right?
If you have any questions/issues about this article, please let me know in comments.