Bootstrap grid in Canvas

In Canvas, you can leverage the bootstrap grid system to layout your content, whether you are organizing images, buttons, divs, text, etc. Bootstrap is a layout that allows you to organize your content using the concept of columns and will adjust depending on the screen size. You might determine that your content looks best on a large monitor when the items are in three columns, whereas on small screens perhaps you want them in two columns or to stack on top of each other.

The bootstrap grid system divides the screen into 12 columns. Most of the time you will not have 12 columns of content that you want to display to your students, but you can group the columns together, creating fewer clusters of wider columns.

When defining the columns in Canvas, you will add a class to your HTML editor and specify the screen dimensions and the amount of columns the element should span, anywhere from 1 to 12 (with 12 being 100% the width of the screen). If I used the following code in Canvas:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">content</div>

Then I would be specifying that on a large screen I want the content to take up 3 units (out of the 12, or 25% of the width of the screen), on a medium screen I would want the content to be 4 units across (out of 12, or 33% of the width), on a small screen it would be 6, and on the smallest of screens it would be 12. The classes are defined as such:

xs – phones ( < 768 pixels)

sm – tablets ( > 768 pixels)

md – small laptops ( > 992 pixels)

lg – laptops and monitors ( > 1200 pixels)

You do not need to define each class. If you would like xs, sm, and md, to be 12 and lg to be 6 then you would only write it for xs and lg:

<div class="col-lg-6 col-xs-12">content</div>

Since you specified xs as 12, it scales up until you specify otherwise. If I wanted xs and sm to be 12 and md and lg to be 6 then I would write that:

<div class="col-md-6 col-xs-12">content</div>

Perhaps I want to have content in a 2x2 layout, but on tablet and phone screens I want them to stack one on top of each other (1x4). I would write the code for that as such:

</div>

This would give you the layout you want. On laptops and monitors, Items 1 and 2 would each fill 6 units wide on a single row, Items 3 and 4 would follow below (add margins if you want a little space between them: style=”margin-bottom: 10px;”). On the mobile devices, each item spans 12 units, which is the entire width. So the will stack one on top of each other. Take a look at how this code would render on a monitor, a tablet, and a phone (colored for convenience):

</div>

I have seen many Canvas pages where the content is organized using tables, but in order to ensure that tables are accessible to screen readers and so that the content is responsive to different screen sizes, it is always best to avoid using table to layout content. Tables should only be used for presenting data or categorizing information.

The bootstrap grid will take some getting used to, but it can be a great tool for instructional designers and course developers. Head over to my Canvas page to grab my code and start exploring your own layouts.

https://canvas.instructure.com/courses/2560052/pages/grid-layout

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Hand-drawn text illustrations for Canvas

Embed content in Canvas