Login
Home CMS Documentation Home CMS 10 Development Special Topics for Developers Updating Bootstrap in DSS

Updating Bootstrap in DSS Installation

Bootstrap is an open-source framework that enables you to create responsive websites. The current Ingeniux DSS uses Bootstrap 2. If you have not upgraded to Bootstrap 4, the following set of steps leads you through the process.

To update Bootstrap in your DSS installation:
  1. Download the package for Bootstrap v4.x.x from the Compiled CSS and JS section of the Bootstrap site.
  2. Unpack its contents to the DSS installation root folder, retaining the same folder structure as the bootstrap installation.

    Bootstrap 4.1.3 Distribution Folders

  3. Open [dss-root]\App_Start\BundleConfig.cs in a text/code editor. 
    
using System.Web;
using System.Web.Optimization;

namespace Ingeniux.Runtime
{
	public class BundleConfig
	{
		// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
		public static void RegisterBundles(BundleCollection bundles)
		{		
			//pre-defined bundles to use for bootstrap 3 based responsive designs
			bundles.Add(new StyleBundle("~/Bootstrap3").Include("~/bootstrap-4.3.1-dist/css/bootstrap.css"));
			bundles.Add(new StyleBundle("~/PageBuilder").Include(
				"~/bootstrap3/css/PageBuilder.css",
				"~/bootstrap3/css/PageBuilderCustom.css"));
		}
	}
}
  4. Edit the BundleConfig.cs file's Include path to reference the Bootstrap update: bundles.Add(new StyleBundle("~/Bootstrap3").Include("~/bootstrap-4.3.1-dist/css/bootstrap.css"));
    Note
    Retain the StyleBundle value as shown above (i.e., ~/Bootstrap3).
    Note
    Ensure that the above path reflects the version of the distribution that you have downloaded.
  5. Save changes to your solution file (*.sln) and rebuild the project.
  6. Clear your browser's client cache.
  7. Reload your CMS and check your PageBuilder pages.

Next Steps:

Important
For those implementations that 1) use Bootstrap in views and 2) reference css\styles from outside of the base \bootstrap3 folder, copy the \bootstrap-4.3.1-dist\css\bootstrap.css into your MCV folder structure. Many legacy MVC implementations contain views that reference bootstrap.css in \content\css\. Copy the new \bootstrap-4.x.x-dist\css\bootstrap.css to \content\css\, thereby overwriting the existing bootstrap.css file.

A quick test after you have updated Bootstrap in your DSS project is to create a PageBuilder page that has a multi-column layout that contains multiple rows. Check that the Design tab of the page rearranges the rows responsively as you resize the CMS window, horizontally. Ensure that the Zoom preview when resize option is unchecked.

Test Update of Bootstrap in Design Tab