Access the HTML Bootstrap Editor in Moodle

Watch the video first if something looks wrong

The video above shows how to switch your editor to Atto. Most issues with missing buttons, different toolbars, or unavailable HTML options are resolved by switching editors before continuing.

Access the HTML Bootstrap Editor in Moodle

Use this guide when you need to paste or edit Bootstrap-formatted HTML (buttons, cards, accordions, layout blocks, etc.) inside a Moodle page, label, or Text and media area.

HTML Bootstrap Editor

When to use the HTML Bootstrap Editor

  • You’ve been given a block of HTML/CSS and need to paste it into Moodle.
  • You need to edit Bootstrap components without breaking formatting.
  • Your content looks incorrect because you’re editing in the visual view instead of HTML.

Before you start

  • You must be in Edit mode in your course.
  • The HTML editor appears inside Moodle’s text editor.
  • If options are missing, watch the video above to switch to Atto.

Step-by-step: Open the HTML Bootstrap Editor

  1. Turn editing on
    Enable Edit mode in the top-right of your course.
  2. Open the item you want to edit
    Edit a Page, Label, or Text and media area.
  3. Locate the HTML/Bootstrap editor option
    Expand the toolbar if needed and look for HTML, Source, </>, or a Bootstrap-related button.
  4. Edit your HTML
    Paste or modify your code in the HTML view, then save.
  5. Save and preview
    Save the activity and confirm your layout displays correctly.

Troubleshooting

If something doesn’t look right, start by watching the video above. It shows how to switch to the Atto editor, which resolves most issues.

  • The toolbar looks different than my colleague’s: You’re likely using a different editor. Watch the video, switch to Atto, refresh the page, and reopen the editor.
  • My formatting breaks after pasting HTML: Ensure you’re pasting into the HTML/Source view, not the visual editor. The video shows where to find this.
  • I don’t see any HTML/source option: Confirm you’ve switched to Atto using the video. If it’s still missing, your course may restrict HTML editing.
Need help?

If you’re still unable to access the HTML Bootstrap Editor, contact the Learning Technology team at edtech@okanagan.bc.ca .

Print Article