Styles and layout - insert columns in a resource/module

Show more buttons iconThis entry relates to styles and layout, in particular the HTML editor.

For content layout (eg text/images), you may want to divide a resource/module into two or more columns, or narrow and wide columns. It is good web practice to use the <div> tag to do this, rather than formatting using tables (an accessibility issue). The bootstrap grid iconbootstrap grid iconprovides a range of layouts and enables easy applicability.

The HTML editor is used almost everywhere you can enter text. Most activities incorporate an HTML editor, commonly found in the field where you enter the Description, Content or Text of an activity or resource. The functions of the HTML editor are particularly useful when adding content to pages, books, forum posts, wikis and labels.


Steps

The grid option means that you have 2 distinct columns, so (for example) if you include an image in 1 column and text in the other, if there is space under either column it will not wrap text.

  1. In your FLO resource/module, in the HTML editor toolbar click on the Show more buttons iconShow more buttons icon

  2. From the toolbar menu, select the Bootstrap Grid icon bootstrap grid icon

  3. From the pull-down Bootstrap grid icon menu, choose the layout you want (2 column, 3 column etc)
  4. grid options

  5. Populate the columns with text (example below)

    grid example

  6. Click Save changes

» How-to glossary