Bootstrap 5 Crash Course Tutorial #4 - Buttons & Button Groups

Key Takeaways

all right then so the first real and probably most simple component that i want to show you is the bottom components now if we take a look at the button on the docs we can see at a glance there's loads of different button styles that we can use and different button sizes too and we can take advantage of the different theme colors for these buttons as well they're really easy to set up and they only use a couple of different classes so let's take a look at a few of them in the code alright so like we said there's loads of variations of buttons we can use so we're going to take a look at a few different examples some basic buttons some anchor tags as buttons different sizes different styles including the outlined one and also button groups so let's start with the basic buttons so i'm going to create a button tag like this first of all and i'll say primary button inside and i'm going to give this a class equal to btn now whatever button we create we always give it this base btn class every button has that and then we can customize it further like colorize it so i could say btn hyphen primary to give it a primary color and if i take a look at this now in the browser we can see this primary button right here and notice it automatically changes the text color to white as well when it has a slightly darker background so let's do another example i'm going to change this to secondary down here and then this to secondary as well and save that preview this and now we can see the gray button right here so we could do that with every different theme color let's also have a look at buttons as anchor tags so this is using the button tag right but any tag can have these button classes including atax so i'm gonna say a dot btn dot btn hyphen info which is another theme color and the href doesn't have to be anything inside here i'll say info anchor tag and save it and preview that and we can see the anchor tag looks the same but now it uses this information color instead and this time because the background's a little bit lighter it doesn't use the white text it keeps it as a darker black text all right so let's do another example i'm going to say button success for this one and change this to success as well save that and preview and we can see the green button awesome so like i said we can use any different tag as a button as long as we have the button class and whatever other class we want to stylize the button all right so these are all the same size buttons right here but we can make them smaller and also larger so if i say down here button and then give this a class of btn and then also a class of btn hyphen and it's going to be lg for a large button and also btn hyphen danger to stylize this remember danger was a theme color and there i'll say large danger button and i'm going to duplicate this so we can show you a small one so instead of lg right here we have small and when we don't apply a size to it it gets the default medium size just like these buttons so this is a larger button this is a smaller button and we'll change danger to warning so it's a different color and we'll say small and oops not the small tag small warning button all right so let's take a look at that and now we can see we have the large button and the small button all right then so let's take a look at the outlined style so i'm going to create down here some more buttons so i'll say button and then btn which is the base class then i'll say btn hyphen outline and then hyphen whatever color i want it to be so primary in our case so that means it's going to be an outline style button and the outline of the button is going to be that primary color so i'll say outlined primary button and then let's do another example down here so instead of primary this time i'll say secondary and also i'm going to make this large because we can apply sizes to these different styles of buttons as well so btn hyphen lg and here i'll say large outlined secondary button save that and preview and now we can see the outline style right here and when we hover over them it gives it the background color and changes the text to white which is nice same for this one but now it's a large button and we can also do the same for small buttons as well if we want to all right so the last thing i want to show you is the button groups and button groups are basically when you've got a series of buttons that belong together so let me show you an example i'm going to create a div first of all with a class of btn hyphen group and then all of the buttons that we're grouping together go inside this button group so i'm going to do anchor tags just for a change and then i'm going to give this a class of btn and also btn hyphen primary to make it the blue color and here i'll say in the href just hash and then as the text will say button one then i'm gonna duplicate these a couple of times so button two and button three so now all of these buttons are inside the button group and when they're inside the button group bootstrap styles the group of buttons a bit differently so if we save this we can see now they're all butted up to each other like that whereas before they have the white space in between them so that is a button group now each of these buttons can also have different colors so i could change this to warning and i could change this down here to success that's still going to work and we can see them all butted up to each other still all right so hopefully that gives you a good idea of how we can use buttons again we can use them on whichever tags we want doesn't have to be a button tag and we always use this base button class but then combine it with the different style classes to either colorize it or make it outlined or size it differently etc and by the way i'd always recommend checking out the docs for these components as well because there's way more examples of buttons and any other component we might use in this series as well then i'm going to show you so whatever component i might be showing you in this series there's probably at least 10 other ways that you can use it and customize it so definitely play around with different components once you've watched the videos next up though we're going to take a look at some of bootstrap 5's utility classes