How to turn things on & off on your website using Bootstrap 4

Hey there, in this video we are going to show you how to turn boxes on and off using Bootstrap4. You've got four feature boxes down the bottom here. We're going to make it smaller, it's still four. The tablet is only three because that's what fits best. When we get down to mobile the fourth one's back again. So we're going to show you how to turn the display on and off for different boxes using Bootstrap. 

So we want to disable one of these feature boxes on the Tablet view, on our MD, because at the moment you can see it here, on MD. I've got this kind of fourth guy that needs to disappear. It's super simple, the documentation is, 'getbootstrap.com', 'Documentation', 'Utilities', and it's under 'Display'. And scrolling down you end up with this one called Hiding Elements. That's it, it's simple, and then brain bending at the same time. 

So what they've done, happily, is that they've given you like all these use cases. So just ask yourself what do you want to do, read through them, pick which one, apply these. So basically D is short for display, we've done that in previous courses. Remember, we display:none, and display:block. So we're going to be switching between these two. And if I don't write Media Query extension, like small, I just write d:none, it's going to assume all of them are none. 

So it starts, so d:none is basically the mobile phone version, and because it flows, mobile first, it will flow through the Small, Medium, Large, and XL. So that's if you turn them all off. You can see here, hidden only on the Extra Small. So it's turned off for all of them including Extra Small, but then the very next Media Code you turn them back on by saying, on the small one, Block, and because it's MD and larger afterwards, they all become Block, and all are visible. It does get a little confusing, let's just do it for our example in VS code. 

So it's this fourth one, I'm going to add numbers to them. Let's make it a little easier. Two, three, four, and we just add another Class to this to say, on-- what are we going to do? D for display. We're going to do on which one? We're going to do it for Medium. We're going to do 'none'. Save it, let's have a little look. In my example here, he's gone, so at Small he's there, or Extra Small is there, then it's Small, which is this Media Query here, it's there, but then at Medium, it's gone, but at Large he's also gone because it flows downstream, and because it starts at mobile first, you get the idea, we're going to turn it back on after Medium, because we've turned it off at Medium, let's turn it back on at Large. So let's say at, the display at LG is back to Block, and hopefully, boom. So it's on down here, turns off at Medium, and then back on at Large, and then again at Extra Large, he's still there because of that nice flow. 

One last thing I want to mention just while we're here is that, some of the links I've had, or some of the searches you do on Google, you might end up at getbootstrap.com, and the docs, and it actually has the version number in here. So this is the very first version of when it went to 4.0. Took forever to get there, but went from 3 to 4. We're actually up to-- if you go to Home-- well when I made this video, we're at, where are we? 4.3.1, you're probably going to be at a lot higher, probably you're still at 4. It's 2019, if you're watching within the next couple of years, I have no idea, really, but you'll check this, and I bet it's still at 4, but this will change. 

So the document, when they change it, they actually have to update the documentation. So you might end up at an old bit of documentation like that one. That link that I found, sent me to 4. If I go, instead of using a Google search to find it, I go to Bootstrap, and I go to documentation, I go the long way, instead of using Google to find it, and I go into 'Utilities', 'Display', and then further down here, it is-- where is it? Hiding Elements. It looks exactly the same but you can see we're at 4.3, because one of those changes from maybe 4.2 to 3 might be-- we're going to change this display thing because it's not working, and it might, this next might be completely different, or you might be working on an older site. 

Say you're working on somebody else's site, and they've built their site on an old version of Bootstrap, you can see here, our version of Bootstrap is, we're referencing the CSS from their website, called 4.3.1. If I'm dealing with just 0, some of the new things that have updated since then might not work, or have problems. So basically the rule is, it's, I guess it's just something to be aware of, it's not going to catch you out, probably, because what you do is, when you are building the site, you're going to build it on whatever version, and you've written it up here explicitly. 

What happens is, it goes to Bootstrap looking for that version, and uses your website based on all the rules that applied when that was made. So this might be 10 years from now , as long as Bootstrap's website is still going, they'll have the 4.3.1 up there, that will reference to use this website so it will keep working. Even though they might be up to version 20 by then, does that make sense? All I want to do is just make sure, go through the long way, just to make sure, click on 'Documentation', figure out where it is, or at least just keep an eye up here, to see what version you're actually interacting with. 

All right, that's enough for this video. Let's jump into the next one.