Hello in this bootstrap four video we're going to show you breadcrumbs. breadcrumbs allow you to indicate to the user the current pages location within the hierarchy of the website. You probably seen them before. They usually organize something like home for slash, the maybe a folder name or the section name for slash and maybe the content page you're on to code these they're really simple. What you need is a ordered list. And then this needs to have a class of bread.

Crumb. I will think of the you know, the actual bread crumbs, you know, crumbs on bread, when I talk about bread crumbs in bootstrap. Just me, oh is it and then I need to do a list item. on the list all you term it Going to be gonna have a class. And this class is just simply going to be active. And I'll explain in a moment white active on the put this as home.

And then on this gonna make it simple. Sorry, no, no, I don't need this to have a class at all, this is actually going to have a h ref. So, h ref. And this would usually link something like home dot html, we don't have a page called that but that's usually what it would look like. Copy and paste that a couple of times. This will usually Okay, I'm gonna put this to library and this will usually link to something like library dot html.

It'll have to be Local to your server, you can be online as I mean, another website as well the a href can link to that, okay, and the third list item, we're going to make it at the current page, you can have more list items, the last one is generally or should be your current page. So just get rid of the H ref, because the users already on that page, so you don't want them to be able to go back to that one. And for this, I'm just gonna put page I on and for this, I'm gonna put a class active. So this just says on this page where these are clickable, so you can go back in the hierarchy of your website, which is very common. If I refresh, and there you go, we have our breadcrumb, we have some background, border radius. The four slashes are done automatically, and these aren't clickable, if I were to click on this Say no website is found because obviously we don't have a page called live with the HTML.

But both of these link back to the hierarchy that we have created right here and literally only a few lines to create quality breadcrumbs. So that's how you create breadcrumbs in bootstrap for your navigational hierarchy. If you have any questions, feel free to post them on our education platform sonar learning Dakota UK for slash question dot php will be a link in the description. Plus, there'll be another link in the description to the source code from this video. Please rate, comment and subscribe as it really does help us understand what you like what you don't like. And as usual, thank you for watching, and I hope you have a great day.