Bootstrap 5 Crash Course Tutorial #13 - Bootstrap Icons

Key Takeaways

okay then so sometime last year bootstrap released their own icon pack for using with bootstrap so that you no longer have to use font awesome or something like that you can just use bootstrap icons instead if you prefer now you can see all of the icons at icons.getbootstrap.com and currently they've got over 1 300 icons in the library and they're adding new ones all of the time so there's loads to choose from now you can search for icons right here for example i could type in clock and we could see all of the clock icons below now if we want to use one of these we can click on them and it's going to show us how to use the icon in our project now in all cases it's going to be this i tag that we use right here with a class of bi for bootstrap icons and then the icon name so let me just head back to install bootstrap icons if we click on this install link you can see we can either use npm or we can use a cdn now we're going to use the cdn to keep things simple for now and by the way bootstrap icons aren't just for bootstrap 5. you can use them in bootstrap 4 as well if you prefer they're separate from the core bootstrap package so i'm going to copy this link and then i'm going to add this to our code in our head and now we can use any of the icons in our page okay then so the first icon i want to add is an icon inside the nav bar to the left of the title and that is going to be a little book so let's go to bootstrap icons and scroll up to the top and then let's type book right here so i'm going to go with this one book half so we can click on it we can grab this code right here that's what we need to paste into our project and it's going to go just before this thing so let me paste it in right here and if i save that now we should be able to see the book at the top awesome simple okay so the next icons i'm going to add in are down here next to the book reviews so let me first of all go over here and i want to go back and this time i want to search for star so we're going to have this icon next to the title right here so let's grab that one copy that and go down to where this is defined this title if we scroll right down so book reviews right here and they're going to go inside the h2 with the text like so save it and we should be able to see that over here can we yep butt reviews awesome okay so finally i'm going to play some star ratings at the top of every review as well now in order to do that i'm going to come above the h5 and i'm going to create another div so that div is going to have a class of pb 2. so basically we're just giving this some padding to the bottom and it's strength too and inside here we're going to create a series of different icons now if we go to the icons i'm going to go back again we're going to use star so let me type in star again and it's going to be this one right here start fill let me grab that and let me paste five of these in because obviously this is going to be a five star book and if i save it now and preview over here we can see five stars awesome cool so now what i could do is grab that and i could paste it in each one so if i come down here above this h5 we'll paste it in and then down here above this h5 and then down here and then finally down here and because i want this to be authentic we'll change the last one to half so this is just four and a half out of five for this one review because that there was an icon as well if we take a look if we go back and say star up here it's this one star half okay cool so that is icons my friend and there's just one more thing i want to do and that is to scroll up here and this row right here i'm going to give a bit of margin because at the minute i feel like these list items are too near the title text so let me come to the row and say my hyphen five just to give it that extra margin and space around it and that looks a bit better