BrowseLab Products Demos Support Company Download Pricing
Contents
:
Search:

Home > HelpConsole 6 > How to Integrate Bootstrap

How to Integrate Bootstrap

Bootstrap is an HTML CSS and JS framework used to design web apps and web pages. You may integrate it with HelpConsole 6, however, HelpConsole 6 works off its own compiled CSS and does not support outside CSS stylesheets in the program style editor. As well, HelpConsole 6's What-You-See-Is-What-You-Get Editor is not built to display pages with Bootstrap classes while editing.

NOTE: This requires the downloaded version of HelpConsole 6.

How to Integrate Bootstrap with HelpConsole 6 Projects:

Installing Bootstrap in HelpConsole 6:

  1. Download Bootstrap's css, javascript, and font files here: http://getbootstrap.com/getting-started/#download
  2. Add the following files to HelpConsole 6's engine folder where the program was originally installed. (eg. C:\Program Files\HelpConsole 6\_engine\):
    • bootstrap.min.css
    • bootstrap.min.js
    • The fonts folder (ie. bootstrap-3.3.5-dist\fonts)
  3. Go to Tools > Properties and make sure Scripts are enabled.

Linking Bootstrap Resources into your HelpConsole 6 Project:​

The Page Header is where any link, meta, or script elements can be added:

  1. Log in to HelpConsole 6 as a user with sufficient permissions to edit the page header.
  2. Select the orange Edit Header button while viewing a regular help page (not the welcome page).
  3. In the editor, switch to <>HTML view.
  4. Enter the following HTML, with appropriate file paths to the referenced CSS/JS files:
    • <link href="../_engine/bootstrap.min.css" rel="stylesheet"/>
    • <script src="../_engine/jquery.min.js"></script>
    • <script src="../_engine/bootstrap.min.js"></script>
  5. Save the page.

Test Bootstrap HTML in your HelpConsole 6 Project:

(Optional) Edit the page (green button), switch to <>HTML view in the editor and add the following HTML:

<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
Save the page and exit the page editor to check out how Bootstrap is rendered in HelpConsole 6.


Now, in your web browser's URL bar, go to localhost/helpconsole6/ProjectName/page.aspx?pageid=Page_Id (changing the highlighted parts of the address to your project's name and a pageid from your project).

Notes:

Now you have integrated Bootstrap to your HelpConsole 6 project, but if you would have to rely on the editor's <>HTML view to write pages with it.

Related Pages:

Styles

Page Header

Adding tags to head section

Setting Project Properties

How to Integrate ShareThis

How to Integrate Google Tag Manager


Properties
Article ID:
how_to_integrate_bootstrap
Views: 811
Created By: admin
Modified By: admin
Created Date: 6/17/2015 1:54 PM
Last Modified: 6/17/2015 3:04 PM
Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo