Bootstrap Tutorial

well hello internet and welcome to my bootstrap video tutorial in this one tutorial I'm pretty much going to take all the documentation from the bootstrap website and cram it into one video underneath in the description I have links to all the individual parts you can learn exactly what you want to learn and bootstrap basically just makes it extremely easy to make responsive websites it just does everything for you for the most part and we're going to be covering containers Jumbotrons buttons grid systems for creating responsive websites how to hide and show elements based on screen size changes tables carousels icons image styling text styling drop-down menus input styling navigation menus tab interfaces pill interfaces navigation bars pagination and a lot more so I have a lot to do so let's get into it okay just like always all the code that I have here is available in the link in the description and I'm just going to jump in basically we have everything over here is just basic HTML I have a little bit of styling which I'll cover here in a second and the first thing we want to do is throw a meta tag inside of here and what this meta tag right here that i just put inside here is going to do is to tell Internet Explorer to use the latest rendering engine that's something you always want to include and then after that I'm going to throw in another meta tag this guy right here and basically what this is saying is to set the page width to the size of the device and set the zoom level to one as you can see right there now we need to go out and get bootstrap and it's quite easy what we're going to do is go to get bootstrap com getting started right here and I'm going to cover how to deal with downloading all the source code and using all of that but for now I'm going to use a CDN because it's going to make it very easy for us to get bootstrap and at the same time it is also going to potentially save us a lot of time if someone has gone to another web site that use bootstrap they'll have it already available on their system and to link this in here I'm just going to type in link like this and this is sublime text here and this is just a Chrome browser on the right side of the screen if you're wondering what that is so I'm going to go H reference and I'm going to paste that CDN directly inside of there and as you can see I'm using version 3.3.4 going to talk about version 4 a little bit and basically one of the major changes with version 4 which is in alpha right now which means it's not done is we're going to be changing from using a less compiler to a SAS compiler and I'll provide a link to my SAS tutorial in the description as well so you'll be ready for version 4 all right so now we have bootstrap here installed and now we're going to go down here and just start creating a ton of different things first thing we're going to need to do however is come in here and put both a link to jQuery which is this guy right down here as well as another link to the jst or JavaScript of stuff that we're going to use to make bootstrap work and there's all of that text like I said all the code is available in the description and make sure you put that at the very very bottom right when the body tag closes now the very first thing I'm going to create here is what we call a container and we just go class and follow that up with container and you're going to need to use this container div because it's going to first off provide padding around itself while you can use another one it's called container fluid you can use either one of these but container is going to put padding around everything in that it contains while container fluid is not it's just going to make everything butt up against the outside of the screen that's why containers use most of the time and one of the other reasons why we're going to use containers is because bootstrap grids require a container inside of them now inside of this I'm going to create another div and this is going to have the class of page header and page header is going to both add space around the text as well as in large any of the text inside of it and it's also going to provide or add an underline after the text is displayed so we're just going to throw a simple h1 tag inside here and just type in bootstrap tutorial and then close off the h1 tag and you can see exactly how this is going to work and you can see right there bootstrap tutorial it enlarged it and there's also a line right there we're going to also be able to use another class and this is called Jumbotron and there's a lot of things we're going to be able to use or do with Jumbotron I'm going to show you a whole ton of them here in a second basically Jumbotron is going to enlarge your fonts and it's going to put everything inside of a gray box by default with rounded corners of course you'll be able to change from that gray box to any other color you'd like to use and just so you know if Jumbotron is used outside of a container it's going to completely fill the total width of whatever screen it is splayed on and of course you're going to also be able to change Jumbotron as I did right here I change the background color for it as well as the text color for it right there in the styling section so it's quite easily to come in there and style it and like I said I'm going to show you some other different ways we can style it in here in a moment but start off I'm going to throw a paragraph inside of here and save that and reload this on screen and there you can see I changed the color for it and there is the text displayed inside of it now we're going to display a whole bunch of other things we're also going to display some buttons and there are many different built-in button colors and sizes and anytime you would like to have a link trigger page functionality it actually should be called a button as well however whenever you want to use buttons using bootstrap you should pretty much just call them button elements and keep it that way to avoid any type of confusion so now I'm going to create another paragraph inside of here still inside the Jumbotron then inside of here I'm going to put a link and let's just have this point at absolutely nothing and then I'm going to create another class inside of here and I'm going to put inside here the button class as well as button default and then button large and I'm going to cover all the other different things and what those classes specifically mean I'm going to give it the role of button and then I'm going to give it specific text file more info and then close off that link like I said you can use links to refer to them as buttons but it's better to use buttons I just like to cover everything however so let's come in here and let's create another button using the proper button tag and to do that we would just go type and let's just have this be a submit button class again we're going to call it button this time we're going to change the color of it and that's going to be called button danger that's all that's at and there's a different color close that off and just give it the name of button just to keep that simple you're also going to be able to come in here and use and type with the type being equal to button and a value being equal to whatever let's just have it be info as well as class and you can see here that nothing's going to change we're still going to put button inside of there and just to give it a different color I'm going to go button info and just so that we can see all the different colors of default buttons we can have I'm just going to create a whole bunch more buttons inside of here if we save and reload it you're going to see all those buttons on the screen there you can see exactly how they line up and like I said all the color changes are going to be changed based off of these guys right here button info and button danger and you can see how those line up you can also see here that I was able to get rid of the button part right here and that's the default button size that we would be using we can also use a button small as well as a button extra small as well as a button large and you can see right there there's a button large there's a button extra small and there is a button small so there's all kinds of built-in different ways of styling buttons inside of bootstrap you're also going to be able to create buttons and disable them and then re-enable them if you'd like to so let's just create another button inside of here type button and let's give it a class button which is the default button size and button and then we'll go and say that we want this to be a large button and we want to use the primary color for buttons and then if we want this to be disabled by default we would just go disabled is equal to disabled and that button will be disabled of course and which is call this primary you can see that pop up here and there is the button and you can see right there that it's disabled it can't be clicked on you're also going to be able to disable links so let's just throw in a simple link inside of here we can go class and let's make it button button default button large and the only difference is you're going to put disabled directly inside of there and we can have the role for this also be button link inside of there and you can see there we have a disabled link saying in this situation the little warning doesn't pop up but you still can't click on it another thing we're going to be able to do is come in and group our buttons so let's go and create an they're div inside of here and let's give this the class name equal to button group and let's have these B button group large you would also be able to come in and make this small as well as extra small so there's just tons of things you're going to be able to do but they're pretty easy to remember of course cheat sheets always nice and that's why I provide one this situation will make the role equal to group and then we'll just go and throw a whole bunch of buttons inside of here and there we go save them and you can see here let's say we wanted it to have sizes for our shirt or something they're small medium and large and if we reload it you can see how they line up however they are all individually connected and you're only going to be able to select one of those items at a time so it sort of works like radio buttons or checkboxes or something like that and those are button groups so now what I want to do is jump over and take a look closer look at the grid system then we'll come back and take a closer look at all of the different interface tools that we have available to us alright so now let's come in here and take a closer look at exactly how we're going to be able to create responsive websites very easily so I'm going to come in here throw a container inside of there and inside of it if you want to create a responsive site that is going to scale we're also going to have to create another div inside of this and this is going to have the class name of row and then we're going to be able to come in here and go and throw in a whole bunch of data now how we're going to be structuring everything is bootstrap uses what's called a twelve column system which means that we if we want to have all of our different elements line up properly on our screen we're going to have to section them off in two versions of twelve and let's just jump in and just do it I'm going to create another div inside of here and here is where the magic happens I'm going to create a class and we're basically going to be working with large screens which is going to be 1200 pixels or above medium sized screens which is going to be from 992 pixels to 1200 small screens which is going to be between 992 to 768 and extra small screens which would be like mobile devices which is going to be less than 768 pixels now to define all these I'm going to have four separate columns so what I need to do is divide up all of the twelve segments so that all this information fits on our screen and how you do that is just type in column because we're going to be styling columns and in a situation in which we are on a large screen which is going to be 1200 pixels or more I'm going to say that I want this to take up three of the total twelve columns on our screen on medium sized screens which is going to be 992 pixels I'm going to say that I want to use MD that's the medium size screen and I still want to take out three of the total space on smaller screens I'm going to say that I want to take up six of the available twelve spaces and on small or extra small screens I'm going to say that I want to take up all of the twelve spaces and that's exactly how that's all lined up so let's serve some text inside of here and there we go I'm going to throw a header inside of here as well as some just regular old straight text and then I'm going to do the same thing for four additional columns and then we can see how the site just automatically responds okay so I threw in a whole three additional columns for a total of four you can see column three and there's column four and of course column two and you can see also that I defined that they will tape up exactly the same amount of space at three three six twelve thirty three six twelve thirty three six twelve and there you go once again now if I save this on purpose made an error so that I can show you how to fix it let's reload it and there's the error you can see right there you can see right here whenever we are in a large format 1200 pixels it takes up all the space individually and put spaces between all the different columns as I shrink it down there is the medium range you can see that it went automatically scaled there it got messed up I'm going to fix that in a second and here whenever we get to smaller screens you can see that it automatically went and put each of the individual columns on separate lines so now how do we fix this problem right here see right there basically the reason we have the problem is because this has more text than this guy right here so it jumps up that it's very easy to fix it all you're going to need to do is to throw a div with a specific class right before where the column messes up so the column messes up on column three so we're going to find column three right here and what we're going to do is just go in and throw a div inside of here and then give this the class name equal to clear fix and we're going to say that this is only going to be visible whenever we are in the small section which is this guy see right here right there we're in the large and right here we're in medium and there is small so we only want this to occur whenever we're in the small part and that's the reason why that's there and that's literally all we need to do and if we reload it you can see everything lines up perfectly and if we scale you can see that everything scales perfectly so ridiculously easy to make responsive websites as you can see right there now I'm going to come in here and show you what how it works whenever we have different sized columns all of these were exactly the same so let's go and delete this and instead let's come in and let's create another div and this is going to have once again class however this is going to have column large equal to 2 column medium is going to be equal to 2 column small is going to be equal to 4 and column extra small is going to be equal to 12 and while I am inside here might as well show you how to very easily set it up so that we'll be able to collapse or hide data on our screen so we're going to come in here and have h4 which is going to show on our screen and then let's go and make this a link H reference and in this situation whenever this is going to be clicked on it is going to show or hide the column of content on our screen and to do that we have to go data toggle and the toggle that we will specifically be aiming at is collapse so it will either collapse or uncollapse so we want to show that or show whatever and we're going to call this column 1 and we'll close off that link tag and we'll close off the h4 tag as well now we're going to come in and create a div which is going to collapse or not collapse depending upon what we have here and it's going to have the same name as what we have right there so there we are paste that in there and then we're going to say that whenever it first loads on our screen it's going to be in collapse mode so there that is and if you want it to show by default you're going to say collapse in instead so it's not going to be collapsed when it first shows on the screen but then it's going to collapse thereafter and then we'll throw in some text inside of here and there that is and now let's create some more of these different containers so that we will be able to see exactly what looks like whenever these change so I'm just going to copy this guy right here paste that inside of their clothes off that div and for this guy I'm going to change this to take up four columns and this is going to take up four columns and this is going to take up eight columns and this is going to take up the total of twelve columns and I went in threw in two additional columns and you can see here that the only difference is this is in collapse in which means it's going to show by default and these is collapse and this is collapse so let's save that reload it see how it works you can see collapse in that's the reason why that's showing by default however if we come in and click on this it's going to collapse and now it's going to show and let's make all these show on screen you're going to be able to see exactly how they go and structure themselves so when they're in large mode you're going to see that they equally divide up all the space by four so they'll be able to show up right like this this first column is going to take up two of the twelve spaces this is going to take up four of the twelve spaces and this is going to take up the remaining six see how they all add up to twelve then when we're in medium mode it's going to take up two this is going to take up four this is going to take up six whenever we get into small mode this is going to take up a total space as you can see right there see it's taking up all the different space that's available while this is going to divide between eight and four and then here we have when we're in an extra-small mode we're going to take up all the spaces and they are all going to be on separate lines it's a pretty simple very easy way to hide all that content show all that content and so forth and so on another thing that's neat is very often I'm sure you've seen websites that will literally take elements off the screen based off of screen sizes so let's go and take a look at exactly how that works I mean here make sure that we always have a closing div for the row part there remember anytime you use grid you're going to have containers you're going to have row and now this time we don't even need the RO part here but I'm not going to delete it because I'm instead what I'm going to do is I'm going to use well here and I'm going to say that this guy is going to be hidden whenever it's in small mode hidden whenever it is in medium screen mode and hidden whenever it is in large mode we close off that div and then inside of here inside of paragraph tags I'm just going to go in and I'm going to say that the screen is less than 768 pixels so we'll be able to see this change on the screen and I'm going to create a whole bunch more of these one for each of the different screen sizes and then for this one I'm going to say that this is not going to be hidden when we're in small mode and this guy is not going to be hidden whenever we are in small or medium mode and then this guy is going to be hidden at all so we'll just let that be well and I threw in some information about the different screen sizes here just to make it a little bit more interesting and here you can see if I go and reload it how they change and as I go and shrink the size down how all the different elements are going to show based off of the screen size changes so that's how easy it is to go in here based off of screen sizes to automatically hide elements or show elements some pretty neat now for the final demonstration in this part anyway now I'm going to come in here and go container I'm going to show you some things you can do with tables as well as how you can sort of show different things or move things around on the screen so let's go class let's equal to row and then close that off and then we'll go and paste in all of our different table data and I'm going to show you two different ways to move things to the right of the screen so that you can have blank spaces on the side if you'd like to do something like that we could come in here first off and create a div and give this the class and let's say that we want this div that's going to be blank to take up half the screen when we're in medium mode so when you go six like that and then just throw nothing inside of there then in the second situation where we're going to have our table we're going to have class equal to and call them and it's going to be exactly the same it's going to take up six of the space whenever it's in medium mode and close that off and then inside of here we'll just throw in all of our table data and there that is let's go and save that and reload this and you could say that all that shows up on the screen however whenever we switch it to medium mode you can see that it jumps over to the right side of the screen now we don't need to come in here and go and throw in this dead sort of div inside of here we could get rid of that all together and get the exact same results where it shows on the right side of the screen by just coming in and go and call them medium offset 6 and you're going to get exactly the same results and all that means it's going to offset or leave blank 6 columns to the left side of the screen and display all that now I want to focus in on some things that I did here with the table now we can come in and label this as table bordered and what that's going to do is go and throw a border around the whole entire table pretty simple table striped is going to go in here and put these stripes inside of our table right like that of course we would be able to go into the CSS and change all that I'll show you that in a minute and table hover whenever that class is used anytime we would hover over any of the different parts of the table it's automatically going to change color another thing you can see right here is I'm saying with columns fan that best baseball players this guy up here is going to take up four of the total spaces or columns on our web page well here what we're saying is this blank space where we have our names we only want that to take up two of the total six columns that we have here allocated for this table the thing that I did right here is I went and put text Center inside of here it's text left by default and that's the reason why you see average and RBIs and home runs right here in the center of the table of course you could also put text right just to show you how that works and you can see it's on the right now looks ugly but just when to cover that and that is pretty much all the different things you can do with tables as well as how to offset and move different elements on the screen now I want to show you how you can download the source for bootstrap go in and change CSS styling inside of it lemon is specifically target jumbotron and how to style it and I'm also going to show you all the cool things you can do with carousel inside of bootstrap now to get the source for bootstrap again you're going to go to get bootstrap calm getting started and in this situation you're going to download the source code right here then whenever you download the source code you're going to go into the D is T file and you're going to copy all of these guys every single one of them and then you're going to paste them in as you can see right here CSS fonts and J s into whatever directory you're using for your website now we're going to come in here and specifically link directly to those downloaded versions now I've went and put them in directories that you saw right there and if I want to link to them I'm just going to come in and go link this is going to be stylesheet type text/css everything's fine right here the H reference however is going to be CSS bootstrap dot CSS because I want to change that CSS here I'm not using the men version of it I'm using the regular CSS file I'm also going to be using a Google font that's what this is if you're wondering what that is Google provides a whole bunch of web fonts that are free then down here you can see that I went and also installed jQuery just like I previously did however down here I'm linking to the jsr javascript directory that I have right here and I am using the min version in this situation so that's how we would be able to come in there and use our own versions of our downloaded source with bootstrap and go in and customize the styling for it alright so down inside of the body section I am just going to throw in some dummy text and images and so forth just so you can see what those look like on the screen again I'm going to be using Jumbotron so I'm going to have a class inside of here which is going to be the container because I want it to have padding around the outside and now we'll go in and throw Jumbotron inside of this class is equal to and Jumbotron and then I'm just gonna paste in some junk images and so forth there's a logo that I went and threw inside of here here is a website title and here's website slogan that I threw inside of there if we come up inside here this has nothing to do with bootstrap and you can see right here I have my font size and I have my default font family I have the logo which is hundred pixels by 100 pixels website title and all that this is how you link to the Google font that I have up here there's Pacifica stay right there Pacifica and we can go and save this and reload this guy over here I'm in bootstrap 3 right now you can see exactly how that shows up on the screen the only reason I did this however is to go in here and show you how you can change the color on Jumbotron and change the styling for everything for the most part and to do that you're going to open up the bootstrap CSS file this guy right here which is in your CSS directory and if you just open that guy up and you go and do a search or a fine for Jumbotron you're going to see right here well we'll be able to come in and change the background color so let's just change it to default background color and save it and reload it and you can see that it changed just slightly let's go and change it to something more defined let's go like this reload and you can see it changed to black and here we changed it to white and there we go so that's how easy it is to come in and there's a bazillion different things you can change style wise inside of here just want to show you exactly what that looks like in a real life situation now I'm going to show you carousel which is a ridiculously cool slider and to create it all we're going to have to do is come in and create a div and I'm going to give it the ID of the carousel doesn't matter what this name is right here we're going to be referring to it however and this is going to have a class and we're going to call this carousel and slide and then we're gonna go data ride equal to carousel close that off now here what we're going to do is define how many slides that we want to put inside of our carousel inside of an ordered list and this is going to have the class name of carousel indicators and then we're going to put list items inside of here let's close that off so list item data target is equal to the carousel and then we're going to define what slide this is so data slide 2 is going to be equal to 0 we're going to make this class equal to active which means it's going to be the active slider whenever the slider first shows up on the screen and then we're just going to close off our list item then we're going to do exactly for the most part the same thing for all of our other different list items so let's just go and throw that inside of here the only difference is it's you can only have one active or one first slide to show at a time so we're going to get rid of that we're going to change this into slide 1 and this is going to be slide 2 and nothing else needs to change there so there's our list of items we have three different slides then we want to define the text that's going to be placed over top of the images in our slider let's go and create another div class is equal to and we're going to call this carousel inner put another div inside of here do this is going to be class is equal to item active closed off that div throw in another div this is going to have the class name of slide one and then each of these different items can have a caption so we're going to go do class equal to carousel caption and inside of here will define all of the different text that we want to put inside of here so here what I'm going to do is throw an h1 tag inside of here a paragraph and also a button that's going to go inside of there and then I'm going to do the exact same thing for the other two slides so once again we're going to put item inside of here this is not the active one this isn't the first one showing so that's the reason why active isn't inside there there I have slide two instead of slide one carousel caption exactly the same and the only other difference between them is this guy is going to have a button and none of the other ones are going to have a button but you can put buttons inside them if you'd like to then after all of that closes off what we need to do is set the actions to take whenever the arrows are going to be clicked on let's scroll this up when you go a class is equal to we're going to target the left carousel button or carousel control whatever you want to call it and the H reference on this is going to be a reference to the carousel and then we go data slide previous so if they click on the Left button in our carousel it's going to take them to the previous slide and here we couldn't define I'm going to show you more about icons that are available inside a bootstrap but that's what this is you're going to see a ton about icons here in a second and these are called glycans and glyphicon chevron left is a left button close that off there's that span and now we're going to do pretty much exactly the same thing for the right arrow you're going to see here in a second what looks like this is going to be changed to right carousel control still targeting the carousel data slide however is going to be changed to next and the chevron is going to be changed to right of course and we just file save that and reload it and you can see right there is our little slider we can jump backwards and forwards that's what the different arrows were doing for us you can see here is the h1 tag with your own side there there's raph there's the button and as you can also see it automatically scales to the screen depending upon whatever real-estate is available to use it there's a whole bunch of different ways using carousels and all kinds of grid layouts and so forth now I'm going to jump over and show you a whole bunch of other different components that are built into bootstrap okay so I told you I was going to talk about icons and now let's talk about some icons I'm back over inside of bootstrap dot HTML if you're looking for where I am inside my code sorry I'm bouncing around a lot because I'm trying to cover a lot basically bootstrap comes with hundreds of different icons that you're going to be able to use you're going to be able to find those at get bootstrap comm components glyphicon straight like this let's just come in here and throw some icons on the screen geez so you can see exactly what they look like to get the icon show you just go class and then you're going to go glyphicon like this and then you're going to type in whatever the glyphicon x' name is you can see right here these are the glyphicon names so let's come over here and let's just grab one of them doesn't matter what it is I'm going to grab the film one that we have right here so I'm just going to copy that over here paste that inside of there well I can get rid of this one there we go we go like this and close off the span jump back over here reload it and there you can see the little film icon shows up there on the screen let's come in here and throw a little container around this and Jumbotron as well and you can see there is the film and you could also see that the color went automatically change for us there now you're also going to be able to use these icons with links or inside of buttons or whatever you would like to do with them so let's go and create another one here I'm going to create a link course doesn't go anywhere and here I'm going to have this be class button use the button primary for the color and let's make it a large button so we'll be able to see everything and here I'm going to say trash put a space at the end of it and if I want to put inside of that guy a button I'm then going to go span class is equal to and here I'm going to get the trash icon throw that inside of there and then close off our span and close off our link I'm going to go create another one let's create a regular role button type 'button here I'll have class button button default make this large as well and then inside of the button section I'm going to create a span and once again class and then I'm going to put a glyphicon inside of here let's see if I can get one do a little search for phones see if there's a phone icon and here I can see is a phone icon so let's go and copy this jump over here inside of the span paste that icon inside of there and another thing that is good to do is to come in here and go area hidden like this and set this to true and what this is going to do is just hi decorative icons like this that don't really have any meaning from screen readers so that it doesn't cause confusion then after the span closes out I'm going to put a space and let's say call me and I'm going to close off our button now let's go look and see what that looks like reload and there you can see there is using the link type of button and there's a trashcan and here we use the phone for our regular button so that's how we can use different icons inside of our buttons or on their own or with links or with whatever now I want to jump over here and talk about Wells and basically a Wells going to surround the text with a rounded border as well as a gray background by default of course you can change that and what's really neat about it is you'll be able to change the size of the well you from well small to well large and so forth and so on so I'm going to show you exactly what those look like so to create one you just go div class is equal to and you already saw Wells in a previous part of the tutorial just want to cover them again because they're very often used close off that div and throw that inside of there inside of a paragraph tag and then let's go and also throw another one outside of the well so you can see how they both look and reload it and you can see right there that's the difference between using a well and not using the well another thing where I'm able to do is round our images I'm doing all this inside of a container div as you can see right there so let's go and get ourselves an image and source is equal to and have entity logo dot ping like this ID is equal to I'm going to give it the ID of NTT logo class is going to be image responsive and anytime you mark an image as responsive it's going to have a max width equal to the screen and you're going to be able to add things like rounded corners with image rounded image circle to throw the image inside of a circle or thumbnail you're also going to be able to pull left and pull right to float your images and center block will place the image in the center of the screen so it provides a whole bunch of different tools so in this situation I'm going to go image and thumbnail like I said you'd be able to come in here instead and type in rounded for circle so try those out for homework and let's say that I want to have it be pull left or float left that's how we would do that and all I'm just going to have this be responsive image and reload it you can see it puts a little border around there for the thumbnail and it's also floating on the Left another thing we can do is add contextual colors like we did to the buttons above to regular old text and all you do is just create yourself a class and just give it names like text muted or text same exact sort of names as you saw before text primary text success text info text warning and text danger and if we reload you can see exactly how those different colors show up there on the screen it just provides you with the very easy way of keeping everything consistent throughout all the text on your webpage and in a similar way you could also cut it change the backgrounds and all you would do is just change this from text to BG for background you're going to use all of the exact same names just like you did before and reload and there you can see how the background has changes just like I said it just provides you with an easy way to draw attention to text using things like success and info and warning and danger so that you have consistency across the page bootstrap also has a whole bunch of built in menus that you're going to be able to use and we would just go and create these once again inside of the container area and I'm going to create inside of this a div here I'm going to create a drop-down menu so it's just like before and it's dropped down just like you would think that it may be and then inside of here I'm going to throw a button class and then we're going to put button I'm gonna button primary for the colouring however now we're going to say drop-down toggle and we could come in here and define button large button smaller button extra small which would just be excess or SM for small we're going to put our type inside of here being button let's go and give it an ID of drop-down menu one and data toggle you're going to go from being in drop-down position to not being a drop-down position as all that means then we can use Aria again I had mentioned it previously what Aria stands for is accessible rich Internet applications and they're basically used so that different elements on your site can be accessible for people that have disabilities so for screen readers and things like that so that certain information doesn't come up in a screen reader if it doesn't make sense like icons and things like that and other things would like basic text well one thing that we can do here is go Aria has pop up and make this equal to true and if you want to see what all of them look like just go to this website right here it's this great big giant thing w3.org TR like I said this link will be available in the description but you can see all of these different guys here there's tons of them it's just ways to make here's the main ones that we have here you can see there's has pop up and you can go and click on those and see what all of them do and what all of them mean make sure you spell this right though aria-haspopup true' and what aria-haspopup means is it's just stating that the element has a submenu to it and then aria-expanded is equal to true it just means it's going to be expanded and then at the end of this we can put something like favorite hero all this will make sense once you see it here on the screen we could then come in here and display a button if we'd like so class is equal to and here I'm just going to use the caret symbol and I'm going to close off that button area and now what I'm going to do is create an unordered list and this is going to have class which is going to be drop-down menu you can put things in this list unselectable headers if you want to put information so I'm going to do here is have like a list of superheroes and some of them are going to be in marble and some of them are going to be in DC so I'm going to have this be something that's a header but it's not going to allow you to select it because it wouldn't make sense and then here I'll say Marvel and then close that off and then I can actually put my list items inside of here and I can also of course have them be links have this be linked to nothing and then we can go to spider-man Captain America and Iron Man another thing we can put in this drop-down menu is a separator like I said it's just another list item nothing other than that and you just put separator and clasp is going to have the value of divider and then just close off that list item and then we could throw in another header for DC like I said it was going to do and then a couple other different heroes for Superman Batman and flash in the DC Universe and if you want to have one of your list items actually not show on the screen or have it be disabled just put class disabled on it if we file save that you're going to see exactly what this looks like there it is favorite hero we click on it it's going to show everything there's a header there's a divider and this is disabled so that's a really cool-looking drop-down menu and like I said it's very easy to change the styling on all of this so now let's take a look at input groups now the input groups are basically going to allow you to put your labels right next to where you would input your information which is really cool and you can put them on the left or the right side or the left and right side and to group inputs together we're going to come in here and go class and we'll go input group and we'll say input group large and again you could have small and extra small as well and now those are grouped together so the input and the and the label so we can actually come in and go span class is equal to and input group add on and your name it's just a neat way of doing this you'll see here in a second what looks like and then just do a regular old input so input text just like you always do class is equal to go form control place older is equal to full name close that off and you can see right there how the label goes directly inside of there it's like the two of them are connected so it's a nice little style element throw a break statement at the end and then do pretty much exactly the same thing so let's just copy this here we can change this small just to sue you can see the difference between large and small and in this situation we'll just put the input before the label that we have inside of there just so you can see how that looks and then inside of the span input group let's say we want it to be a button instead of just a regular old label so you'll be able to click catch a an event that would be clicked on whenever you clicked on that button and then what you could do is actually throw a button inside of it so we'll just go button and give this a class name of button and let's just use the default button in this situation and then enter and you can see it's a little bit smaller because that's how we defined it and now this is a button that we can actually have events triggered on this is just a label this is a button and you can put those on right to the left side of the screen just depending upon how you want to do it or a little right and the left side of the screen we could also come in here and create input button dropdowns and in this situation we're going to have a div once again and this is going to use the class of row course put this inside of quotes this is going to have another div inside of it which is going to have a class of input group I'm showing you it pretty much everything you can use here with bootstrap tons of neat tools and then put another div inside of this and this is going to be an input group button and then finally throw our button inside of it class is equal to button let's just throw a default button inside of there the type on this is button bounce back inside of the class let's put the drop down toggle so that it toggles from being on in to being off and then we're also going to go data toggle is equal to a drop down and then once again just like we did with our other drop-down will have aria-haspopup equal to true and aria-expanded meaning that it's not going to be to spin expanded whenever it opens up set that to false and we can throw something inside of here like user ID and then after that we could throw a span inside of here which is going to have a caret so span and give this the class of caret so it will show a caret symbol you would expect with a dropdown and then we could put in unordered list items and this is going to have class of drop-down menu because that's what it is and then we can have our list items inside of here as well and let's make these links go nowhere let me do something like Facebook Twitter and Google+ now after that closes off well first off take this span up here this is a carrot symbol right here so you don't want it down there you want it up here that's just going to put the carrot in there for the drop-down and then we come in here and put in an input box so let's say we're asking for like a user name on Facebook Twitter or Google+ and they're going to put that in then choose Facebook Twitter or Google+ you'll see here in a second when it looks like type this is just going to be a text input class is equal to form control and now you could see if I save that we can click on user ID Facebook and then they could type in whatever their user ID is on Facebook or whatever you'd want to do you also have some special tools we can use for radio boxes as well as checkboxes inside a bootstrap so we're going to put this inside of a div with the class of row once again and we're also going to come in and create a div class this is going to be an input group we could throw a span inside of here class is equal to and put input group add-on and then put input and this guy is going to be a checkbox if you'd want it to be a radio button instead just put radio button or just put radio instead of checkbox inside of there and then we can group this up with the just a basic old input box right like this and it just provides a way for us to group different interface elements together as you can see right there so they could put the check inside of there and then write some sort information inside of there and do whatever else you'd like another thing we can do is create a bunch of other different types of navigation elements again I'm going to do this inside of a div with class name of container and let's say we wanted to create a basic horizontal menu well we're just going to create an unordered list and give it the class name of list inline and then inside of this you're just going to put all of your list items so list item and then you can put links inside of here let's just have that go there and you can do something like home clothes off your list item let's make a couple of these could also come in and do an about we could also come in and add a drop-down menu so we could do a list item again and all we need to do is trim in and change the class name to drop down and put some different information inside of it so we could have a link here and a couple things we need to change however we can still leave that be H reference be nothing Oh everywhere we want to come in and have our class be drop-down toggle that's how we can turn the drop-down on and off and then of course we got to go data toggle just like we have a bunch of other different times and type in drop-down and then this guy right here could be contact or something like that we could go and throw a span inside of here again if we would want to put a carrot symbol inside of there and then just close off that span and then inside of this we could put a whole bunch of different list items so we need to put in an unordered list once again class is equal to and this is going to be a drop-down menu and then you'll put in your list items for that drop-down menu for your horizontal bar so let's tie them feel simple close that off and then you could throw in all of your different links inside of there so let's say we wanted them to be able to contact us by phone or email or have another option where they could set an appointment or schedule an appointment it's going to automatically scale everything so you don't have to worry about any of that and save that reload it and you can see right there exactly how that works out if we click on that contact that drop-down right there will show you all the different options you have available it's really easy to add those horizontal menus as well and then go in and style them just like before could also come in and create a basic vertical menu in kind of a similar way so let's just go create an unordered list and we just give it a class name here what I'm going to do is use pills for the vertical menu so I'm going to go nav navigation and I'll go now pills and nav stacked since its vertical and its side of it we just put all our list items again so Li and here we'll just say class is equal to and let's have this be the active pill or navigate element on the screen which means it's just going to be selected each reference and then we'll throw in home like we did previously close off our list item and let's do it just like we did with our previous menu that we had here we could throw this inside of here and throw a bout inside of there we're also going to be able to use dropdowns if we want so we'll go in and throw our next list item inside of here however this is going to be a drop-down so we're going to call this drop-down it's automatically going to work for us and inside of there we can just go throw a link inside of there give this a class name which is drop-down toggle again doing the same thing in the same sort of ways again data toggle to make it show up there and this is going to be dropped down that's not going to do anything and then after we have the end of this link that we have here we'll do contact just like we did with the other menu we can still throw in different span elements to create our carrot symbols for us for our drop-down to make it look a little bit better and then we'll go and get this link right here and throw that at the end and after we have that set up then all we have to do is throw our another unordered list inside of there to have all of our different options that are available so unordered list class and this is going to be drop-down menu and if we throw in our different list items a list item and then just like we did previously well let's close off that list item email and schedule and reload it and there you can say now you have different ways of selecting all these different guys and there you can see that we can also go and click on these also so pretty cool stuff so let's go and since we talked about pills why don't I go and talk about other different tabbed interfaces as well as pilled interfaces now what this is going to allow us to do is to create like tabs on our screen that's going to change information in a div based off of different buttons that are clicked so I want to have across horizontally across stop the screen I'm going to have a list of different options and I'm going to use navigation just like previously and nav pills which are going to be like the little rounded off edged things you can also put tabs inside of there just to change that from pills to tabs close that off and then we'll put in our different options we have so we have class is equal to let's go and make this the active tab on our screen whenever it first loads up and the difference here is since we're going to be changing data inside of a div down below we're going to reference that div being the one that we want to show on the screen and by default it's going to show up there so we'll just have Superman whenever this is clicked on it's going to show Superman's information on the screen and we can close that off and let's go and have a couple different superheroes inside of here so we could also have Batman but this isn't going to be active though you can only have one of them active so get rid of that and this one's going to be changed to Batman and change this to Batman for this guy right here we're going to change the class for this let's go and show you another drop-down so let's just say it's a drop-down because that's exactly what it is then whenever we do that for the link inside of it we're going to change this class to drop-down toggle and what do we do every single time we have drop-down toggle when we go dad a toggle is equal to drop-down we're not going to have this link to anything whenever they click on that there's actually going to be two different types of flash so whenever they click on flash it's going to show a couple different things right after the flash however I'd also like to come in here and throw a span class inside of it so that I can show a carrot on the screen so that they know that it's a drop-down just by looking at it there's that span and then that'll be the end of that link but it's not the end of the drop-down yet because we want to put different options inside of it so an unordered list class and this is going to be a drop-down menu and then we could put our different items inside of here let's close off that unordered list so that we know where that is and that will just list all of our different items inside of here if we'd like to have one of those items disabled once again you just type in class disabled and automatically disables it that works on tons of components inside of this list item we can go ate reference and this one's going to point at the information on flash and we're just going to call him the flash and then we're going to do another one that's going to be kid flash so let's just go like this and as soon as this link ends right here throw another one inside of there come down here where it says Batman and it said change this to Kid Flash change this to Kid Flash change this link here to data toggle is equal to tab all the rest so that's fine so now what we need to do after we have created this on ordered list of things we can click on across the top of the screen we then want to list all of the information we want to show whenever those different tabs are clicked on and to do that we create another div and give it the class name of tab content and then we'll just separate all of them so we'll go div this is going to have the ID of Superman which is what we'll be referencing whenever the on the tabs like these guys up here say Superman right there Superman that's what we're referencing right there class is going to be equal to this is going to be a tab pane which is what we're using and we could say that it's going to fade off the screen and we'll say that it's going to be active that's by default it's going to be the active thing on the screen whenever it loads close off that div and then put information in here that you want to show and I just threw in paragraph tags for all of our different superheroes and if I reload it you can see Superman is active by default if I click on Batman Batman's information shows up if I click on flash the flash and Kid Flash drop down show up this is disabled like I disabled it in Kid Flash shows up Kid Flash information so there's tabbed interface as well as pilled interfaces now let's take a look at collapsible navigation bars which are ridiculously cool now I just went ahead and copied and pasted this in here because this is the way you always will do navigation bars I'm going to walk you through what every single thing means however this is a copy and paste thing this isn't something you memorized by any stretch of the imagination and as you can see over here it's a very functional little navigation bar throws it inside there as an icon has different options we can select has dropdowns that we can also click on and as you can see I went and copied and pasted it in the navigation bar I'm going to explain every single line here but as you can see it is very useful we're going to be able to shrink this down automatically scales and also it's going to create this little menu here depending upon smaller screen sizes directly for you so it's extremely useful it's also going to allow us to add in both buttons and dropdowns as well as a search bar as well as a submit button so basically I'm going to go through all the different options we have here so this is container which means it's going to completely fill the container part that we have right here navbar and navbar default or the ways that you define that you're going to actually use a navbar then you're going to put in a div with the class name of navbar header another option you can have here is instead of navbar default you could come in input navbar fixed - top and that's going to always keep it on the screen or navbar fix bottom which is always going to keep it at the bottom of the screen bottom there we go and so go and play around with that for homework to see how that looks but I'm just going to keep it nav bar default which means it's going to scale so as the screen is scrolled it's going to disappear and come back and so forth and so on this button right here is going to be the button that toggles the nav bar on and off whenever you're on smaller screens so that button is actually this button here with all the dashes inside of it and it uses data toggle collapse and just like you saw previously with the other different what guys that we were playing around with and there's the re-expanded false and so forth and so on this span right here is only there to hide information from screen readers this guy right here is actually the bars that are drawn inside of this button right here so these three bars that you see right there that's what these three bars are so yes indeed you do need them or you could throw something else inside of that span some other icon or something if you'd prefer right here is where we have our logo and you're going to have to play around with the logo that you have pull left of course is going to just works exactly the same way as float left it's going to put it on the left side of your bar and whenever you're working with the image you're going to place inside of there your logo you're going to have to add padding in your image on the top and the right until it fits in there just right and that's something you're going to have to do in some sort of graphics program like Photoshop something like that and then down inside if this div we're going to collect the nav links forms and other content that's going to be toggled on and off on the screen whatever the screen is too small to display all that information and then down inside of here you can see that I have all of my links so there is my home there is the about there's dropdowns we're going to create dropdowns in exactly the same way that we've gone over many other different times here you can see there's the drop down part with the email and set appointments and all those other different things you can see right here is where we're going to have our search form you can see that we grouped those items together there is the input box that we have right there and then here is our submit button and then this is closing off all the other different dips so that's how we would create a navbar that's going to automatically resize and shrink and show up different menus depending upon the screen size so really neat pagination is also going to be very easy to implement again we're going to throw this inside of our container area and then we're just going to create a nav element inside of here inside of that will then put it in an on word list and our class here is going to be pagination close that off close off our unordered list and we're going to list all of our different elements that we want to show up inside of here so list item of course and then we're going to put in our different links and it's done a little bit different we'll go H reference we're going to have this go into nowhere because it doesn't really matter or a label and this is going to be previous for screen readers like we've talked about previously and then we can throw in another icon area let's hide this icon from screen readers so it doesn't cause confusion and that's what that does I'm going to go laq UO which is going to draw that little arrow and then we're going to close off our spam and then close off this list item and then we're going to put all of the other different pages that we want to show up in our list so just create a whole bunch of list items with a whole bunch of links inside of them so if you want to show five pages well let's just go in here and put one close that off and then of course you just have to come in and change these to all the different page items and of course the links would have to go to some page somewhere and at the very end you're going to create pretty much exactly the same thing as you create it here for the previous and this is going to be changed to next so let's just change this the next this is going to be right or aqu o instead of la qul and everything else should be all set up and reload it and you can see the pagination automatically works for us we'll be able to in there so another nice little component now let's take a look at thumbnails here what I'm going to do inside of container and then inside of the div for row is create four columns of it's going to have an image a header it's going to have a description and it's going to have the option for the user to click on it to add to card or something like that so it's just a basic sort of shopping cart type of thing so since we're going to be working with columns that means we're going to have to come in and mess around with the different classes on how this information is going to be divided off so we're going to say that whenever it's in large mode we want each of these to take up three spaces and medium is going to be three and let's just have them all be exactly the same it's three so under all situations they're going to take up or divide up the three different columns between the four different elements that I'm going to display on the screen and inside of each one of these guys I'm going to throw a thumbnail as well as a caption so I'm going to go div class is equal to some nail throw an image inside of it and I already went and created one of these so go thumb one and this is ping file let's just go and have the alt be just nothing and then inside of this where you want to put your text you're going to get a div class is equal to and caption and then inside of there you can put in your header file as well as paragraph and then a button if we look at it you can see there's hamburger with a little image inside of it and then we're just going to throw three more of those inside of there and we did exactly the same thing if we reload it you're going to see all four of them show up inside of there if I went this changed the meatball sub we can mess around with that but you can see that they all line up pretty nice there it scales a little bit better and they're automatically going to get a little bit funky right there in that situation these should have been moved down so that they were stacked on top of each other for smaller screens but either way you get the idea and I'll show you how to set up for a progress bar and it's basically just going to provide for an easy way for you to provide feedback to users by changing a value for a progress bar and to create one again inside of a container we're just going to say div and class and progress and then inside of that div we're going to create on another div and it's going to have the class of progress bar and you can either have it be a basic flat colored progress bar or have it be a striped progress bar I like destroy the striped version a little bit better so I'm going to keep it that way and the role in this situation is progress bar and then Aria value now this is going to be something you would change so let's say we want it to be 60 just put 60 inside of there and that's what it's going to demonstrate on our progress bar and then inside of here we can say the minimum value on our progress bar is going to be zero and the maximum value on our progress bar is going to be 100 and the let's go and style this then to have a width of 60% and you can see it would be very easy to change the progress bar value on the screen and then we could do we could also come in and throw a span at the end of it that would say class so only I say something like 60% complete something else we could change with JavaScript and save that reload it and you can see right there is the progress bar and you can see that it's striped the way that it I happened right there now let's go and take a look at media objects now a media object is basically going to allow us to structure information on the screen sort of like in a blog format and we could also set it up to make it look like a commenting system where one person is commenting to another person's response again we're going to put this inside the container and then we're going to create another div and it's going to be class of media and whenever we're talking about media we're going to be talking about an image that we're going to be showing on the screen and we're going to decide on the placement of that by surrounding a an image with a div that's going to have a class and we're going to say that we want the image to be on the left and that we want it to be on the top so the upper left-hand corner of the display of information on our screen and then inside of this we could throw in let's just make it a link and this is--that's is going to allow them to click on a thumbnail and display some type of information if they'd like there's going to be an image inside of it and I'm just going to say one thing I'm going to use the same images that I used previously except here I'm going to say class is equal to media object and then we'll just throw alt in here of nothing again then outside of the div that's going to surround our thumbnail I'm going to throw another div inside of this however this one's going to have media body and this is going to be the text that's going to accompany that image and inside of here we can throw in a header tag as well as a whole bunch of paragraphs of information if we reload it you can see exactly how that shows up on the screen it's automatically going to scale and do all those different things that we'd like and then of course right after that we could throw in exactly the same type of thing again media there's a different thumb there's different media body there's more information and you can see how they line up like a blog formatted type of thing and you could also have these be nested and so forth I'm actually not going to cover that I'll just let that be in the code that's in a link in the description you can go take a look at how to do that it's very simple that would just allow you to indent all this information and then to round off everything I'm going to cover some information on lists and how we can mess around with them let's create a list group right here so unordered list class is equal to list group close off the unordered list of course then we're going to throw in some list items class is equal to we'll go list group item because that's what it is if you want to have one of the items in your list disabled you just put disabled inside of there let's just go put something like Verizon email throw in another list item give this the same class name class is equal to list group item just like we had previously and then for this one we could also add badges to these guys so for this list item what I'm basically in a try to mock up here is like an email type of system so we could say span class is equal to you can use badges which is another bootstrap little interface tool say we're going to have 123 emails from our gmail account you do like this and it close off that list item which is this guy right here we could also come in and throw in another list item let's go in here like this class is equal to and this is a list item group and group item could also go list group item warning this would represent our junk folder close off that list item and then after those list items we have there and our unordered list we could also add a list of links so let's just throw that in and this is going to have the class equal to list item group just like the other one or list group item we call that add account we could also add any HTML elements we'd like to our list so there's that and guess what the class is going to be again this group item but just to show that we can put some more random things inside air let's go and throw in each for tag inside of here class equal to and we'll put this as list group item heading and let's say we want to give them the option to click on this guy to delete their account those off the h4 tag and then we could also throw a paragraph tag underneath of it that's going to provide some information on what happens if this is clicked on so this group item and this is going to be listed as text and we could say something like a warning like the account will be permanently deleted so I'm just showing you all the different things you can put inside of a list you could also put buttons in your list you put anything in your list I'm just showing you how to set up all of them so there you go there's a button and for those you're going to go class equal to list group item just like before and you could do check for mail and then close off that button and that's basically it so let's go and save that reload it and you can see right there I pretty much knocked off the type of interface you would see with an email client so you could Harris Verizon email doesn't have anything or it's disabled and it is disabled there's Gmail that's how we set up our badge this is our junk folder add account that's a button we can click on to add a new account delete account that's the way we can delete it and check for me on another button so there you go guys that's pretty much all little that you could ever want to know about bootstrap and please leave your questions and comments below otherwise till next time

Channel: Derek Banas

Views: 1,394,261

Rating: 4.9143538 out of 5

Keywords: Bootstrap Tutorial, Bootstrap (Software), Twitter Bootstrap, Learn Bootstrap, Web Design (Interest)

Id: gqOEoUR5RHg

Length: 64min 38sec (3878 seconds)

Published: Sun Nov 08 2015