Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS

hey there we're going to be using bootstrap CSS today to make a responsive layout if you don't know what a responsive layout is you're about to find out um and if you're brand new to HTML CSS this is video number four and I'll put a link to video number one over here where you can check those out and get a little familiar with HTML CSS first uh but let's move right into it uh what you're going to need to do to start with bootstrap is you're going to need to go to get bootstrap.css it's been kind of having some server lag today so I've had to refresh a lot of times bootstrap is getting all popular on us okay um you'll scroll down and you'll see bootstrap CDN if you just want to use the files from CDN which is a great way to do it copy these two links and then add them right here into your header there you go so now they're both in there now bootstrap CSS is on my page I'm also going to take the script and I'm going add it at the very bottom of my body tag um and what that's going to do is you always want to put scripts at the bottom uh otherwise your page is going to wait for all the scripts to load before it shows your user the page and you want that to be as fast as possible we are keeping the stylesheets up top because as soon as the page shows up we want it to have style we don't want it to show up ugly and then catch style later on so that's why style goes up top so as things appear they have the correct style and then the function goes down here because we can show them a page and not have all the function uh move yet it'll load up a split second later but it feels a lot faster kind of the explanation on why we're putting it there so now that bootstrap CSS is on here let me show you I actually loaded the Styles bootstrap CSS it is going to create tons and tons of CSS rules that help you do a lot of great stuff for you and I'm not going to get into all of what's going on there today uh but what I'm just going to show you kind of how we start using it so let's start by doing a three column layout what we're going to do is div with a class of row and then I'm going to go div column small six kind of what we got here so you see it doesn't look like too much let me I did make a couple helper classes here in my main CSS dark BG darker BG darkest BG so I'll give you dark BG okay it made something that spans halfway across the screen uh what bootstrap gives you is a 12 colum responsive layout which means it goes 12 columns across and since I made it be uh six columns across then no matter what size my window gets here I'm always going to see six columns across until I get lower than small which is as soon as I get extra small and then it's going to fill the whole screen this is called a responsive layout which means it acts according to the size of the user's browser and device let's go ahead and add another one you'll see more what we're talking about let's make this one darker BG so now we have two columns here and you'll see that these are going to do good and as soon as my screen size gets small boom like an iPhone or something they bump down to the next size let's go ah and add another column let's go darkest BG um um and now it's going to start looping around because we have more than 12 columns we have 666 uh column of the Beast so I'm going to give each of these a four the reason they went with 12 is you can do groups of three if you divide it by four uh if you can do groups of four if you all give them a width of three you have a lot of options a lot of divisibility with a number 12 so that's why they went with that so now I have a three column layout and they each have the full background on it there we go what you can also do is you have widths of small extra small medium large extra large and those are all based off your screen widths so say I want this one to always when we BN when we merge down say I want these two to still be half width so what I can do here is start adding some extra small rules so small let's make you6 u3 uu and three and when we we go extra small I want you to be full which is 12 and then extra small you're going to be six and you're going to be six these helper classes they build for you are awesome so now we have six 3 three and when you bounce down now this guy goes all the way across and these guys both span it's really good you notice there's some problems going on here it's because I did not wrap this in a container tag forgot to do that that kind of gives you a little bit of a kind of sets your deal to your layout container there we go that fixes that always want it to be in a container tag what a container does is it kind of gives you your your centered look and feel so then I bounce down to responsive layout and that's excellent that's kind of how you do column layouts now let's do a Navar easiest way to do this is go to components on bootstrap you're going to be going to get bootstrap.css because you're just going to be doing a lot of copy paste I'm going to go to navbar and there's an example of a Navar I'm just going to copy the whole dang thing there's no way you're going to remember all this anytime quickly so you just go with it I'm going to create let me see what does it start with it starts with a nav tag so I'm going to create a header tag here and I'm going to paste that big mess in there and I don't know why my Sublime always pastes messy so there we go navbar navbar default these are all styling classes um what I'm actually going to do is I'm going to make the header now we'll see what happens here there we go there's my nav bar it looks beautiful I'm going to wrap all this in a container tag again make sure keep the indentations clean don't want nasty HTML people and so now my container is actually going to have the navbar class keeping it full width uh you know I actually don't like my decision to do that let's keep it sometimes with bootstrap you have a lot of trial and error because you do have not memorized what all these things do no I'm taking it back I am going to do it change plan again like I just said little trial and error these are the things you put together once a site so it's usually like four months in between implementation that's a class container oh that's my problem I don't want that to have I want the container to be inside ha there we go container to be here you're going to have class navbar which is kind of what makes it do that full width page thing the class of navbar gives it that full width thing and now I have bad HTML okay so for those those of you guys who just got confused by what I did we have our header with class A Navar and then inside we have a container which gives us that centered look and then it goes navbar default class which we can actually take out and there we go what I'm actually going to do is give this container class Navar inverse there we go actually I don't want it there one on the header there we go got it so your navbar SL deault gives you that grayish I don't know if you can see but it's a little bit gray I like navbar inverse because it gives me a black look and then I put the container which is going to keep all my stuff kind of in this centered look here so my container is inside of my navbar class and then I have my navigation inside and I'll give this a roll band ENT just since that's technically correct HTML markup there we go now I got all my stuff now I'm going to delete some things I don't want I don't care about this link dropped down here just going to get rid of you and I'm not using search so you're gone it's a lot easier to copy and delete later there we go now I've kind of got my header and now I've got my three column layout and now I can add links and you'll see this drop down is not working so we'll have to work on that and there's kind of how we pull in a lot of our bootstrap stuff and you'll as you as you go you'll find out there's a lot of times the bootstrap documentation might not give you the most clear example on what to do things might not work exactly as you hop the first time around um you just got to keep moving let me show you some more bootstrap stuff that you can do you can go components see it keeps keep having to refresh bootstrap it is not doing so good today bootstrap will give you button groups like that with that code it'll give you button toolbars you can do all sorts of great stuff under the CSS tab you get your more basic stuff like buttons there we go you can see it's either a button um or an a tag with the class of BTN let's add some buttons here he class button button I don't have a hre there so it's not doing it there we go you got to make sure you give it a color so this is button defaults you can go button primary which is kind of like hey this is primary out of all of them you can go secondary actually I don't think secondary is anything you can go danger which is a you can go warn warning you can go success which is green and so that's kind of how you get your buttons uh they have a panel which is a very useful thing let me go back to components reload again panels panels are super awesome let me go here copy the panel so instead of giving this row you'll notice I mean this is pretty ugly I've just used the column or the classes to depict what's going on with the grid I'm going to remove these dark BG darker BG darkest BG because clearly those don't look very pretty and we're going to copy and paste in our panel these are a lot more often the kind of components you would use for a um an actual web page widget one there we go that's looking much nicer I'm going to copy and paste that into my next one and you see they automatically resize to what you've chosen which is excellent and then they automatically Bounce Down When You Minify to a smaller one another great thing about this is look what happened to my menu is it automatically shr drunk down which is great my menu automatically gives me a menu button and so let's go ahead and add some buttons in here now do something there we go and they even do the Nifty little looks another thing you can do on panel is you see panel default up here we can change these to panel primary we can change them to panel success all the same things apply to these panel danger you can also do the same thing to text um this class is panel body I can go text danger there you go now it has red text and I can make this text success I can also instead of that I can wrap something in a span and give it a class of text success and has the exact same effect so I can go black text and then success text that's kind of your basic introduction to bootstrap there's way too much to it to cover in one video so I'm going to leave it there uh just enough to to give you a dive in um I copy and paste pasted a few components I've been doing some responsive layout you can see obviously I clearly have some stuff to add in here some adjustments to make things aren't working flawlessly there's still some things to be figured out and desired uh but that's pretty much your intro to using bootstrap to create a great responsive layout