User Tools

Site Tools



The Bootstrap Template enables you to create a simple website, which you could use, for example, to organise and present learning materials for a course or course module. If you are able to author a range of page types using Xerte Online Toolkit (XOT), then using the Bootstrap Template should be fairly easy, as many of the basic principles are the same. Many of the resources created by the Xerte community have been produced using the Bootstrap Template.

Example demo

This Introduction to Bootstrap site was created using the Bootstrap Template. It has a simple design (and there is a lot more you can do round design, for example of the header), but it also provides a comprehensive guide to the functionality of the Bootstrap Template. In this wiki, this site displays much as it would on a smartphone. If you open it in a new tab (see below) it will display differently.

or view at Introduction to Bootstrap (opens in new tab)

Bootstrap Structure

A Bootstrap project comprises Pages and Sections within those pages. A project can consist of only one Page, if that is all that is needed.

xerte-bootrap-tab.jpgA Page Title will appear as either;

  • a tab below the header (on large screens)
  • xerte-bootrap-hamburger.jpgor in a hamburger menu that opens up when you click on it (on smaller screens).

xerte-bootstrap-sections.jpgA Section Title will appear as an item in a menu that displays either;

  • on the left side of the screen (on larger screens)
  • or at the top of the screen (on smaller screens).

bootstrap_new_section.jpg When you start creating your Bootstrap project, you will see that the first page is in place. You need to give a Page Title, and (optionally) a Page Subtitle. These are displayed in the header for the page.

Page: Optional Properties

Page: Optional Properties

Section: Optional Properties

Section: Optional Properties

Adding content

Next you need to add content to the page; there are 8 different types of content you can add. Click on the headings below to open up information about each one.

New Text...

New Image...

New Audio...

New Video...

New Navigator...

New Link...

New PDF File...

New XOT Project...

Advanced Options

For any section in the Bootstrap you can also show the Advanced Options from the bottom of the editor window:

This reveals options to add custom Javascript or HTML code, or add a canvas.

bootstrap.txt · Last modified: 2023/07/06 15:38 by tadachi