Styling & Layout in Instructure Canvas

Your first stop for any questions re: styling components and layout should be Canvas’s Style Guide



Give your tables a Bootstrap feel with, striped rows, hover highlight, etc (see CANVA101 course for full description)

Header row, striped rows and, in second picture, showing hover effect on Week 1
<table class="ic-Table ic-Table--hover-row ic-Table--striped" style="border-collapse: collapse; width: 100%;">
            <th style="text-align: center;">Week</th>
            <th style="text-align: center;">Tasks</th>
            <td style="text-align: center;">1</td>
            <td>Week 1 tasks</td>
            <td style="text-align: center;">2</td>
            <td>Week 2 tasks</td>
Icons for links

Canvas icons can be shown on the left of any link (see Pauleds guide for full list of icons)

Add a huge range of Canvas icons to links
<a class="icon-twitter" href="">Follow me on twitter</a>


While Canvas appears to provide parts of Bootstrap 3, JQuery UI and Flexbox Grid, not everything is available within an individual page.


When setting out grids, instead of:

<div class="row">

, use,

<div class="grid-row">

Further details on Canvas’s implementation of Flexbox Grid

Responsive, centred YouTube embed

Sadly, Canvas doesn’t seem to have included the Bootstrap styles for this, so I use the CSS upload to add the standard Bootsrtap responsive embed styles.


<div class="grid-row center-xs">
    <div class="col-xs-12 col-md-9 col-lg-6">
        <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src=";showinfo=0" width="300" height="150"></iframe></div>

(Note that the width and height attributes are inserted automatically by Canvas but are ignored)


.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
.embed-responsive-4by3 {
  padding-bottom: 75%;