Earlier in this course, we talked about setting breakpoints in your code for responsive design. Bootstrap has default breakpoints that it's hardcoded for the different viewports. The intention for bootstrap, again, is to always use the mobile first paradigm. It's always going to bring up every page as if it's thinking, the only way people are going to look at this is on my phone. If it's bigger then I'll make changes. So you want to make sure you plan for the smallest screen and then make adjustments as the screen size potentially is larger. So first let’s talk about the smallest screen size that Bootstrap deals with. It's kind of a custom iPhone retina screen. It basically deals with any screen that's from 0 to 320 pixels. This is a kind of problematic screen size, and I want to mention it right away because what I found is that students and myself will use a small break-point, but then it doesn't actually work on our browser. The reason for this is that some browsers, even if they are only say 150 pixels wide at that point, won't return a number smaller than something in the 300s. So this break-point right here may never trigger for you. So it's something to think about when you first start coding. It's also not very common right now, so let's go on to the extra small devices and phones. In Bootstrap, these extra small sizes are referred to with an xs. Any device that has a minimum width of 480 pixels is going to be picked up by that xs. Most phones fall into this category even when you're in the landscape position. So you're saying when you're looking at the phone, you assume up this phone is at least 480 pixels wide. The next step up for small devices and tablets is referred to as sm for small. This is any device that has a minimum width of 768 pixels. Now typically, you would think of that instead as being between 420 and 768. Because the extra small has those smaller screen sizes. But for generality, you'll just say small is up to 768. Most tablets fall into this category, but you also need to remember that from many desktop browsers, people open up smaller window sizes, so it also trigger this viewpoint as well. For medium devices and desktops, we use this code md for media. This is any device that has a minimum width of 992 pixels. Again, Bootstrap hardcodes these. And what I mean by hardcodes, is it says it picks a number and this is what we're going to stick with. Now 992 is beyond this size of most tablets or phones. But there's something I want you to realize. It's possible, that if someone's on a smaller device, that they magnify their screen. It could end up triggering, this viewport. So, somebody's on a small screen, but, they might be using the style sheet, of a larger screen. And we're going to talk about how we can deal with this a little bit later. Finally, the last viewport is referred to as lg, and this is for large devices and wide screens. Anything that is at least 1,200 pixels is going to be picked up by the large break point. Now I know that often the trend is towards smaller and smaller and smaller when it comes to technology. But often this is reversed and you can see people going for larger and larger. Particularly when you think of TV screen sizes. So it's important to remember, you want to code for everybody. The extra small, the large and everything in between. And again, even when you code and style for these large screens you need to remember that sometimes people on smaller screens will trigger these larger views. This happens to me quite often, because when I'm lecturing in class, I tend to magnify my screen so many people can see it. So, these are the kinds of little things that might cause you problems, because you don't understand why they're being triggered. I'm hoping you can avoid them by knowing what's going on there. Now it is possible to change these default values for your breakpoints. Even though Bootstrap hardcodes them, you can go in and change them. You can either customize these values before you download the Bootstrap code. You can go in and you can modify the Bootstrap's css files or don't forget, you can always write your own media queries to add new trigger points. Now, when we talk about Bootstrap grid points, it's not important that you go back and you memorize these exact values of the breakpoints that it's not important at all. What is important is that you need to remember that xs stands for extra small, sm is for small, md is for medium, and lg is for large screen sizes. Because we are going to be using those four abbreviations quite a bit as we start to code in Bootstrap. And also never forget that you can always modify these different break points to your needs. What you can't change are those four abbreviations. So as we go forward make sure you've mastered these fours things and you'll be able to really code and understand the things that are coming up.
