Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)

hey welcome back in this video we're going to learn about something called bootstrap now before we even answer the question of what in the world bootstrap is i just want to say that it's an amazing tool that everyone should have in their toolbox having said that a lot of people have a lot of very different and very strong opinions about bootstrap and when you should or shouldn't use it and sort of how it fits into the bigger picture of your career path so with that in mind we're going to do two things in this video first we're going to look at what bootstrap is and how you can start using it and that first part of the video will be unbiased or hopefully objective and then in the second half of the video my cat is screaming at me anyways in the second half of the video i'll share my own personal biased opinion on when you should or shouldn't use bootstrap and what your next steps should be right sort of how bootstrap fits into your overall career path okay but without further ado let's get started and part one is just figuring out what bootstrap is so let's jump into the action so let's begin with the question what is bootstrap well as we can see from the official website which is just gitbootstrap.com well right away we see that bootstrap is a tool that can help us build fast responsive sites but what does that really mean how does it help us and what does it do well throughout this series when we've been writing our html we've been giving our elements classes right you make up a class name and then in your css you can select or target that element and style it however you want so what is bootstrap well imagine if there were these pre-existing agreed-upon class names and bootstrap has already written all of the css for those class names and now we just get to leverage them and recycle them and use them in our html without doing any of the difficult css coding well that's exactly what bootstrap is and if that didn't make sense that's okay because the easiest way to understand this is to just jump in and try it yourself so here's what i want you to do open up your text editor so perhaps visual studio code and i just want you to create a brand new empty html file you can create it anywhere as long as you know how to find it again in my case i have this folder on my desktop named testingbootstrap i've opened that folder with vs code so i'm just going to say new file let's call it index.html inside the new empty file remember that you can get a skeleton of a webpage by just typing doc or doc and then hit tab on your keyboard okay now for the body content let's just have a heading level one that says welcome to our page let's go ahead and save this file and then i want you to open this so find the file and then open it in your web browser so i'm just going to drag this on top of chrome cool so at this point we haven't done anything with bootstrap now let me show you how to actually get started with bootstrap so from the official website actually this is a weird time to record a bootstrap lesson because you can see it's currently on version 4.5 now there's nothing wrong with version 4.5 but version 5 is going to come out soon and it's going to be a huge improvement so if you're watching this video in the future the bootstrap website might currently be on version 5 and if that's the case then you can just scroll down you're looking for this area called bootstrap cdn and you're just going to want to grab this css code so just select this code we don't need any of this just the css only for now you would just copy this be sure to select to the end of this line and then copy it into your clipboard okay but if you're not watching this in the future if you're watching this very shortly after the upload date of the video then in order for us to use version 5 we need to go up into the address bar and for the domain just right before the g and get let's say v5 dot gitbootstrap.com as of the time i'm recording this version 5 has not been released yet so it's still in the alpha or testing version but that's okay i've used it a couple of times and it seems great okay so i'm going to do the same thing i'm just going to scroll down look for the bootstrap cdn area here's that css only code so this time there's actually a little copy button i can click that copies it into my clipboard and now back on our website in our html towards the end of the head section maybe right below our title just paste it in right here okay now we can test to make sure it's working if we save our file and then back when we're viewing it in the browser if you reload notice how the font changed so that means that we are successfully loading the pre-written or pre-existing bootstrap css code now just seeing the font change isn't very exciting so check this out do this with me maybe below our heading level one imagine we want to link to a different page right so we could say a and then tab for the href value just give it a placeholder hashtag but then for the actual text that you would click on here let's say about us let's give that a save and then refresh in the browser now this just looks like a regular html link right it's blue and it's underlined however this is where we finally really use bootstrap on the opening tag we can give it a class equals quotes and i want you to say this exact name it needs to be exact btn for button and then a space and then btn dash primary okay i did not make these names up you need to use these exact bootstrap names let's give that a save though and now if we refresh check it out so it has rounded corners it has padding if you hover over it it uses a slightly darker version of that same blue color and you and i didn't have to write a single line of css code we're just leveraging existing classes that bootstrap already wrote for us now if we change btn-primary to button or btn-success and save that notice now it's green instead of blue so there are different keywords in bootstrap that correspond with different colors okay what if we wanted the button to be a bit larger well we could just give it a third class so instead of just btn and then btn success we can say space btn dash lg for large give it a save cool or if we wanted it to be a smaller than normal button we could say btn-sm for small okay and then if we wanted the button to just be an outline instead of a solid background color you can change btn success right so this is the one that controls the color you can say btn-outline dash success so now it's green text with a green outline right and since that one changes color just to prove a point if you change it to btn outline dash primary it'll go back to blue now if you're wondering how in the world i knew all of these magical class names well you just go to the bootstrap website and click on the documentation or docs link in this left-hand sidebar if we click on components well we see buttons is one of the options and if you click on buttons this page has all the information you need to create the different colors so there are the buttons and then here is the example.html that would create these if we scroll down there are the outline versions of the buttons and then here is the documentation on the different sizes right large and small now i don't want to get too sidetracked on buttons bootstrap is not a library just for buttons that's just the first example that i started with so let's change gears let's see what else bootstrap can do for us so notice how our content is hugging the very left edge of the browser window and usually that's not what we want right a lot of the times we want to sort of center our content in the middle horizontal portion of the screen so check this out in our html let me select the heading level one and link into my clipboard and cut them or copy them and delete that so we have a clean slate i'm going to paste them back in in just a moment but i want to wrap them inside a div so say div dot container hit tab now container is a name that you've seen me use in earlier lessons but also bootstrap uses this name it's a very common name in the world of html and css but if we just paste the heading level 1 and a element to live inside this container if we give that a save notice that automatically centers the content sort of in this horizontal area okay we didn't have to write any css in order to accomplish that beyond that let's imagine we want to create a multiple column layout down here let's start simple let's just have a two column layout right so one column two column so in our html now you can set up a column layout outside of a container but in this case i do want my column layout to be constrained to that sort of container width so i'm going to set this up inside the container so maybe after the a element we want to create a div so div dot with a class of row so div dot row hit tab now inside this div we just create one div for each column so if i want two columns i say div dot col is short for column right after that let's have a second column so div.call again hit tab now we need to add a bit of sample content inside each one so we can actually see them so inside this first column div let's say maybe heading level three feature number one and then maybe just a paragraph with a bit of sample text so you can hit lorem and then tab to get a bit of placeholder lower mipsum and just do the same thing inside this second column so h3 feature number two paragraph with a little bit of placeholder text give it a save cool that's all it took we didn't write a single bit of css and we have a two column layout okay now notice that they're equal width what if instead we wanted this column to take up two thirds of the available width and this one to only take up the final one third of the available width well bootstrap uses a concept called the 12 column grid so for example imagine if there were these imaginary columns running down the page vertically like this and imagine there were 12 of them and they were all equal width now in that context of a 12 column grid each one of these that are equal width each one of these would be taking up 6 12 of the column grid so if we wanted one of these to take up two-thirds of the available width well what's two-thirds of 12 it would be eight so we want this column to take up eight twelfths of the available width and then we want this column to only take up the final remaining four twelfths so to do that well instead of just col for column we can say c-o-l-8 we don't need to say the 12th part it's just sort of assumed this means take up 8 12. and then on this one we'd say col dash 4. give that a save let's refresh cool so you get the idea you can experiment with different numbers you just want it to add up to 12. now on an unrelated note i think it would look nice if there was a bit of vertical spacing in between our button and the beginning of this content now what i'm about to show you doesn't have anything to do with the 12 column grid system in bootstrap instead this is just sort of a universal or utility class but if we want to add a bit of vertical spacing here i would just find either that button or we could even just find this row and so i would want to add top margin to the row well we can just give it another class so right after row just say space and then m t which stands for margin top and then dash and then you can choose any number between one and five so mt-1 will just give it a tiny bit of top margin mt-5 will give it a rather large top margin so if we save that refresh you get the idea i think that's maybe too much of a gap so instead i could try mt-4 cool in addition to mt for margin top obviously there's margin left margin right and margin bottom with the obvious abbreviations that you would guess there's also mx which stands for margin horizontal so that's left and right there's my which is the vertical top and bottom also there's p for padding and then all of the other second letters apply right so padding top padding left padding right padding vertical padding horizontal but we wanted just margin top dash four okay so it's just something i want you to keep in mind it's a very useful class system to have at this point let's change gears and let's get back to the grid system the 12 column grid what i want to talk about now is how we can make this responsive to different screen sizes so we learned how to set up a basic two-column split like this but now what if instead we wanted four columns on a relatively large desktop monitor and then on a narrower screen like maybe a tablet we want just two columns per row and then for a tiny smartphone we just want a single column layout well bootstrap makes this very easy so first though let's make sure we have at least four divs that can act as the four columns so back in our html let's give ourselves a clean slate and let's get rid of the dash 8 on this column and get rid of the dash 4 on this column and let's first just give ourselves four equal width so to speed things up i'm actually just going to copy and paste these existing two and then change the headline just so we can stay organized so feature number three and feature number four give that a save reload okay so we have our four columns now imagine on a large screen this is what we want it to look like but then on a screen that's narrow like this we would want there to only be two columns per row and then when you get down to a screen like this or even if i zoom in this should just be a single column layout so check this out actually instead of looking at it from the large screen first and then working our way down let's take the modern approach of starting or beginning with mobile right mobile first so for a tiny screen we don't want columns at all we just want one column per row but then maybe once the screen is about this wide we want two columns per row so instead of having col at all let's just say col dash md for medium dash 6 right so that's half of the available width 6 12. let's go ahead and give this class to all four of our columns i'm just gonna copy and paste give that a save refresh okay so when the screen is very small like a phone everything collapses to a nice single column layout but once the screen is about this wide you can see we switched to a two column layout so that's what the md or medium was referring to bootstrap considers this size of a screen width to be considered a medium screen so the clasp means only for a medium screen and larger then make it six twelfths okay and then when the screen gets even larger we would want all four on a single row so to achieve that we can just give this a second class so right after this we can just say space and now let's say call dash lg for large dash three right what's one quarter of 12 it's three so then you can just copy and paste this onto the other four columns so just space and then paste space paste space paste give that a save refresh my screen is super small because i'm recording and i want the video to be clear on youtube but if i zoom out a bit to simulate a normal sized desktop or laptop screen you can see now all four of them fit on a single row so bootstrap considers this screen size to be large so our class name was saying only for a screen that is lg or this size or wider only then make them take up 3 12 of the available width and then if i resize down there's two and there's a smartphone so we just set up a responsive column layout and we did not have to write a single line of css code we didn't have to write advanced css grid using min max and repeat nor did we have to learn about media queries so you can see that bootstrap is incredibly useful now once again you might be wondering how i knew all of these magical class names well from the official bootstrap website in the documentation in the left-hand sidebar you just look under layout and then there's a section named grid so if we click on that this page has all of the information you could ever want about setting up different column layouts with bootstrap so below each example it shows you the exact html that you would use i'm a big fan of the documentation that bootstrap provides so you can go through here whenever you want to learn more about the grid system and at this point i want to make something abundantly clear that bootstrap is not just a library full of button styles and column layouts there's much more to bootstrap than what we've covered here however there's no point in me walking through each feature of bootstrap with you because the bootstrap documentation is so excellent i want you to go and experiment yourself so go through their documentation and in particular i recommend checking out the components area there's all sorts of cool stuff in here now while i do want you to experiment and go through these on your own there is something i want to point out to you to save you a lot of frustration so for example let's say i click on this one that's called collapse and i scroll down a bit and i see this feature called accordion example and i see there are these three sections but only the first section has content that's visible but if i click on the second one it sort of slides down if i click on the third one then it's visible so maybe i really like this effect and i want to use it on my website now just like with all the other bootstrap documentation below the example you'll see html that you can use and here i even see a copy button so i can just copy that to my clipboard back in vs code maybe after the closing row div right here i can just paste it in give that a save refresh my page so here it is visually but notice when i click on these other sections nothing actually happens this is because this bootstrap component in particular needs or relies on javascript now in this bootcamp series we have not talked about javascript whatsoever yet javascript is going to be our main topic in chapter number two which is the programming chapter however if you do want to experiment and have fun with bootstrap really quick i want to show you how you can use the bootstrap javascript even though we don't know what javascript is yet so all you need to do from the bootstrap homepage again i'm using the version 5. when you're watching this that might be the current version but as of now if you scroll down to the home page remember when we looked for bootstrap cdn and we grabbed the css only right below that is where you can grab their javascript so you would just click this button here to copy it to your clipboard and then back in html you don't want to include it where we included the css javascript's a little bit different down at the very bottom of our html file right before the closing body tag so right here where my cursor is right above the closing body tag just paste in your clipboard okay and this will load the bootstrap javascript so if i save this and refresh my page now i can click let me zoom out a little bit now i can click on these different areas to expand the particular content okay now at this point we have a general idea of what bootstrap is how to get started using it and how to learn more right you just dig through the documentation and try experimenting with different components and features now if it's this easy to start using bootstrap you might be wondering what's the point of writing your own css why does anyone even bother learning css why doesn't everyone just use bootstrap for everything well that's a good question i would say it depends on your career goals because while you certainly can use bootstrap on many different types of projects there are other types of projects and clients where bootstrap is just out of the question what i'm getting at is larger companies often have an established brand identity and they already have a style guideline meaning they're very picky about the exact amount of spacing and margin and padding in the exact colors of borders the exact shadows the exact everything right they're just super specific and in situations like that you're going to spend more time customizing and overriding bootstrap values than you would just writing all of the css yourself however a lot of projects are not like that and the client is not going to be that particular about the way things look in that case i think it makes perfect sense to use bootstrap also within the context of this bootcamp series i think it makes a lot of sense to use bootstrap so here's what i recommend right now we're bringing chapter one to a close which is the design chapter and in our very next video we're going to start chapter number two which is programming so for the remainder of this bootcamp series i think it would make perfect sense for you to just use bootstrap and not worry about css this way you can use all of your brain's horsepower on absorbing the new topics then at the very end of this bootcamp series if you are interested in design and the front end and the user interface i absolutely recommend you stop using bootstrap all the time and actually go back and study css or if you don't ever want to use bootstrap at all that's totally fine too that's your option now before we bring this video to a close i do want to say something in defense of css and sort of against using bootstrap so just this last week i was talking to my friend he's had all sorts of different jobs he's been chief technology officer and he was saying that they hire a lot of their developers from boot camps and these developers they're hiring out of the boot camps they're very skilled in a lot of different areas of programming however when it comes time to actually implement a new custom design component in the application a lot of them struggle because if something isn't just copy and pastable from bootstrap or from a material design pre-existing component well a lot of these developers sort of fall apart they never actually built their css skills i know i've seen this in my work there might be a developer who's super skilled when it comes to databases and servers but if you ask them to implement a custom design that isn't just straight out of bootstrap they fall apart and there's nothing wrong with that we all have our own different strengths and weaknesses so it's up to you to figure out what you're interested in but i just want to say that it's very common for a lot of people to not be interested in css and they just want to learn programming because they think that's where the most lucrative jobs are or that's where the most job opportunities overall are i'm not gonna confirm or deny that but i will say this every great development team needs at least one css superhero there's just no way around that now big picture this doesn't really change anything because my career advice still stands and that is follow your interests study whatever interests you the most and whatever seems like the most fun if that's css great if it's not just use bootstrap like 99 of everyone else and leave the design to the css superheroes that's the great thing about this industry everyone has their own strengths and weaknesses and super powers and that's the whole reason development teams exist and it's not just one person creating everything we come together as development teams so that way we cover all of the different bases and we have all of the strength necessary anyways this is going to bring the design chapter to a close in our very next video we're going to begin the programming chapter i know this is what many of you have been looking forward to this entire time i think it's going to be a ton of fun because programming is really when you start to learn how to think in terms of code and it's not just about how things look visually anyways thanks for working through this first chapter with me and if you have any friends or family that might be interested in this programming chapter i'd appreciate it if you could share this link in a lot of ways we're really just now getting started so let's keep our momentum rolling and i'll see you in the next one

Channel: LearnWebCode

Views: 11,891

Rating: 4.9360466 out of 5

Keywords:

Id: vRvhAzKUESw

Length: 26min 54sec (1614 seconds)

Published: Wed Aug 26 2020