Bootstrap Beginner Crash Course

hey guys welcome to another crash course today we're going to be looking at Twitter bootstrap which is a front-end framework now before my longtime subscribers start complaining asking why the hell is he doing the tutorial on bootstrap let me just say that I'm starting to add videos to my channel for beginners I just did one on building an html5 website and a lot of you seem to like that I do have bootstrap stuff on my channel but those videos are a little more advanced as they work with sass and less which are CSS pre compilers and they're also on building themes what this is is just an all-around look at the CSS components and some of the other features of bootstrap alright so it's geared towards beginners but of course your advanced programmers are welcome to freshen up your UI skills I have one more bootstrap video after this which will be creating a complete CMS admin UI and then after that we'll be moving along to more advanced subjects and we'll go from there all right so what is Twitter bootstrap bootstrap is a front-end framework meaning that it's used on the client not the server and it's specifically used for user interfaces and themes so design what the user sees in a website or application it includes bits of code and HTML CSS and also JavaScript now unfortunately in this video we probably won't get to the JavaScript part we'll see though I will see what happens bootstrap is used for building responsive mobile first web applications and websites and what mobile first means is it refers to designing for smaller screens first and then working up to the larger screens all right so it's great for mobile apps and mobile websites it's also the most popular framework of its type by far foundation is pretty popular as well but nowhere as near as popular as bootstrap is so why use bootstrap or any framework at all why not just build the HTML and CSS outright in many cases that may be a good idea but let's look at what bootstrap can offer you so increase development speed this is the number one reason to use a framework work not just a front-end framework but any kind of framework PHP JavaScript with bootstrap all your helper classes for alignment and style and positioning they're all done for you you may need to do some tweaking but for the most part all you need to really worry about is adding those classes to your HTML ok responsiveness is another huge advantage instead of using custom media queries and creating a responsive site from scratch you can simply use the grid system and you'll have a mobile-friendly website or application consistency is another one so with class names style markup keeps your website and your theme very consistent it's completely customizable of course you can add your own classes and your own design to any bootstrap theme and it allows you to create really custom interfaces also support like most frameworks it has documentation and relative to other documentation it's pretty good and also has a huge community like I said it's the most popular framework out there so there's a lot of people using it you can ask pretty much any developer for help and they should be able to help you alright so what we'll cover in this course or this miniseries whatever you want to call it we'll talk about what bootstrap is that's pretty much what we're doing now we're going to get it set up and installed and I'm going to talk a little bit about the different ways we can implement it so we'll look at the HTML and CSS components like I said I don't know if we're going to get to the the JavaScript part the modal's and things like that but we will be looking at some of the JavaScript in the admin theme video that I'm going to create we'll also look at the grid system which is probably the the best part of bootstrap allows you to create layouts without having to use floats or any of that alright we'll also create what we're going to be working on is a bootstrap cheat sheet so it's not going to be a theme you know an organized theme we're just going to look at some of the classes and syntax and put together a single index.html file that you can refer to to figure out what you need to do to create a lot Hertz or progress bars Jumbotron navbars things like that all right now of course you could always go and look at the documentation but we're going to go through it step by step and you'll have something to refer to on a single page now as far as what bootstrap gives you four components and helpers and things like that this is just some of them okay navbar drop downs Jumbotron which is like a showcase area alerts progress bars I'm not going to go through the whole list but these are some of the things that you can implement very very easily you also have JavaScript widgets and helpers so things like transitions modal's which are not nice-looking pop-ups drop downs tabs sliders things like that so as far as setting up the bootstrap there's a few different ways to do it and there's more than what I have listed here the the way that we're going to do it is just download the files now you get all the source files including sass and less and all that stuff but what we're going to do is just take the distributed CSS and JavaScript the compiled code and just include it in our template okay really easy if you don't want to download the source files you can use a CDN or content delivery network which basically you can just put a script tag or and a link to the CSS right in your template that's hosted somewhere else not in your website or application the downside to that is that you can't really work with it offline because you need to be able to access that resource you can also use Bower which is a package manager Bauer's a client-side package manager it installs things on the client side like bootstrap jQuery we're not going to get into that I do have I do use Bower in many other videos NPM is another package manager but that's on the back end side that has to do with nodejs using JavaScript on the server and you can include it kind of like you you would with Bower all right but we're not going to get into that in this video this video is for beginners and then the last thing I want to mention is that when you use the bootstrap JavaScript file you also need to include jQuery okay it uses jQuery for all those those widgets all right so that's really important all right so that's it for the slides let's get into it and start to look at some code alright guys so we're going to get started here and what I've done is just created a folder on my desktop called bootstrap cheat sheet and we have an index.html file in there and I just have the text hello all right so that's what we're seeing on the browser here now of course you can just load your HTML file through your file system or through your operating system just open it up but I'm using the server it's actually an add-on for atom that gives us a local server it's supposed to have live reload but it's not working you'll see if I go ahead and save that this doesn't reload automatically I really wanted it to but I need to actually hurry up and get this done so I don't have time to troubleshoot it so I'm just going to have to manually reload it alright old school so what we're going to do is go to get bootstrap comm that's the official web site for bootstrap and you'll see up here bootstrap 4 is coming this has been here for ages bootstrap 4 we have open this up is actually still in alpha alpha 5 and I have no idea when the hell it's gonna it's going to be stable I debated on doing bootstrap 4 for this video but I wanted to do you know what is stable and available at this time so there will be a bootstrap 4 video coming just not right now alright so let's take a look at the website I'm just going to make this a little bigger so if we click on getting started this actually gives us a link to download ok we can get the the compiled CSS and JavaScript which is what we're going to use you can get the entire source code you can use sass and less which are CSS pre compilers gives us the CD ends we can use gives us the commands for Bower an NPM things like that composer let's see if we could go down here this gives us basically the structure of the bootstrap source code how to install with grunt which is a task runner that's more we're not going to get into that and if I click over here on basic template you'll see that this is how you know something to start with gives us the meta tags that we need all of that a lot of stuff that we don't need as well but what we're going to do is grab this okay I'm going to just paste that in there alright and let's make this bigger I like to do it side by side but unfortunately it doesn't show enough I need to make this a little bigger okay and let's just take a look here so we have our doctype we have our HTML tag with a Lang a language attribute for English obviously if you're using a different language you want to change it in the head we have our UTF our character set we have this http-equiv which we're setting to X stash you a compatible and this just has to do with providing an HTTP header for the value of the content attribute this is for the viewport for the size of the screen basically and we're setting it to the device width okay whatever the width of the device set it to initial scale of 1 all right let's get rid of this comment and for our title let's change it to bootstrap cheat sheet okay now we haven't downloaded the files yet but we're going to point to CSS we're going to create a folder called CSS and then we're going to use the minified bootstrap file okay now if you don't know what minified means it's basically you take the the the CSS file and you get rid of all the white space all the comments you make it as as small as possible okay and give a really small file size by taking that stuff out you can also use bootstrap dot CSS which is not the minified which has all the comments and all that stuff alright but usually you don't need that now I'm going to get rid of all this we do not need that okay and then we have our body we have an h1 hello world and right here it's loading jQuery using the Google CDN ok we're using this Ajax Google API now you could download jQuery and just you know included in your in your files if you want but we're just going to keep this alright and then we're just pointing to a J s folder with bootstrap again the minified javascript alright so let's go ahead and save that and if we were to reload we're not going to see any style changes or anything because bootstrap isn't being loaded in fact if I open up my console it's going to tell us that it's not finding these files so let's go ahead and download bootstrap we're going to go to actually we're going to go right here and we're going to go to this download bootstrap link okay notice that it has the dist okay this is distributed so it's it's basically the compiled CSS and JavaScript and also the fonts so let's open that up okay we'll open that zip file up and go into here and you can see we have a CSS folder fonts and J s okay now we're going to bring that over to our bootstrap cheat sheet folder okay and we're going to just clean this up a little bit if we go into CSS we have all these different files like I said we have the unmanned the minified we also have this theme file which is for a custom bootstrap theme but we don't want that either all we want is this file right here bootstrap mint dot CSS so I'm going to just go ahead and delete everything else and fonts folder we do want that if you want to use any of the icons that are the glyphicon x' you need to have this so we're going to save that in the jas folder we're going to get rid of bootstrap j/s which is the unmanned then we also don't need this npm j/s okay so all we want is bootstrap Minjae s now if we go and we reload you can see that oh I guess it did a live reload did work maybe it just takes a while you'll notice that the font has changed the the padding here has changed alright so we know that bootstrap is being included also we're not getting any errors in the console all right so let's go back to the documentation and if we continue on the get started and we go to examples you'll see that there's actually a bunch of pre-made templates that you can use the starter template with the navbar this one has the Jumbotron and some button examples the grid system if we go down here you have one that implements the carousel which is a JavaScript widget so there's some basic starting points you can use and I've actually used these quite a bit but we're not going to get into that we want to just start from scratch start fresh and just go just do some custom coding all right so now what I'm going to do I'm not going to go through any of this because we need to keep this kind of short if we go to the CSS link up here in the navbar and we look over here you can see we have the grid system okay so this gives us all the different classes for the grids and we're going to go through all this I'm just showing you what's available the documentation the typography this is actually what we're going to start with just basic heading classes things like that paragraph classes let's see tables okay see the different tables you can style them striped and bordered forms okay so forms look pretty nice in line forms buttons different colors and sizes let's see images you can format your images to be rounded or bordered or whatever helper classes for alignment things like that let's see so that's the CSS link if we go to the components link gives us even more stuff because there's all the icons and the classes see dropdowns button groups okay you can group buttons together the navbar which of course is important let's see breadcrumbs labels pagination I'm not going to go through it all right here we're going to actually look at that in our file we're going to type it out but you can see that everything is available from the documentation even JavaScript if we look at that gives us the code for instance for the modal okay this is a little demo here we click that opens up a modal and get all the code for that okay so it's pretty good documentation alright so now what we're going to do is go into our file and we're going to start with typography and some of the helper classes alright so let's go ahead and go into the body and we'll just keep this heading here okay let's open that up in the browser I'm going to close the console now usually you want to push your your content to the middle and not have it up against the side here and normally you'd use CSS you'd put a margin Auto you'd put some maybe margin on the top overflow:hidden things like that with bootstrap we have a class called container that we can just add and it'll take care of that stuff for us all right so I'm using Adam for my editor by the way so if we go ahead and save that now you'll see that it just gets pushed over in the middle here okay and it's set to be responsive you can see that changes as you make the browser bigger and smaller so container is a really important class alright so now what I want to do is look at headings and paragraphs and things we can do to style Bo's all right let's see you know what I'm going to make this smaller so we can see both alright so for the heading there's a class called page header so if we say class page header and save that you'll see that it gives it some extra padding and it gives it a border okay makes it look pretty nice okay nice and clean you want to use that for you know your page titles things like that alright we can also put some smaller text in here we go small okay which is just an HTML tag this isn't special to bootstrap or anything and if we were to say just say secondary text save that and probably want to put a space right there okay so that just gives us a little subtext which looks kind of nice alright so now let's put in some paragraphs ok now using atom or sublime text we can use the Laura you can type in lorem and then tab and it will give you this sample content all right let me just space this out okay it gives you quite a bit here it gives us a good sized paragraph and I'm going to wrap this in paragraph tags okay and we just make that a little bigger alright so if we save that now you can see we have a paragraph and this looks pretty nice just by default looks pretty clean as far as the line height things like that the font alright now if we want to let's actually take a little piece of this and copy it and we'll put a shorter paragraph above it alright and then we're going to give this a class this top paragraph or class of lead save that and you'll see that now it's a little bigger okay so if you want to have a paragraph that kind of sticks out you can use the lead class alright now we also have inline text elements so for instance if you want to highlight some text let's say we want this we'll put in a tag called mark like that save it and you can see that that text is now highlighted if we want to cross out some text we can do that we can do that with the del tag okay so now you can see that this text is now crossed out let's see what else we can do we can obviously do underlines some of this stuff isn't you know unique to bootstrap but it does format it nice and neatly bold obviously you can do strong and all that so nice text formatting let's see next thing I want to look at is alignment okay so what I'm going to do is go under we're going to stay within this container div and I'm just going to put a line here horizontal rule just to separate it and let me just comment this stuff too just so you guys can have it so this will be two caps will say alignment okay and up here let's put a comment blog Rafi all right yeah so for alignment we have different classes we can use what I'm going to do is paste in just some very short paragraphs okay so save that and obviously these aren't aligned yet because we haven't add in any classes but let's say we want to align to the left we can use a class called text left okay so if I save that oh well it is to the left okay so if we want to align to the center say text Center save okay so that moves it to the center you can say text right moves it to the right we can do justify so text justify save that okay so we're not going to see any difference here but it is going to justify it and then we can also make it so that it doesn't rap by saying text - no rap okay so that will prevent any rapping now we also have some transformation classes I should probably add that here as well okay so let's say we want all the text to be lowercase so if we we can just go ahead and add in text - lowercase and now notice that it's all lowercase we can do text uppercase okay save that now that's all uppercase we can also do capitalize which I believe will capitalize the via the first letter of every word okay so just some some nice helper classes now we also have classes for floats so let's put a comment here we'll say quick floats okay now let's say we have a div let's say div floated whoops - floated - right okay so if we save that you'll see it's just normal but if I go when I add a class of pull-pull right save it you'll see that it's now floated to the right okay and of course we have float left so that's a div floated to the left okay which isn't going to look any different now I'm going to put an HR right here and notice that the HR is now directly through the text which obviously we don't want so when you float something and if you know CSS you probably know this you have to clear it all right in order for things to go back to normal so with bootstrap we have a special class for that called clear fix okay and just put a comment here okay so save that and now you'll see that HR is moved back where it should be alright so that is alignment okay next thing we're going to look at is block quotes okay so if you have a quote from someone that you want to style and make look nice what we can do let's put a comment okay so we're going to use the block quote HTML tag and let's give it a class of block quote okay and in here let's put I'm just going to paste this in just a small paragraph okay so if we save that you'll see it's formatted pretty nicely it has this bar on the side here we can also add in a footer to our block quote so I'm just I'm going to do a little bit of copying and pasting just to speed things up a little bit so we have this wrapped in a footer tag and we have the name wrapped in a site tag with the title alright so if we save that you'll see that that's formatted nicely now if we want to reverse this and put this on this side we can just use the class block quote - reverse and now you'll notice that it's reversed text is aligned different we have the bar on that side alright so that's a block quote okay next thing we're going to look at is lists okay now bootstrap has a component called a list group we're not going to look at that just yet this is just regular lists so let's first look at what are just a standard list looks like with no classes so we'll save that okay so by default lists the list items have a bullet and they also have the UL has some padding I believe it's ten pixels padding pushes it over to the right now if we want to take away that styling all we have to do is give it a class of list unstyled save that and now you'll see the bullets are gone the padding is gone we can also create inline lists so let's just copy that and let's give this a class of list - inline save it and now we have an inline list okay which is good for menus things like that alright now if we want to include actual code maybe you have a web design or development blog and you want to include some code you can do that although there are better solutions out there such as markdown but you can do it and it's formatted nicely and a lot of this stuff is HTML by default but you'll just see how bootstrap styles it nicely alright so let's say we want an h1 to do our slashes and not have it parts will do the ampersand LT and let's put in h1 and then we're going to do ampersand GT semicolon and let's say heading text then we'll do the same thing grab that okay and we'll just put a slash before the h1 so if we save that and now you'll see we have our h1 and the heading text all right now if you want to do keyboard commands you can do that as well I'm just going to paste this in so I just put a line break and we have the text change directory with CD and then I wrap that in this KBD this keyboard tag and then down here we have ctrl + what is a ctrl + and then we have a comma so let's save that see what that looks like ok as you can see that's formatted pretty nicely if you want to tell somebody which keys they have to press or something like that alright so now we're going to do is put in another HR here and we're going to take a look at contextual classes now bootstrap has a set of contextual classes to use for SEP 4 different colors and styles for instance primary gives you a blue color success gives you a green color info I believe is light blue and you can use these on different things you can use it on paragraphs you can use it on alerts panel headings all types of stuff all right so let's just take a look at contextual colors just spell that right - contextual colors and let's just go ahead and paste some short paragraphs alright so they're all paragraphs with hello world this first one we're going to give a class of text - primary ok let's take a look at that notice that the first one here is below you know what I'm going to do is we're going to just put a div down at the bottom here and give it a style of height let's set the height to 400 pixels or can I just say height 400 pixels and save that there we go so that way it's not at the bottom of the page you guys can see so that gave us a blue color okay we also have success so text - success and save that now you can see very faintly when it's a green color okay we also have info we have warning okay just remember these keywords because they're all associated with a color and then we have danger save that and now you'll see that for info we get a light-blue warning as a yellow it's hard to see with just the little text and then danger is read and then this bottom on here we can actually use text - muted save that and that makes it basically just light okay light gray all right now we can do the same thing with backgrounds so what I'm going to do is copy all of this paste that and let's say contextual background colors and all we want to do is change text to BG so we have BG primary PG success BG info PG oops PG warning BG danger and I don't think BG muted is one button we can try it so let's save that and now you can see that they each have the background now you probably want to add some padding because everything is you know flush up against the text so you may want to add some padding but you can see you can do the same thing with backgrounds all right so that takes care of typography and a lot of the different helper classes for text now we're going to look at and for this I'm going to open up a new container so we're going to go outside of that one let's just separate things a little bit okay and let's put an H R in between here as well alright so now we're going to look at buttons okay so buttons you can format a link as a button a button tag and input with the type of submit which you would use in a form so let's take a look at some of those so first we just have a standard button and let's give it a class of BTN and then BTN - default which is kind of a style of the button okay and then in the text let's just say button actually we'll say default all right so let's see what that looks like okay so that's what a default button looks like it's just white and you hover over it and you get a gray background now we can do the same thing with a link same kind of formatting so let's say a and this would go somewhere and then we could add the same class that we did here okay whoops I don't want to do that that's an a tag and then you probably want to put in a role attribute of button okay and let's just say default actually you don't we'll do let's make this text say button this one will say link just so we know what it is okay we can also do an input tag okay so this would typically be for a form so B type submit okay we can give it the same class and this would have a value as well so this would be a submit save that and now you can see that each one is formatted the same way even though it's a button a link and an input okay so now let's look at the different contextual styles of the buttons just like we have with the text so we'll go right here and say contextual buttons okay I spelt that wrong okay I'm just going to grab this right here this button this is the default change that to default I'm going to copy that and we're going to put some other ones in here as well okay so after default let's do primary so instead of BTN default will do BTN primary my spelling is her osius so I'd word her osius okay so after primary will do success okay and then we'll do info obviously different situations you're going to want to use different colors and context we have warning so an example would be the success is a green green one so you probably want that let's say if you post a blog post and you just want a message saying blog post created that would be an example of a success and then this would basically be with alerts not buttons for instance with a button with danger which is red you'd use that for a delete if you're going to delete something something that can have consequences okay so let's take a look at these and there's our contextual buttons okay you can also format a button as a link if you don't want the background and all that so if we were to say BTN - link and say link save that now you can see the button is just like a link there's no border or anything now we also have different sizes for the buttons so it's a button sizes okay and I'm just going to copy this default button and what we're going to do is add in a class here of BTN - LG for large so if we look at that notice that the button is much bigger than the rest of them the next one down would be just your default button so just copy that again save that so that's just the default let's actually put a line break right here as well okay we'll make that a little more readable we'll put a line break here - okay so we have the large we have the regular and then we have small copy that change that to BTN SM and then we also have extra small so XS save it and you can see the different sizes and of course you can use different context with it as well for instance if we want the small one to be blue we can do button primary and now we have a small blue one all right we also can add a disabled attribute so let's say this little one here we want that to be disabled we can say disabled equals disabled and now if I hover over it you'll see the little X I can't do anything with it it's disabled alright so that's the basics of buttons now we're going to move along to forms and for that I'm going to create a new container actually put this comment above the container like that okay that ends there and then we put another comment for forms okay let's go ahead and put in a form tag okay so what we need to wrap a container okay so in the form let's do a field now you want to wrap your fields in a class called form control okay wrap them in form control and then let's put a label so we'll say name and then we'll put our input give it a type of text and let's see we'll add a placeholder say add name alright so let's see what that looks like oh I'm sorry this form control should be form group there we go and let's put a char right here now I don't like how this I mean this just looks like there's no styling at all so what we want to do is in the input we want to give that a class of form control save it and now that looks much better it goes all the way across it has some padding some height width so that looks good now let's do an email so what I would do is copy the form group paste that in and change that to email probably want to change the type to email we're using html5 and we'll say an email save it now we have another field okay we can also do text areas let's copy this form group and we'll say message okay instead of an input let's do a text area with the class of form control you can still use a placeholder okay but this needs an ending tag as well text area alright save that now we have a message alright a select list let's just paste this in save some time I'm going to go under this form group okay I'm going to have another form group and then a label with gender have a select class form control put our options male female and I want it to be politically correct so I put other okay let's take a look at that that looks pretty good also file upload fields will go under the form group here and paste that in whoops let me just grab that again okay form group label upload file we have an input with the type of file and we can also have these help blocks we have a paragraph with the class of help block telling us that we can only upload PNG and JPEG files alright let's just separate these form groups a little alright so there's our file upload okay and we also have checkbox let's go ahead and add one of those so under the form group paste that in we get a check box okay very simple and then let's put our submit button paste that in we're just having a button with the type of submit set it to the button default class and there we go so that's a very simple form using Twitter bootstrap now we also have inline forms what I'm going to do is just copy and paste this in in the same container let's just put an HR here okay we'll paste that and now we have form with the class of form inline same thing we have our form groups okay it's an email this one is a password and then we have a checkbox with remember me and then a button so what makes it inline basically is this class right here so let's save that and let's see maybe this is too small to be and yeah there we go so when you get to a certain point it stops being inline but you can see there that's a nice login form set up alright let's see next thing let's move on to tables okay so up to this point you can see I have a nice little cheat sheet for the different classes but let's see just push this stuff over alright so we're going to go under this container and that should not be contained like that that should be a div that I do that anywhere else No all right you guys probably caught that a while ago okay so let's see form that ends their container ends here let me just make sure that matches up yep so we're going to create a new container okay all right so for tables I'm just going to paste in just a standard table okay paste that in it's just a table with first name last name and age save it and that's what it looks like by default which is pretty ugly okay I'm just going to put an HR right here separate it okay so that's pretty ugly and we can fix that very easily if we go and we add class to the table tag of table and save it look at that look how drastic that changes okay it actually looks nice and clean now there's other classes we can add on to format it even further for instance if we say tables striped okay what that does is it takes every other one and Dockins it gives it a nice little effect we can also make it bordered you say table - bordered I don't really use this what it is possible okay see the borders what else we can make it so that when we hover over a table row here it will highlight so we can do that with table - hover okay notice when I hover over it it changes and we can also do table condensed okay and that will just make it kind of smaller you can see it condensed the padding a little bit and we can also use contextual classes here so for instance let's say Jill we want her row to be red we could stay class make sure it's on the TR and we could stay danger okay now her Row is now red if we wanted John to be success or to be green they could say success and that turns his row green okay so very easy very minimal code to to make this look pretty good alright so moving along now we're going to go to lists groups and you know what I'm going to just add some comments here I want you guys to be able to use this if you need so this will be that's forms that's labeled alright I guess for this one we could put in line form okay that's our table and let's go outside of the container put an HR and then we'll open a new container okay and we're going to do a list group so I'm going to paste in just a regular list okay save that your standard list let's turn it into a list group by going to the UL and saying class equals list group okay now if we just do that it doesn't really do anything we need to also add classes whoops save that we need to also add classes to the list items so class equals and we want to say list group item letting it know that it's an item of this list group all right and then we'll just copy that we want to do it for all of these all right so it's save and there we go so that looks pretty nice now if we want to do a menu that's going to be a little different when we do is just paste this in okay so notice we're not using allies we're using a tags with the list group item save that okay whoops I want to put that within the container okay and notice that we can hover over them and they have links okay now if I click on that one you'll see that that's now active okay it adds a class called active if we want an active by default then we can just go and add in right here I'll stay active save it and now it's active okay and when you label it active it gives you the primary context context which is blue now let's say we want this one to be success or green we could say list group item Jesus I can't type item - success okay that makes it green we can also disable them so if we go here we just say disabled let's see list group item disabled it should disable it I would think okay they were no huh maybe I'm wrong about that oh well so moving on let's move away from those groups we're kind of running out of time here I want to move on to panels and wells which kind of give us a background for our content and also a heading so I'm going to go outside of this container did I know I didn't let's put our Comment screw okay we'll go outside of this container create a new one now this is the container alright so let's start with panels now let's go to the documentation and go to components and let me just make this a little bigger not components or yes components but why isn't it working it's my internet out please don't tell me my Internet's out all right there we go now if we go down to panels and right here so we have panel heading without title and we have it with the title I want the one with the title which is this right here so we can just grab that okay let's put a comment here paste that in to have this over so basically we have a div with the class of panel and panel default then we have a panel heading with an h3 that has the class of panel title and then the panel body where all the content goes so let's take a look at that okay so there's our panel we can also add a footer to our panel so if we go under the body and say div class equals panel footer save it now you can see it has a footer alright and if we want to change the colors here we can use the context so if we were to say let's instead of panel default actually no we probably want to put this on panel heading nope not panel heading right here panel default let's change it to panel primary save that and now you can see that as the blue background also gives us a blue border around it so you can add that you can make it green red however you'd like now wels pretty simple it's it's just the background gives you some padding and a background color of gray by default so let's see we'll go right under the panels and let's put a comment say wells and let's do div class equals well and we'll just say hello world alright save that what are we havin trouble with live reload again looks like it all right so that's our well you can see it just has some padding with the background there's a couple customizations we can do with Wells so let's just copy this paste it in twice this one will do well - LG this one will do well - SM so we can do large and small and let's see oh we also have to have the class of well so we need both ok so now you can see there's some more padding this is bigger this one has less and it's smaller okay so those are wells now we're going to look at alerts let's just put a char right there and I apologize if I'm moving kind of fast guys it's just that this is a lot of mock up a lot of content to go through and I want to just get as much as possible so this is for alerts and let's see what we'll do is let's paste in a couple of these one two three four all right so we just have a div with the class of alert the role of alert and let's make this a success alert all right now if we just look at it now how it is it's just just the text but if we add here alert - success save that now we get a green alert we can do the same with info say an info Alerts and I'll just add here alert - info okay this one will be warning so we'll do a worked - warning this will be danger and I can imagine the amount of comments I'm going to have about my spelling there we go again alert - danger all right so let's save that and now you can see the different alerts that we can do now what's cool is that we can also grab an alert where we can dismiss it we can click X and get rid of it so for that let's go under here and I'm just going to paste this in so div class we're using alert warning and then we're adding alert dismissible and then inside of it we have a button with the class of clothes a data dismissed attribute of alert and we're using this and ampere stamped x for the x mark all right and the alert text will just say you can close this so now you can see we have this X here if I click that it goes away and I believe you have to have the JavaScript file linked for it to be able to do that okay so next thing progress bars so let's put an HR right here actually let's stay within the container okay and we'll just put say progress bars and let's see we're going to say div class equals progress okay so that's kind of the wrapper class and then inside you want to do div class equals progress bar okay and let's see we're going to give this this s to have a style so that we can define the width of it or the percentage so we'll say style width is 50% I think that should work and in here let's just put the text 50% let's see what that does okay so that gives us a nice progress bar now there's some things we can add to it to change the style up so for instance if we want to make it green we can use the contextual classes and say progress our success okay now it's green we can also make it striped okay now notice it's striped and we can even make it an animated if we make it active that and now you can see that it's animated so pretty cool all right so we're getting there guys next thing we're going to look at is badges or labels and then badges so let's go ahead and put underneath here we'll put a line or an HR and then I'm just going to pay some of the stuff in so these are the labels okay labels we have the span class label and then label default just like the buttons we're using default primary success and info warning and danger so let's save that okay now notice this one is big this primary because I have it within an h1 so if you put it within a heading it's going to make it bigger alright so those can be pretty helpful badges so let's paste this in so badges we have a link here going to inbox and then we just have a span with the class of badge and then 50 and then here we have a button with messages with a span of a class of badge with two okay so if we look at that you'll see we have this inbox with 50 that's good for if you're building some kind of message system and then you have the button messages with two okay so those are badges let's see next we have images so for that I'm going to paste in we're going to go outside of the container which ends right here I'm going to paste this in okay another container and we have an image with the class of thumbnail we're just using a placeholder image here then we have an image with the class of image rounded which will give it rounded corners and an image circle which will actually make the images circle so save that and that's what we get you see the different styles of image okay now next thing I want to look at is a really important part of bootstrap and that's the grid system okay so let's go right here and put a comment will stay grids this will be in its own container okay so when we want to start a grid basically a grid is broken up into twelve blocks okay we have one two three four all the way to 12 and then you can you can say how many of these blocks you want to use in each div so for instance a common one would be to use an eight you know eight columns for your main layout and then four for the sidebar and notice that eight and four is going to equal twelve all together alright so what we'll do is create a row okay you want to wrap your grids you want to go by row and then let's say we wanted eight columns so we'll say div class equals call MD eight okay and I'll go over what MD means in a minute and then underneath that actually let's put some content there will say lorem tab which will just give us some content and we probably want to wrap that in a paragraph okay and then underneath it let's just copy that paste it in and change this to four okay and we'll just cut this text down a little bit okay so let's see what that gives us let's make sure we put an H R here okay so here's our grid we have an eight column here and then we have a four column so this would commonly be the main layout and then a sidebar all right so it does it makes it so that you don't have to use your floats and all that judging the margin and padding it takes all that into effect all right so let's do something a little different let's do four three columns okay notice four times three is 12 so we can do that and have it look good so we want four boxes essentially lined up so what we'll do is let's see let's just copy this whole row right here and put it underneath and then we're going to change this to three this one is also going to be three but we want the same text in each one so I'm going to copy that paste that in and then we just want two more of these three column divs so I'll paste that in save it and now notice that we have four three column divs okay um what else I mean you could do any combination you want you could do two six column divs so for instance if we copy I let's copy this row okay we'll go underneath this row change this to six and six save it and see what up okay so notice that this and this that there even because they're both 6 and we could put line breaks here to separate this a little bit okay you could even do 12 1 column divs so that's a lot of codes so let me just grab that okay so right here paste that in so basically we have a row with 12 of these column D ones and look at that alright now as far as the MD that stands for medium screen size now if we go to a certain point like let's say when it gets to here when it's like tablet view it automatically goes into just all on top of each other no more columns now if we want to keep that format let's say the 8 for we have up here the sidebar in the main column if we want to keep that here what we could do is say call - SM - 8 and then call - SM dot 4 so if we save that now you'll see that we have the columns back if we go down even more it'll do it again now if we want to still have those columns here we could add call - XS - 8 and then call - XS - 4 okay so now we have the columns again which you probably wouldn't want if you're on a screen this small you probably don't want columns like that but you can do it okay so there's two more things that I want to show you two pretty important things and that's the nav bar and the Jumbotron okay so we'll start with the nav bar we're actually going to put that at the top so let's go away at the top here and let's see we'll put it right below the body now this is quite a bit of code so I'm actually going to get this from the documentation which is what a lot of people do so let's go to components and a navbar okay we're just going to grab this whole thing from this nav to this nav and let's put that right here okay just going to tab that over now let's see what this looks like okay so there's our nav bar this has a lot in it has a branding our logo some links it has a drop-down and just to let you know you have to include the Judi bootstrap JavaScript for this to work okay there's also a search form which we don't need but you can have and then some links over here with another drop-down and if we look at the code here I'm going to get rid of some stuff I don't want that form so from here this form to the end right here let's get rid of that okay save it now that's gone we can also get rid of the links over here that's the CL with the class of nav bar right and get rid of that save it now that's gone all right now notice that if I make this bigger the the nav bar content is way over here and I don't want that I want that to be in a container so what we would do in this situation is just see how it has container fluid change that to just container okay now it's pushed towards the middle all right also if you want this to be a darker color all you need to do is change nav our default class to nav bar inverse save that and now it's a dark color okay and let's just change the brand the logo right here we'll say bootstrap cheat sheet save that all right so that's the navbar next thing last thing is the Jumbotron which is where is it basically a showcase area we have a big heading some text learn more and usually you put an image or something behind it as well alright so for that we can just type that in let's go below the navbar okay we'll put a comment here and let's see we want to give the class of Jumbotron okay and then in here we want a container because we want everything to be pushed into the middle okay we'll put an h1 say welcome to my website and then we'll put in a paragraph I'm just going to say lorem tab give us some content I don't want it too long say up to here alright and then we probably want a button so we'll say a a trap okay give it a class of BTN BTN primary they read more all right a lot of times I like to Center the content in the Jumbotron so if we just add text Center and let's save that okay so there's our Jumbotron now if you want this to be gone this is the space right here that's the margin for the navbar what I would suggest is just in your own custom style whether you want to do it up here or have your own style sheet you could say dot navbar margin-bottom zero okay and actually you want to have that after the bootstrap CSS so we want to put that right here all right and that gets rid of that I notice that the navbar by default has these rounded corners usually you wouldn't want that so what we could do is just say order radius zero okay now it doesn't have the rounded corners all right so this is a pretty nice cheat sheet if you need to know some classes for bootstrap that was what I wanted to do get you guys that I realized there are some things that I didn't get to cover I probably will make another video for the JavaScript stuff and just about definitely going to make that CMS admin theme UI that we're going to build with bootstrap all right so let me know if that's something you guys are interested in okay and I'm always open to suggestions if you guys if you guys read my comments and you can see that I do respond to guys if you have a suggestion for a project that I like and I think will benefit my subscribers okay I do have a twelve project course building bootstrap themes so that's something that you probably want to check out if you're interested in this kind of thing and that's it so if you liked this video please like it and please subscribe and I will see you next time

Channel: Traversy Media

Views: 906,577

Rating: 4.9497285 out of 5

Keywords: bootstrap, twitter bootstrap, bootstrap tutorial, bootstrap theme

Id: 5GcQtLDGXy8

Length: 73min 26sec (4406 seconds)

Published: Mon Jan 02 2017