[00:00] In this lesson we'll take a look at the Breakpoint container. A Breakpoint container has two separate configurations, a small configuration and a large configuration, which are also called its children. Depending on how wide the session is, the Breakpoint will try to use either the large or the small child. Let's get started by creating a new View. I'll name this view Breakpoint. I'll change the layout to the Breakpoint container and let's make sure we check the page URL here. So we have an easy way to launch this and view it from the session. I'll create the View. Before we begin, let's talk about what we're going to do. I have this Breakpoint container but I also have a couple of other Views here. I have a large View, which has several gauges, I also have a small View, which has one gauge, and a couple of moving analog indicators. I'm going to configure the Breakpoint container so it shows the small View while narrow and the large View while it's wide. So let's go back to our Breakpoint view and I'll select the root container here, and you may have noticed in the upper right hand corner of the Property Editor here we have some additional properties. We can see that our breakpoint is determined up here but on the root container it's also listed as a props property allowing you to bind this if you want. You can also switch between the children by clicking on them up above. Switching between the children allows you to choose which child you're editing in the designer. Now in addition to typing in a new breakpoint here I can also grab the slider at the top here to adjust where my breakpoint is. Now I want to show off two Views. You can only add a single component to each child in the Breakpoint container but you can place containers or Embedded Views. In my case because I'm trying to show off some Views let's use an Embedded View. I'll head over to the Component Palette and under the Embedding category there's our Embedded View and I'll drag the component into the Breakpoint container. Now if I minimize the component pallet we can take a look, we see that I have my Embedded View selected. So these properties over here are for the Embedded View. I'll go ahead and change the path to my large View. So you can see that I'm showing my large View inside of my small child. Now I actually have this backwards, I want to show off the large View, under the large child. But really I just wanted to show you that you can switch back and forth by clicking on the children. Now similar to other containers that can only contain a single component if we try to View this in the session now, or put the design in Preview mode, we will see a little warning here telling us that we don't have a child inside of this container. So let's make some small changes here. I'm going to go back to Design mode and I still have my Embedded View selected. We can take a look at the position properties for the container and we notice there's only a size property. This allows me to switch which child my component is positioned in. So I need to move this Embedded View to the large child. So I'll hit the little drop down here, select large, and now we can see that my Embedded View is positioned under the large child. I'm going to switch back to the small child, grab another Embedded View, come back down to the Component Palette, go to the Embedding category and we'll grab an Embedded View and drop that off into our container. Now you've probably noticed already I can select each individual component independently of whichever child I have selected here. So you'll definitely want to pay attention to whatever is currently selected in the Project Browser. So let's go ahead and select our newly created Embedded View and let's set the path here to the small View and hit okay. Now that we're set let's save our project, let's head back to the cog icon so that we can take a look at the page configuration. I'll right click on my page and select Launch URL. And when the project loads here you can see that we're showing the large breakpoint. If I reduce the size of my browser it switches to the smaller View. So now I have a way to just resize my browser and get a completely different View. So if you're trying to build a project with responsive design in mind the Breakpoint container is an ideal container to get familiar with.