Styles and layout - insert columns in a resource/module

Show / hide advanced 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 widen 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 icon bootstrap 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 one 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 advanced buttons icon Show advanced buttons icon

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

  3. 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