Bootstrap

Bootstrap

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.

A Page Title will appear as either;

a tab below the header (on large screens)

or in a hamburger menu that opens up when you click on it (on smaller screens).

A 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).

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

Property	Sub-property	Description	Type	Additional information
Access	Access Code(s)	A code that allows the learner to access this section	Text	Separate codes with a comma if you want multiple codes
	Case Sensitive	Tick this box if you want the code(s) to be case sensitive	Tick box
	Instructions	An instruction displayed above the Access Code text-entry box	Text+ (Toolbar)	Default - “Enter an access code below to view this section:”
	Error Message	Error message displayed if the learner inputs the wrong Access Code	Text+ (Toolbar)	Default - “Invalid Access Code”
	Button Label	Text on the button for submitting Access Code	Text	Default - “Submit”
Filter Categories		Has to be used in conjunction with Search from the project-level Optional Properties. The Search categories must be set up first, as the filter categories for this section are ticked from this list.	Tick boxes
Header…	Image	Upload any image that you want to include in the header, through Media Browser	Link to Media Browser	You do not have to include an image in the header.
	Image Position	The position of the image within the header {Left/Centre/Right}	Drop-down
	Image Repeat	If your image is not the same proportions as the header, you can have it repeat to fill the space {Horizontal and Vertical Repeat / Horizontal Repeat / Vertical Repeat / No Repeat }	Drop-down
	Title Position	The position of the Page Title and Page Subtitle in the header {Right/Centre/Left}	Drop-down
	Background colour	Colour of the header background	Colour Picker
	Text Colour	Colour of the Page Title and Page Subtitle text	Colour picker
	Banner	You can either fix the height of the header, or have it fill the whole screen when the learner lands on it {Fixed Height/Full Screen}	Drop-down	If you choose Full Screen, 3 more sub-properties appear: Title top margin (%) sets the position of the Page Title and Page Subtitle relative to the top of the banner; Collapse Banner collapses the banner when the learner starts scrolling down the page (recommended); Enable scroll down info prompts the learner to scroll down to see the menu and page content
	Fixed height	If you have chosen Fixed Height as the Banner property (see row above) ticking the box allows you set a specific height, and leaving it unticked sets a fixed height large enough to display the Page Title and the Page Subtitle	Tick box	If you tick this box, an sub-property Banner Height appears, in which you can set the banner height
Hide/Show Page…	Hide Page	Use this tick box to hide the Page	Tick box	If you want the Section to be hidden at all times, use this tick box and don't add dates/times in the fields below
	From	Enter a date here, if you want the Page to be hidden from a specific date	Date picker	Use in conjunction with Hide Page tick box
	From (hh:mm)	Enter the time relating to the date above	Number	Use in conjunction with Hide Page tick box
	Until	Enter a date here, if you want the Page to be hidden until a specific date	Date picker	Use in conjunction with Hide Page tick box
	Until (hh:mm)	Enter the time relating to the date above	Number	Use in conjunction with Hide Page tick box
Lightbox…	Lightbox Images	This opens any images as lightboxes	Tick box	This property is only relevant if you have added images to this Section
Lightbox…	Caption	{None/Below Image/Above image} Position of the Image Description for the image	Drop-down	This property is only relevant if you have added an image as a subsection (i.e. not embedded in a Text subsection)
Notes		A space to add notes that are not displayed in the live project	Text+ (Toolbar)
Page ID		Creates a link directly to this page, by adding #yourPageID at the end of the project URL	Text
Page Link		By default the Page Title appears in the Navigation Bar/hamburger menu. If you want different text to appear, add it here.	Text
Section Menu Options	Hide menu	Allows you to hide the menu of Sections for this page	Tick box
Section Menu Options	Expand main contents	Expands the content to fill the whole width of the screen (i.e. filling space usually occupied by the Section menu)	Tick box	This sub-property only appears when you tick the Hide Menu box.
Stand-Alone Page…	Remove from Page Menu	Removes the Page from the Page Menu, so that it can only be accessed via Xerte page links	Tick box
	Open in New Window	Links to this page will open in a new window	Tick box
	Hide Header	Hides header	Tick box
	Navigation Bar	{ Default / Back Button Only / Hidden }	Drop-down	Default is the normal navigation bar/hamburger bar, displaying all the other pages in the project (unless they have been hidden. Back Button Only replace this with a Back button taking the previous page in the project.
Variables…	Submit Message
	Update Variables

and you will have to add a New Section to that page.

You need to give the Section a Title, which will appear as a heading for the section, and as a menu item for the page.

Section: Optional Properties

Property	Sub-property	Description	Type	Additional information
Access	Access Code(s)	A code that allows the learner to access this section	Text	Separate codes with a comma if you want multiple codes
	Case Sensitive	Tick this box if you want the code(s) to be case sensitive	Tick box
	Instructions	An instruction displayed above the Access Code text-entry box	Text+ (Toolbar)	Default - “Enter an access code below to view this section:”
	Error Message	Error message displayed if the learner inputs the wrong Access Code	Text+ (Toolbar)	Default - “Invalid Access Code”
	Button Label	Text on the button for submitting Access Code	Text	Default - “Submit”
Filter Categories		Has to be used in conjunction with Search from the project-level Optional Properties. The Search categories must be set up first, as the filter categories for this section are ticked from this list.	Tick boxes
Hide/Show Section…	Hide Section	Use this tick box to hide the Section	Tick box	If you want the Section to be hidden at all times, use this tick box and don't add dates/times in the fields below
	From	Enter a date here, if you want the Section to be hidden from a specific date	Date picker	Use in conjunction with Hide Section tick box
	From (hh:mm)	Enter the time relating to the date above	Number	Use in conjunction with Hide Section tick box
	Until	Enter a date here, if you want the Section to be hidden until a specific date	Date picker	Use in conjunction with Hide Section tick box
	Until (hh:mm)	Enter the time relating to the date above	Number	Use in conjunction with Hide Section tick box
Lightbox…	Lightbox Images	This opens any images as lightboxes	Tick box	This property is only relevant if you have added images to this Section
Lightbox…	Caption	{None/Below Image/Above image} Position of the Image Description for the image	Drop-down	This property is only relevant if you have added an image as a subsection (i.e. not embedded in a Text subsection)
Subsection Links		Adds a list of subsections below the Section Title. Subsections which are hidden will not be displayed.	Drop-down

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 in 3.13. The automated footer is a sticky footer and will be shown at the bottom of the browser window on pages containing little content. If you don't require a footer, it can be hidden using the Project > Optional Properties > Footer setting.

New Text...

This adds text to the section.

New Text: Core properties

Property	Description	Type	Additional information
Title	Adds a title in bold, just above any text you add (see row below) in this section	Text
Text	Text you can add for display below the Title	Text+ (Toolbar)	Use this to give the context or instructions for the task. Other content (e.g. images, audio, video) can be embedded here.
Show Title	Tick to display the Title, untick to hide	Tick box

New Text: Optional Properties

Property	Description	Type	Additional information
Disable glossary	Tick to disable the glossary, untick to activate it	Tick box

There are no Language Options for Bootstrap > New Text.

New Image...

This adds an image to the section.

New Image: Core properties

Property	Description	Type
Title	Adds a title in bold, just above any text you add (see row below) in this section	Text
Image	Adds an image below the Title	Link to Media Browser
Image Description	Enter a Description for Accessibility	Text
Show Title	Tick to display the Title, untick to hide	Tick box

There are no Optional Properties or Language Options for Bootstrap > New Image.

New Audio...

This adds an audio file to the section.

New Audio: Core properties

Property	Description	Type
Title	Adds a title in bold, just above the audio player (see row below) in this section	Text
Sound	Upload the audio file here, through Media Browser	Link to Media Browser
Show Title	Tick to display the Title, untick to hide	Tick box

There are no Optional Properties or Language Options for Bootstrap > New Audio.

New Video...

New Video: Core properties

Property	Description	Type
Title	Adds a title in bold, just above the video player (see row below) in this section	Text
Video	Upload the video file here, through Media Browser	Link to Media Browser
Show Title	Tick to display the Title, untick to hide	Tick box

There is only one Optional Property, iframe Aspect Ratio, which sets the aspect ratio for videos from external sites (e.g. YouTube).

There are no Language Options for Bootstrap > New Video.

New Navigator...

This inserts a section which presents content organised through a choice of navigators: Accordion, Carousel, Pills or Tabs. Accordion presents headings which reveal content when you click on them. Carousel presents content in a kind of slideshow, with < and > icons for navigation. Pills and Tabs present content in a similar way, but with differently shaped tabs. This page from the Bootstrap demo provides examples.

New Navigator: Core properties

Property	Description	Type
Title	Adds a title in bold, just above the navigator options (see row below) in this section	Text
Type	Select the type of navigator you want to include { Accordion / Carousel / Pills / Tabs}	Drop-down
Show Title	Tick to display the Title, untick to hide	Tick box

After you have created the overall settings for this section and decided which type of navigator to use, you need to a New Pane for each batch of content within the navigated section, and then within each Pane, you choose the type of content from the 8 categories (Text, Image, Audio, Video, Link, PDF File, XOT Project). It is theoretically possible to add several different types of content within a Pane, but in practice it is better to put different types of content in different Panes.

New Text: Optional Properties

Property	Description	Type
Auto-Play (Carousel Only): Auto-Play	Tick to have the Carousel auto-play when the learner lands on the section	Tick box
Auto-Play (Carousel Only): Delay	The delay in seconds before	Number
Collapse Accordion	Tick for all accordion panes to start collapsed when the learner lands on the section	Tick box

There are no Language Options for Bootstrap > New Text.

New Link...

This adds a link to an external webpage to the section, which opens in a new window.

New Link: Core properties

Property	Description	Type	Additional information
Title	Adds a title in bold, just above any text you add (see row below) in this section	Text
URL	The URL for the destination webpage	Text

There are 9 Optional Properties for New Link, but it is not clear what these do.

There are no Language Options for Bootstrap > New Text.

New PDF File...

This adds a PDF file to the section. This is embedded, but also has a link below it, opening the PDF in a new tab.

New PDF File: Core properties

Property	Description	Type
Title	Adds a title in bold, just above the PDF file (see row below) in this section	Text
PDF file	Upload the PDF file here, through Media Browser	Link to Media Browser
Show Title	Tick to display the Title, untick to hide	Tick box

There is only one Language Option for Bootstrap > New PDF File - this allows you to change the text on the link to open the PDF in a new tab.

There are no Language Options for Bootstrap > New PDF File.

New XOT Project...

You can embed a whole XOT project, or a specific page from a project, and hide the project header or footer.

New XOT Project: Core properties

Property	Description	Type
Title	Adds a title in bold, just above the embedded XOT Project	Text
Xerte Project Link	The URL of the XOT Project	Text
Hide Header	Hides the header of the XOT project	Tick box
Hide Footer	Hides the footer of the XOT project	Tick box
Show Title	Tick to display the Title, untick to hide	Tick box

New XOT Project: Optional Properties

Property	Description	Type	Additional information
Embed	Tick to embed the XOT project in the section	Tick box	You can tick both Embed and Show Link (see below) at the same time, but it is not recommended
Height	Height of the embedded XOT project in pixels	Number	Default - “100%”
Page	If you want a specific page in the XOT project to display, enter the page number here	Number	If you don't want learners to navigate to other pages, tick Hide Footer in the Core Prpoerties
Show link	Tick to show a link to the XOT project, which opens in a new tab	Tick box	You can tick both Show Link and Embed (see above) at the same time, but it is not recommended
Width	Width of the embedded XOT project relative to the width of the content area on the page	Percentage	Default - “100%”

There are no Language Options for Bootstrap > 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.

Table of Contents

Bootstrap

Example demo

Bootstrap Structure

Page: Optional Properties

Section: Optional Properties

Adding content

New Text: Core properties

New Text: Optional Properties

New Image: Core properties

New Audio: Core properties

New Video: Core properties

New Navigator: Core properties

New Text: Optional Properties

New Link: Core properties

New PDF File: Core properties

New XOT Project: Core properties

New XOT Project: Optional Properties

Advanced Options