diff --git a/.gitignore b/.gitignore
index 038776f66d..e81e71b425 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,8 @@ npm-debug.log
 /components/**/*.js
 /components/**/*.js.map
 /components/**/*.d.ts
+/tests_e2e/**/*.e2e.js
+/tests_e2e/**/*.e2e.js.map
 ng2-bootstrap.js
 ng2-bootstrap.d.ts
 ng2-bootstrap.js.map
diff --git a/package.json b/package.json
index 5658c2df71..35878da939 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,8 @@
     "gulp": "3.9.1",
     "gulp-size": "2.1.0",
     "gulp-tslint": "6.1.2",
+    "jasmine": "2.5.2",
+    "jasmine-data-provider": "2.2.0",
     "lite-server": "2.2.2",
     "marked": "0.3.6",
     "ng2-webpack-config": "0.0.5",
@@ -101,6 +103,7 @@
     "tslint-config-valorsoft": "1.1.1",
     "typedoc": "0.5.0",
     "typescript": "2.0.3",
+    "protractor": "4.0.9",
     "wallaby-webpack": "0.0.26",
     "zone.js": "0.6.25"
   }
diff --git a/protractor.conf.js b/protractor.conf.js
index 285e0e6ce9..abc5f4fe35 100644
--- a/protractor.conf.js
+++ b/protractor.conf.js
@@ -1,7 +1,36 @@
-/**
- * @author: @AngularClass
- */
 'use strict';
 
-// look in ./config for protractor.conf.js
-module.exports.config = require('./config/protractor.conf.js').config;
+exports.config = {
+  seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
+
+  useAllAngular2AppRoots: true,
+
+  baseUrl: 'http://localhost:3000/',
+
+  multiCapabilities: [
+    {
+      browserName: 'chrome',
+      shardTestFiles: true,
+      maxInstances: 1
+    }
+
+    /*{
+     browserName: 'firefox',
+     shardTestFiles: true,
+     maxInstances: 4
+     }*/
+  ],
+
+  specs: [
+    // './tests_e2e/tests/*.e2e.js'
+    './tests_e2e/tests/accordion-demo.e2e.js'
+    // './tests_e2e/tests/modals-demo.e2e.js'
+  ],
+
+  framework: 'jasmine',
+
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 80000
+  }
+};
diff --git a/tests_e2e/data-provider/data-provider.e2e.ts b/tests_e2e/data-provider/data-provider.e2e.ts
new file mode 100644
index 0000000000..ecba78534a
--- /dev/null
+++ b/tests_e2e/data-provider/data-provider.e2e.ts
@@ -0,0 +1,27 @@
+import { $ } from 'protractor';
+import { ElementFinder } from 'protractor/built/index';
+
+const getTabHeaderAccordionPage = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
+};
+const getTabContentAccordionPage = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-body');
+};
+
+export class DataProvider {
+
+  public static accordionTableContent: any = {
+    '1stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(1), actualResult: 'Static Header, initially expanded'},
+    '1stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(1), actualResult: 'This content is straight in the template.'},
+    '2stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(2), actualResult: 'Dynamic Group Header - 1'},
+    '2stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(2), actualResult: 'Dynamic Group Body - 1'},
+    '3stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(3), actualResult: 'Dynamic Group Header - 2'},
+    '3stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(3), actualResult: 'Dynamic Group Body - 2'},
+    '4stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(4), actualResult: 'Dynamic Body Content'},
+    '4stTabContentText1stString': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body>p'), actualResult: 'The body of the accordion group grows to fit the contents'},
+    '4stTabContentTextAddButton': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body>button'), actualResult: 'Add Item'},
+    '4stTabContentTextTableItem': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body :nth-child(4)'), actualResult: 'Item 2'},
+    '5stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(5), actualResult: 'I can have markup, too!'},
+    '5stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(5), actualResult: 'This is just some content to illustrate fancy headings.'}
+  };
+}
diff --git a/tests_e2e/tests/accordion-demo.e2e.ts b/tests_e2e/tests/accordion-demo.e2e.ts
new file mode 100644
index 0000000000..f5ff97a45b
--- /dev/null
+++ b/tests_e2e/tests/accordion-demo.e2e.ts
@@ -0,0 +1,129 @@
+import { $, $$, browser } from 'protractor';
+import { leftPanelTests } from './leftPanelTests.e2e';
+import { DataProvider } from './../data-provider/data-provider.e2e';
+
+const buttonToggleLastPanel = $('accordion-demo>p button:nth-child(1)');
+const buttonEnableDisablePanel = $('accordion-demo>p button:nth-child(2)');
+const buttonAddItem = $('.panel-body .btn');
+const checkboxOnlyOne = $('.checkbox .ng-valid');
+const getItemsCount = $$('accordion-group:nth-child(4) .panel-body > div');
+const buttonArrow = $('.pull-right');
+let using = require('jasmine-data-provider');
+
+const getTabHeader = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
+};
+const getTabContent = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-body');
+};
+
+describe('Check the Accordion page in bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/accordion');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  it('Close/open first tab by click', () => {
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(true);
+  });
+  it('Open/close last tab with button Toggle Last Panel', () => {
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(true);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-down');
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(false);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-right');
+  });
+  it('Button Enable/Disable first panel is ON', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+  });
+  it('Button Enable/Disable first panel is OFF', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+  });
+  it('Add items in 4th tab', () => {
+    getTabHeader(4).click();
+    expect(getItemsCount.count()).toBe(3);
+    buttonAddItem.click();
+    buttonAddItem.click();
+    expect(getItemsCount.count()).toBe(5);
+  });
+  it('Open all tabs together', () => {
+      checkboxOnlyOne.click();
+      getTabHeader(1).click();
+      getTabHeader(2).click();
+      getTabHeader(3).click();
+      getTabHeader(5).click();
+      expect(getTabHeader(1).isDisplayed()).toBe(true);
+      expect(getTabHeader(2).isDisplayed()).toBe(true);
+      expect(getTabHeader(3).isDisplayed()).toBe(true);
+      expect(getTabHeader(4).isDisplayed()).toBe(true);
+      expect(getTabHeader(5).isDisplayed()).toBe(true);
+  });
+  using (DataProvider.accordionTableContent, (data:any, description:string) => {
+    it ('Check table texts: ' + description, () => {
+      expect(data.element().getText()).toBe(data.actualResult);
+    });
+  });
+});
+describe('Check the Accordion page in bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/accordion');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  it('Close/open first tab by click', () => {
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(true);
+  });
+  it('Open/close last tab with button Toggle Last Panel', () => {
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(true);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-down');
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(false);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-right');
+  });
+  it('Button Enable/Disable first panel is ON', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+  });
+  it('Button Enable/Disable first panel is OFF', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+  });
+  it('Add items in 4th tab', () => {
+    getTabHeader(4).click();
+    expect(getItemsCount.count()).toBe(3);
+    buttonAddItem.click();
+    buttonAddItem.click();
+    expect(getItemsCount.count()).toBe(5);
+  });
+  it('Open all tabs together', () => {
+    checkboxOnlyOne.click();
+    getTabHeader(1).click();
+    getTabHeader(2).click();
+    getTabHeader(3).click();
+    getTabHeader(5).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+    expect(getTabHeader(2).isDisplayed()).toBe(true);
+    expect(getTabHeader(3).isDisplayed()).toBe(true);
+    expect(getTabHeader(4).isDisplayed()).toBe(true);
+    expect(getTabHeader(5).isDisplayed()).toBe(true);
+  });
+  using (DataProvider.accordionTableContent, (data:any, description:string) => {
+    it ('Check table texts: ' + description, () => {
+      expect(data.element().getText()).toBe(data.actualResult);
+    });
+  });
+});
diff --git a/tests_e2e/tests/alert-demo.e2e.ts b/tests_e2e/tests/alert-demo.e2e.ts
new file mode 100644
index 0000000000..e60f036957
--- /dev/null
+++ b/tests_e2e/tests/alert-demo.e2e.ts
@@ -0,0 +1,82 @@
+import { $, $$, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const buttonAddAlert = $('alert-demo .btn');
+const alertWarning = $('.alert.alert-warning');
+const getAlertCount = $$('alert > div');
+const getCloseButton = (tabNumber:any) => {
+  return 'alert-demo alert:nth-child(' + tabNumber + ') .close';
+};
+
+describe('Alerts page test on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/alerts');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Warning alert is displayed', () => {
+    expect(alertWarning.isDisplayed()).toBe(true);
+  });
+  it('Warning alert is disappear', () => {
+    browser.sleep(5000);
+    expect(alertWarning.isPresent()).toBe(false);
+  });
+  it('Default warnings count', () => {
+    expect(getAlertCount.count()).toBe(3);
+  });
+  it('Adding warnings', () => {
+    buttonAddAlert.click();
+    buttonAddAlert.click();
+    expect(getAlertCount.count()).toBe(5);
+  });
+  it('User can delete danger and success alerts', () => {
+    $(getCloseButton(2)).click();
+    $(getCloseButton(1)).click();
+    expect(getAlertCount.count()).toBe(1);
+  });
+  it('User can delete added alerts', () => {
+    buttonAddAlert.click();
+    $(getCloseButton(3)).click();
+    expect(getAlertCount.count()).toBe(3);
+  });
+});
+describe('Alerts page test on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/alerts');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Warning alert is displayed', () => {
+    expect(alertWarning.isDisplayed()).toBe(true);
+  });
+  it('Warning alert is disappear', () => {
+    browser.sleep(5000);
+    expect(alertWarning.isPresent()).toBe(false);
+  });
+  it('Default warnings count', () => {
+    expect(getAlertCount.count()).toBe(3);
+  });
+  it('Adding warnings', () => {
+    buttonAddAlert.click();
+    buttonAddAlert.click();
+    expect(getAlertCount.count()).toBe(5);
+  });
+  it('User can delete danger and success alerts', () => {
+    $(getCloseButton(1)).click();
+    $(getCloseButton(1)).click();
+    expect(getAlertCount.count()).toBe(1);
+  });
+  it('User can delete added alerts', () => {
+    buttonAddAlert.click();
+    $(getCloseButton(3)).click();
+    expect(getAlertCount.count()).toBe(3);
+  });
+});
diff --git a/tests_e2e/tests/buttons-demo.e2e.ts b/tests_e2e/tests/buttons-demo.e2e.ts
new file mode 100644
index 0000000000..1aad3dfff4
--- /dev/null
+++ b/tests_e2e/tests/buttons-demo.e2e.ts
@@ -0,0 +1,187 @@
+import { $, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const buttonSingleToggle = $('buttons-demo>.btn');
+const panelSingleToggle = $('buttons-demo>.card:nth-child(2)');
+// cant find better CSS
+const checkboxModelFieldOne = $('buttons-demo > :nth-child(5)');
+const checkboxModelFieldTwo = $('buttons-demo > :nth-child(6)');
+const radioField = $('buttons-demo > :nth-child(9)');
+const pressCheckboxButton = (buttonPosition:any) => {
+  return '.btn-group [btncheckbox]:nth-child(' + buttonPosition + ')';
+};
+const radioButton = (buttonPosition:any) => {
+  return 'buttons-demo > div:nth-child(2n) :nth-child(' + buttonPosition + ')';
+};
+const unckeckableRadioButton = (buttonPosition:any) => {
+  return '.btn-group [uncheckable]:nth-child(' + buttonPosition + ')';
+};
+describe('Buttons page test on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/buttons');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Check single toggle button', () => {
+    buttonSingleToggle.click();
+    expect(panelSingleToggle.getText()).toBe('0');
+  });
+  it('Check that only two states are presented for Single toggle button', () => {
+    buttonSingleToggle.click();
+    buttonSingleToggle.click();
+    expect(panelSingleToggle.getText()).toBe('1');
+  });
+  it('Checkbox. Defaults states for checkbox buttons', () => {
+    expect(checkboxModelFieldOne.getText()).toContain('"left": false');
+    expect(checkboxModelFieldOne.getText()).toContain('"middle": true');
+    expect(checkboxModelFieldOne.getText()).toContain('"right": false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Left: false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Middle: true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Right: false');
+    expect($(pressCheckboxButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(pressCheckboxButton(2)).getAttribute('class')).toContain('active');
+    expect($(pressCheckboxButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+  });
+  it('Checkbox. Change state for left and Right buttons', () => {
+    $(pressCheckboxButton(1)).click();
+    $(pressCheckboxButton(2)).click();
+    $(pressCheckboxButton(3)).click();
+    expect(checkboxModelFieldOne.getText()).toContain('"left": true');
+    expect(checkboxModelFieldOne.getText()).toContain('"middle": false');
+    expect(checkboxModelFieldOne.getText()).toContain('"right": true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Left: true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Middle: false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Right: true');
+    expect($(pressCheckboxButton(1)).getAttribute('class')).toContain('active');
+    expect($(pressCheckboxButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(pressCheckboxButton(3)).getAttribute('class')).toContain('active');
+  });
+  it('Radio. Check defaults states for radio buttons', () => {
+    expect(radioField.getText()).toContain('Middle');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toContain('active');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+  it('Radio. Check left position for radio buttons', () => {
+    $(radioButton(1)).click();
+    expect(radioField.getText()).toContain('Left');
+    expect($(radioButton(1)).getAttribute('class')).toContain('active');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+  it('Radio. Check right position for radio buttons', () => {
+    $(unckeckableRadioButton(3)).click();
+    expect(radioField.getText()).toContain('Right');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toContain('active');
+  });
+  it('Radio. Check null state for radio buttons', () => {
+    $(unckeckableRadioButton(2)).click();
+    expect(radioField.getText()).toContain('null');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+});
+
+describe('Buttons page test on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/buttons');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Check single toggle button', () => {
+    buttonSingleToggle.click();
+    expect(panelSingleToggle.getText()).toBe('0');
+  });
+  it('Check that only two states are presented for Single toggle button', () => {
+    buttonSingleToggle.click();
+    buttonSingleToggle.click();
+    expect(panelSingleToggle.getText()).toBe('1');
+  });
+  it('Checkbox. Defaults states for checkbox buttons', () => {
+    expect(checkboxModelFieldOne.getText()).toContain('"left": false');
+    expect(checkboxModelFieldOne.getText()).toContain('"middle": true');
+    expect(checkboxModelFieldOne.getText()).toContain('"right": false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Left: false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Middle: true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Right: false');
+    expect($(pressCheckboxButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(pressCheckboxButton(2)).getAttribute('class')).toContain('active');
+    expect($(pressCheckboxButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+  });
+  it('Checkbox. Change state for left and Right buttons', () => {
+    $(pressCheckboxButton(1)).click();
+    $(pressCheckboxButton(2)).click();
+    $(pressCheckboxButton(3)).click();
+    expect(checkboxModelFieldOne.getText()).toContain('"left": true');
+    expect(checkboxModelFieldOne.getText()).toContain('"middle": false');
+    expect(checkboxModelFieldOne.getText()).toContain('"right": true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Left: true');
+    expect(checkboxModelFieldTwo.getText()).toContain('Middle: false');
+    expect(checkboxModelFieldTwo.getText()).toContain('Right: true');
+    expect($(pressCheckboxButton(1)).getAttribute('class')).toContain('active');
+    expect($(pressCheckboxButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(pressCheckboxButton(3)).getAttribute('class')).toContain('active');
+  });
+  it('Radio. Check defaults states for radio buttons', () => {
+    expect(radioField.getText()).toContain('Middle');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toContain('active');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+  it('Radio. Check left position for radio buttons', () => {
+    $(radioButton(1)).click();
+    expect(radioField.getText()).toContain('Left');
+    expect($(radioButton(1)).getAttribute('class')).toContain('active');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+  it('Radio. Check right position for radio buttons', () => {
+    $(unckeckableRadioButton(3)).click();
+    expect(radioField.getText()).toContain('Right');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toContain('active');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toContain('active');
+  });
+  it('Radio. Check null state for radio buttons', () => {
+    $(unckeckableRadioButton(2)).click();
+    expect(radioField.getText()).toContain('null');
+    expect($(radioButton(1)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(2)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(radioButton(3)).getAttribute('class')).toBe('btn btn-primary ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(1)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(2)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+    expect($(unckeckableRadioButton(3)).getAttribute('class')).toBe('btn btn-success ng-untouched ng-pristine ng-valid');
+  });
+});
diff --git a/tests_e2e/tests/carousel-demo.e2e.ts b/tests_e2e/tests/carousel-demo.e2e.ts
new file mode 100644
index 0000000000..5b82f4c66b
--- /dev/null
+++ b/tests_e2e/tests/carousel-demo.e2e.ts
@@ -0,0 +1,143 @@
+import { $, $$, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const inputInterval = $('input.form-control');
+const buttonAddSlide = $('.btn');
+const controlLeft = $('.left');
+const controlRight = $('.right');
+const slidesCount = $$('.carousel-inner > *');
+const checkboxDisableLopping = $('input[type="checkbox"]');
+
+const getSlideNumber = (tabNumber:any) => {
+  return '.carousel-inner>slide:nth-child(' + tabNumber + ')';
+};
+const doClick = (element:any, q:any) => {
+  while (q > 0) {
+    q--;
+    element.click();
+  }
+};
+
+describe('Carousel page tests on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/carousel');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Carousel default count', () => {
+    expect(slidesCount.count()).toBe(4);
+  });
+  it('Carousel count after adding slides', () => {
+    buttonAddSlide.click();
+    buttonAddSlide.click();
+    expect(slidesCount.count()).toBe(6);
+  });
+  it('Change the slides by clicking in right', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlRight.click();
+    expect($(getSlideNumber('2')).getAttribute('class')).toContain('active');
+  });
+  it('Change the slides by clicking in left', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlLeft.click();
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+  it('Change the slides by time', () => {
+    browser.sleep(5000);
+    expect($(getSlideNumber('2')).getAttribute('class')).toContain('active');
+  });
+  it('Disable slide looping. Left control', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    checkboxDisableLopping.click();
+    controlLeft.click();
+    expect($(getSlideNumber('1')).getAttribute('class')).toContain('active');
+  });
+  it('Disable slide looping. Right control', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    checkboxDisableLopping.click();
+    doClick(controlRight, 5);
+    browser.sleep(6000);
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+  it('Slide lopping on right', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    doClick(controlRight, 4);
+    expect($(getSlideNumber('1')).getAttribute('class')).toContain('active');
+  });
+  it('Slide lopping on left', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlLeft.click();
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+});
+describe('Carousel page tests on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/carousel');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Carousel default count', () => {
+    expect(slidesCount.count()).toBe(4);
+  });
+  it('Carousel count after adding slides', () => {
+    buttonAddSlide.click();
+    buttonAddSlide.click();
+    expect(slidesCount.count()).toBe(6);
+  });
+  it('Change the slides by clicking in right', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlRight.click();
+    expect($(getSlideNumber('2')).getAttribute('class')).toContain('active');
+  });
+  it('Change the slides by clicking in left', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlLeft.click();
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+  it('Change the slides by time', () => {
+    browser.sleep(6000);
+    expect($(getSlideNumber('2')).getAttribute('class')).toContain('active');
+  });
+  it('Disable slide looping. Left control', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    checkboxDisableLopping.click();
+    controlLeft.click();
+    expect($(getSlideNumber('1')).getAttribute('class')).toContain('active');
+  });
+  it('Disable slide looping. Right control', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    checkboxDisableLopping.click();
+    doClick(controlRight, 5);
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+  it('Slide lopping on right', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    doClick(controlRight, 4);
+    expect($(getSlideNumber('1')).getAttribute('class')).toContain('active');
+  });
+  it('Slide lopping on left', () => {
+    inputInterval.clear();
+    inputInterval.sendKeys('0');
+    controlLeft.click();
+    expect($(getSlideNumber('4')).getAttribute('class')).toContain('active');
+  });
+});
diff --git a/tests_e2e/tests/collapse-demo.e2e.ts b/tests_e2e/tests/collapse-demo.e2e.ts
new file mode 100644
index 0000000000..35554565a4
--- /dev/null
+++ b/tests_e2e/tests/collapse-demo.e2e.ts
@@ -0,0 +1,55 @@
+import { $, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const buttonToggle = $('.btn');
+const sameContent = $('.well');
+
+describe('Collapse page test on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/collapse');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Default states', () => {
+    expect(sameContent.isDisplayed()).toBe(true);
+    expect(sameContent.getText()).toBe('Some content');
+  });
+  it('Toggle collapse is ON', () => {
+    buttonToggle.click();
+    expect(sameContent.isDisplayed()).toBe(false);
+  });
+  it('Toggle collapse is OFF', () => {
+    buttonToggle.click();
+    buttonToggle.click();
+    expect(sameContent.isDisplayed()).toBe(true);
+    expect(sameContent.getText()).toBe('Some content');
+  });
+});
+
+describe('Collapse page test on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/collapse');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Default states', () => {
+    expect(sameContent.isDisplayed()).toBe(true);
+    expect(sameContent.getText()).toBe('Some content');
+  });
+  it('Toggle collapse is ON', () => {
+    buttonToggle.click();
+    expect(sameContent.isDisplayed()).toBe(false);
+  });
+  it('Toggle collapse is OFF', () => {
+    buttonToggle.click();
+    buttonToggle.click();
+    expect(sameContent.isDisplayed()).toBe(true);
+    expect(sameContent.getText()).toBe('Some content');
+  });
+});
diff --git a/tests_e2e/tests/leftPanelTests.e2e.ts b/tests_e2e/tests/leftPanelTests.e2e.ts
new file mode 100644
index 0000000000..26b38a284e
--- /dev/null
+++ b/tests_e2e/tests/leftPanelTests.e2e.ts
@@ -0,0 +1,18 @@
+import { $, browser } from 'protractor';
+
+const menuLeftMaxi = $('.main-menu-container');
+const menuLeftMini = $('#mobile-main-menu');
+
+const leftPanelTests = {
+  checkLeftPanelMini: () => {
+    browser.driver.manage().window().setSize(800, 600);
+    browser.sleep(500);
+    expect(menuLeftMini.isDisplayed()).toBeTruthy();
+  },
+  checkLeftPanelMaxi: () => {
+    browser.driver.manage().window().maximize();
+    browser.sleep(500);
+    expect(menuLeftMaxi.isDisplayed()).toBeTruthy();
+  }
+};
+export { leftPanelTests };
diff --git a/tests_e2e/tests/modals-demo.e2e.ts b/tests_e2e/tests/modals-demo.e2e.ts
new file mode 100644
index 0000000000..8496004771
--- /dev/null
+++ b/tests_e2e/tests/modals-demo.e2e.ts
@@ -0,0 +1,127 @@
+import { $, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const buttonLargeModal = $('.btn:nth-child(1)');
+const buttonSmallModal = $('.btn:nth-child(3)');
+const buttonChildModal = $('.btn:nth-child(5)');
+const buttonStaticModal = $('.btn:nth-child(7)');
+const modalWindow = $('.modal.fade.in');
+const modalTitle = $('.modal.fade.in .modal-title');
+const modalBody = $('.modal.fade.in .modal-body');
+const modalCloseButton = $('.modal.fade.in .close');
+
+describe('Modals page test on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/modals');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Check text in buttons', () => {
+    expect(buttonLargeModal.getText()).toBe('Large modal');
+    expect(buttonSmallModal.getText()).toBe('Small modal');
+    expect(buttonChildModal.getText()).toBe('Open child modal');
+    expect(buttonStaticModal.getText()).toBe('Static modal');
+  });
+  it('Large modal click', () => {
+    buttonLargeModal.click();
+    expect(modalTitle.getText()).toBe('Large modal');
+    expect(modalBody.getText()).toBe('...');
+  });
+  it('Large modal closed by missclick', () => {
+    buttonLargeModal.click();
+    browser.actions().
+    mouseDown(buttonLargeModal).
+    click().
+    perform();
+    expect(modalWindow.isPresent()).toBe(false);
+  });
+  it('Small modal click', () => {
+    buttonSmallModal.click();
+    expect(modalTitle.getText()).toBe('Small modal');
+    expect(modalBody.getText()).toBe('...');
+  });
+  it('Open child modal click', () => {
+    buttonChildModal.click();
+    expect(modalTitle.getText()).toBe('Child modal');
+    expect(modalBody.getText()).toBe('I am a child modal, opened from parent component!');
+  });
+  it('Static modal click', () => {
+    buttonStaticModal.click();
+    expect(modalTitle.getText()).toBe('Static modal');
+    expect(modalBody.getText()).toBe('This is static modal, backdrop click will not close it. Click × to close modal.');
+  });
+  it('Static modal close by cross', () => {
+    buttonStaticModal.click();
+    modalCloseButton.click();
+    expect(modalWindow.isPresent()).toBe(false);
+  });
+  it('Static modal does not close by misclick', () => {
+    buttonStaticModal.click();
+    browser.actions().
+    mouseDown(buttonLargeModal).
+    click().
+    perform();
+    expect(modalWindow.isDisplayed()).toBe(true);
+  });
+});
+
+describe('Modals page test on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/modals');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Check text in buttons', () => {
+    expect(buttonLargeModal.getText()).toBe('Large modal');
+    expect(buttonSmallModal.getText()).toBe('Small modal');
+    expect(buttonChildModal.getText()).toBe('Open child modal');
+    expect(buttonStaticModal.getText()).toBe('Static modal');
+  });
+  it('Large modal click', () => {
+    buttonLargeModal.click();
+    expect(modalTitle.getText()).toBe('Large modal');
+    expect(modalBody.getText()).toBe('...');
+  });
+  it('Large modal closed by missclick', () => {
+    buttonLargeModal.click();
+    browser.actions().
+    mouseDown(buttonLargeModal).
+    click().
+    perform();
+    expect(modalWindow.isPresent()).toBe(false);
+  });
+  it('Small modal click', () => {
+    buttonSmallModal.click();
+    expect(modalTitle.getText()).toBe('Small modal');
+    expect(modalBody.getText()).toBe('...');
+  });
+  it('Open child modal click', () => {
+    buttonChildModal.click();
+    expect(modalTitle.getText()).toBe('Child modal');
+    expect(modalBody.getText()).toBe('I am a child modal, opened from parent component!');
+  });
+  it('Static modal click', () => {
+    buttonStaticModal.click();
+    expect(modalTitle.getText()).toBe('Static modal');
+    expect(modalBody.getText()).toBe('This is static modal, backdrop click will not close it. Click × to close modal.');
+  });
+  it('Static modal close by cross', () => {
+    buttonStaticModal.click();
+    modalCloseButton.click();
+    expect(modalWindow.isPresent()).toBe(false);
+  });
+  it('Static modal does not close by misclick', () => {
+    buttonStaticModal.click();
+    browser.actions().
+    mouseDown(buttonLargeModal).
+    click().
+    perform();
+    expect(modalWindow.isDisplayed()).toBe(true);
+  });
+});
diff --git a/tests_e2e/tests/pagination-demo.e2e.ts b/tests_e2e/tests/pagination-demo.e2e.ts
new file mode 100644
index 0000000000..645b50f881
--- /dev/null
+++ b/tests_e2e/tests/pagination-demo.e2e.ts
@@ -0,0 +1,3 @@
+/**
+ * Created by vs on 10/6/16.
+ */