Ok, now let's talk about the real magic of using Flexbox which allows us to implement a responsive design in our webpages. We can tell the rendering engine to display the page in different arrangements based on the screen size. The coder (you) is responsible for defining how you want things to look for 4 different screen sizes.
| Identifier | Screen Size |
|---|---|
| xs | Extra Small |
| sm | Small |
| md | Medium |
| lg | Large |
Flexbox grid divides the screen width into 12 equal parts. Your code will tell the rendering engine how many of those 12 parts you want to use for each column. You can define a different value (number 1-12) for each of the screen size identifiers listed above. Let's look at an example here:
<div class="grid-row">
<div class="col-xs-12 col-md-6">
<p style="text-align: center;">Row 1 - Column 1</p>
</div>
<div class="col-xs-12 col-md-6">
<p style="text-align: center;">Row 1 - Column 2</p>
</div>
</div>
The example above is very similar to our previous example. In this example, I'm defining a row with two columns. Notice that I'm defining the column classes differently this time.
<div class="col-xs-12 col-md-6">
This chunk of code is telling the rendering engine what to do on an extra small screen or a medium screen. On an extra small screen, the column will take up 12 out of 12 parts of the screen. On a medium screen the column will take up 6 out of 12 parts of the screen.
Now, since an extra small screen will have each column take up 12 out of 12 parts, the columns have to stack on top of each other. Column 1 will be on top and column 2 will be pushed down to take up another 12 out of 12 parts of the screen width.
However, if the screen is at least medium-sized each column will take up 6 out of 12 parts of the screen width. That means each column will be side-by-side. So here's a screenshot showing what this code will do on the two different screen sizes:
Greetings Martha,
Using flexbox is really easy if you just want to put stuff in columns and you don't care if the content of each row (as a whole) is responsive. The following code will create a row with 3 columns of equal width. Each column has a centered paragraph of text and the columns will not stack as the screen gets smaller.
<div class="grid-row">
<div class="col-xs">
<p style="text-align: center;">Row 1 - Column 1</p>
</div>
<div class="col-xs">
<p style="text-align: center;">Row 1 - Column 2</p>
</div>
<div class="col-xs">
<p style="text-align: center;">Row 1 - Column 3</p>
</div>
</div>
So let's color-code the code above and show the result:
The columns get closer together as the screen size gets smaller and the text will begin to wrap to the next line in each column so that each column can squeeze onto the page.
I'll put together another post at a later time that explains how to get things to stack as screen size gets smaller.
Ok, now let's talk about the real magic of using Flexbox which allows us to implement a responsive design in our webpages. We can tell the rendering engine to display the page in different arrangements based on the screen size. The coder (you) is responsible for defining how you want things to look for 4 different screen sizes.
| Identifier | Screen Size |
|---|---|
| xs | Extra Small |
| sm | Small |
| md | Medium |
| lg | Large |
Flexbox grid divides the screen width into 12 equal parts. Your code will tell the rendering engine how many of those 12 parts you want to use for each column. You can define a different value (number 1-12) for each of the screen size identifiers listed above. Let's look at an example here:
<div class="grid-row">
<div class="col-xs-12 col-md-6">
<p style="text-align: center;">Row 1 - Column 1</p>
</div>
<div class="col-xs-12 col-md-6">
<p style="text-align: center;">Row 1 - Column 2</p>
</div>
</div>
The example above is very similar to our previous example. In this example, I'm defining a row with two columns. Notice that I'm defining the column classes differently this time.
<div class="col-xs-12 col-md-6">
This chunk of code is telling the rendering engine what to do on an extra small screen or a medium screen. On an extra small screen, the column will take up 12 out of 12 parts of the screen. On a medium screen the column will take up 6 out of 12 parts of the screen.
Now, since an extra small screen will have each column take up 12 out of 12 parts, the columns have to stack on top of each other. Column 1 will be on top and column 2 will be pushed down to take up another 12 out of 12 parts of the screen width.
However, if the screen is at least medium-sized each column will take up 6 out of 12 parts of the screen width. That means each column will be side-by-side. So here's a screenshot showing what this code will do on the two different screen sizes:
carroll-ccsd and @MattHanes ,
I am struggling to use a flexbox grid to set an image and text in columns. Many of my students use Canvas on both their smartphones and a laptop computer. I want the page to look clean on both platforms. This is what I want to achieve on the laptop end:
I'm about to just make it on a pdf, save that as a jpg, and put it on the page that way. Suggestions?
Many thanks!
--Teeka
Hi @james10 ,
Placing text in an image is easy... but isn't friendly to some users. :smileygrin:
I think the simplest way would be to try the following...
The native grid system in Canvas is currently based off this, https://getbootstrap.com/docs/3.3/examples/grid/
Which states:
Mixed: mobile and desktop
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
It looks like you are trying to get a little off center position between the two columns... so I scrolled down the page and found the first example under Mixed: mobile, tablet, and desktop. For this post, I'll be consistently using the example on the page directly below that page heading.
I prefer Chrome for the next few steps, but they are similar in any browser.
If you right click that area of the screen and choose Inspect (Element), you'll see the following.
Now, within the inspector, if you find the <div class="row"> that highlights the one we want on the left, Right Click that and choose Copy > Copy Element. This will get you the HTML you can use within Canvas. I think you want the reverse, with a wider (text) column on the right, so I've switched that here.
<div class="row"> <!-- switch this class to grid-row -->
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
</div>You can then test your page in the Canvas Apps for mobile and tablet. It should look the same on laptop and desktop browsers.
You can also play with the responsiveness directly in your browser, on this Bootstrap Grid System page. Within Canvas in the browser it gets tricky, because the viewport is larger than the sub/nested Canvas content area.
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.