Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 color: #444;
 box-sizing: border-box;
 margin: 0px;
}

.container {
 max-width: 1200px;
 width: 100%;
 padding: 0px 15px;
 margin: auto;
}

.container-fluid {
 width: 100%;
 padding: 0px 30px;
}

ul, ol, li, a {
 padding: 0px;
 margin: 0px;
 list-style: none;
 text-decoration: none;
}

.breadcrumb-1, .breadcrumb-2, .breadcrumb-3, .breadcrumb-4, .breadcrumb-5 {
 margin: 30px 0px !important;
}

/**Typeo CSS End**/

/*Breadcrumb Option 1 Start*/
.breadcrumb-1 {
 display: flex;
 flex-flow: row wrap;
 margin: 15px 0px;
}

.breadcrumb-1 a {
 text-decoration: none;
 color: #000;
 font-size: 16px;
}

.breadcrumb-1 a:first-child {
 margin-left: 0px;
}

.breadcrumb-1 a:after {
 content: '/';
 margin: 0px 10px;
 line-height: 1;
 display: inline-block;
 position: relative;
 top: 1px;
}

.breadcrumb-1 span {
 color: #696969;
 font-size: 16px;
}

.breadcrumb-1 a:hover {
 text-decoration: underline;
}

/*Breadcrumb Option 1 End*/

/*Breadcrumb Option 2 Start*/
.breadcrumb-2 {
 display: flex;
 flex-flow: row wrap;
 margin: 15px 0px;
}

.breadcrumb-2 a {
 text-decoration: none;
 color: #000;
 font-size: 16px;
}

.breadcrumb-2 a:hover {
 text-decoration: underline;
}

.breadcrumb-2 a:first-child {
 margin-left: 0px;
}

.breadcrumb-2 a:after {
 content: '|';
 margin: 0px 10px;
 line-height: 1;
 display: inline-block;
 position: relative;
 top: 1px;
}

.breadcrumb-2 span {
 color: #696969;
 font-size: 16px;
}

/*Breadcrumb Option 2 End*/

/*Breadcrumb Option 3 Start*/
.breadcrumb-3 {
 display: flex;
 flex-flow: row wrap;
 margin: 15px 0px;
}

.breadcrumb-3 a {
 text-decoration: none;
 color: #000;
 font-size: 16px;
}

.breadcrumb-3 a:hover {
 text-decoration: underline;
}

.breadcrumb-3 a:first-child {
 margin-left: 0px;
}

.breadcrumb-3 a:after {
 content: '';
 margin: 0px 10px;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 7px 0 7px 7px;
 border-color: transparent transparent transparent #000000;
 display: inline-block;
 position: relative;
 top: 2px;
}

.breadcrumb-3 span {
 color: #696969;
 font-size: 16px;
}

/*Breadcrumb Option 3 End*/

/*Breadcrumb Option 4 Start*/
.breadcrumb-4 {
 display: flex;
 flex-flow: row wrap;
 margin: 15px 0px;
}

.breadcrumb-4 a {
 text-decoration: none;
 color: #000;
 font-size: 16px;
}

.breadcrumb-4 a:hover {
 text-decoration: underline;
}

.breadcrumb-4 a:first-child {
 margin-left: 0px;
}

.breadcrumb-4 a:after {
 content: '';
 margin: 0px 13px 0px 10px;
 display: inline-block;
 position: relative;
 top: 1px;
 width: 8px;
 height: 8px;
 border-right: #555 2px solid;
 border-bottom: #555 2px solid;
 transform: rotate(-45deg);
}

.breadcrumb-4 span {
 color: #696969;
 font-size: 16px;
}

/*Breadcrumb Option 4 End*/

/*Breadcrumb Option 5 Start*/
.breadcrumb-5 {
 display: flex;
 flex-flow: row wrap;
 margin: 15px 0px;
}

.breadcrumb-5 a {
 text-decoration: none;
 color: #000;
 font-size: 16px;
}

.breadcrumb-5 a:hover {
 text-decoration: underline;
}

.breadcrumb-5 a:first-child {
 margin-left: 0px;
}

.breadcrumb-5 a:after {
 content: '';
 margin: 0px 18px 0px 18px;
 display: inline-block;
 position: relative;
 top: 0px;
 width: 8px;
 height: 8px;
 background-color: #5f5f5f;
 border-radius: 100%;
}

.breadcrumb-5 span {
 color: #696969;
 font-size: 16px;
}

/*Breadcrumb Option 5 End*/