{"id":1206,"date":"2023-02-07T05:01:22","date_gmt":"2023-02-07T05:01:22","guid":{"rendered":"https:\/\/bootstrapbrain.com\/?post_type=bsb_component&#038;p=1206"},"modified":"2024-07-11T10:54:05","modified_gmt":"2024-07-11T10:54:05","slug":"bootstrap-5-process-steps-example","status":"publish","type":"bsb_component","link":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/","title":{"rendered":"Bootstrap 5 Process Steps Example"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull bsb-block-first-child is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignwide bsb-alignmedium is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-30778a02 wp-block-group-is-layout-flex\"><h1 style=\"font-style:normal;font-weight:700;\" class=\"has-text-align-center wp-block-post-title\">Bootstrap 5 Process Steps Example<\/h1>\n\n<div class=\"wp-block-post-date__modified-date wp-block-post-date\"><time datetime=\"2024-07-11T10:54:05+00:00\">July 11, 2024<\/time><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-average-font-size\">In web development and application design, user interfaces often benefit from straightforward, intuitive navigation through multi-step processes. Bootstrap 5, the latest version of the popular front-end framework, offers powerful tools to implement process steps efficiently. Whether you&#8217;re designing a signup flow, a checkout process, or a complex form submission, Bootstrap 5&#8217;s process steps component can streamline user experience and enhance usability.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alert alert-info is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-98bb686d wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-normal-font-size\" style=\"font-style:normal;font-weight:700\"><i class=\"bi-info-circle-fill me-1 bsb-primary-color\"><\/i> Bootstrap 5 Component Update<\/h2>\n\n\n\n<p>We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group alert alert-warning is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-normal-font-size\" style=\"font-style:normal;font-weight:700\"><i class=\"bi-megaphone-fill me-3 bsb-primary-color\"><\/i> Pro WordPress Themes<\/h2>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/bootstrapbrain.com\/out\/prowpthemes\" class=\"btn btn-danger text-decoration-none\" target=\"_blank\" rel=\"noreferrer noopener\">Browse Now<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group alert alert-warning is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-normal-font-size\" style=\"font-style:normal;font-weight:700\"><i class=\"bi-megaphone-fill me-3 bsb-primary-color\"><\/i> Free WordPress Themes<\/h2>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/bootstrapbrain.com\/out\/freewpthemes\" class=\"btn btn-danger text-decoration-none\" target=\"_blank\" rel=\"noreferrer noopener\">Download Now<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing py-4 py-md-6 py-xl-10 is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:38.33%\">\n<figure class=\"wp-block-image size-full is-style-allele-shadow\"><img data-dominant-color=\"f4f5f5\" data-has-transparency=\"false\" style=\"--dominant-color: #f4f5f5;\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-jpg.webp\" alt=\"\" class=\"wp-image-1211 lazyload not-transparent\"\/><noscript><img data-dominant-color=\"f4f5f5\" data-has-transparency=\"false\" style=\"--dominant-color: #f4f5f5;\" decoding=\"async\" width=\"900\" height=\"960\" src=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-jpg.webp\" alt=\"\" class=\"wp-image-1211 lazyload not-transparent\" srcset=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-jpg.webp 900w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-281x300.webp 281w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-768x819.webp 768w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-preview-750x800.webp 750w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:61.7%\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:4vw\">\n<h2 class=\"wp-block-heading has-normal-font-size\" style=\"font-style:normal;font-weight:700\">Bootstrap 5 Process Steps Snippet<\/h2>\n\n\n\n<p>This <a href=\"https:\/\/bootstrapbrain.com\/component-tag\/process\/\">Bootstrap 5 process steps<\/a> snippet is modern and <a href=\"https:\/\/bootstrapbrain.com\/component-tag\/responsive\/\">responsive<\/a>. You can elaborate on any process with this example in an elegant way.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns1206_52f221-c3\"><a class=\"kb-button kt-button button kb-btn1206_8d8858-20 kt-btn-size-standard kt-btn-width-type-auto kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-kadence-singlebtn\" href=\"https:\/\/bootstrapbrain.com\/demo\/components\/processes\/process-1\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_eye kt-btn-icon-side-left\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg><\/span><span class=\"kt-btn-inner-text\">Preview<\/span><\/a>\n\n<a class=\"kb-button kt-button button kb-btn1206_83a66b-77 kt-btn-size-standard kt-btn-width-type-auto kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-kadence-singlebtn\" href=\"#code\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_code kt-btn-icon-side-left\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg><\/span><span class=\"kt-btn-inner-text\">Get Code<\/span><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns1206_756b59-dc\"><a class=\"kb-button kt-button button kb-btn1206_ab1218-d4 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-kadence-singlebtn\" href=\"#snippets\"><span class=\"kb-svg-icon-wrap kb-svg-icon-ic_wrench kt-btn-icon-side-left\"><svg viewBox=\"0 0 8 8\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M5.5 0c-1.38 0-2.5 1.12-2.5 2.5 0 .32.08.62.19.91l-2.91 2.88c-.39.39-.39 1.05 0 1.44.2.2.46.28.72.28.26 0 .52-.09.72-.28l2.88-2.91c.28.11.58.19.91.19 1.38 0 2.5-1.12 2.5-2.5 0-.16 0-.32-.03-.47l-.97.97h-2v-2l.97-.97c-.15-.03-.31-.03-.47-.03zm-4.5 6.5c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5z\"\/><\/svg><\/span><span class=\"kt-btn-inner-text\">More Snippets<\/span><\/a>\n\n<a class=\"kb-button kt-button button kb-btn1206_80a2cf-ff kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-kadence-singlebtn\" href=\"#pricing\"><span class=\"kb-svg-icon-wrap kb-svg-icon-ic_heart kt-btn-icon-side-left\"><svg viewBox=\"0 0 8 8\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M2 0c-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0 .55.23 1.04.59 1.41l3.41 3.41 3.41-3.41c.36-.36.59-.85.59-1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59z\" transform=\"translate(0 1)\"\/><\/svg><\/span><span class=\"kt-btn-inner-text\">Join BS Brain<\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alert alert-light is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-98bb686d wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-normal-font-size\" style=\"font-style:normal;font-weight:700\"><i class=\"bi-palette-fill me-1 bsb-primary-color\"><\/i> Bootstrap 5 Templates<\/h2>\n\n\n\n<p><a href=\"https:\/\/bootstrapbrain.com\/template-tag\/one-page\/\">Bootstrap One Page Templates<\/a>, <a href=\"https:\/\/bootstrapbrain.com\/template-tag\/bootstrap-5\/\">Bootstrap 5 Templates<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/template-category\/free\/\">Free Bootstrap Templates<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-allele-no-spacing py-4 py-md-6 py-xl-8X is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The interface of this snippet contains a bright image, an appealing heading, and a process hierarchy.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-large-font-size\">Features<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<ul class=\"bsb-list-grid wp-block-list\">\n<li>Bootstrap 5<\/li>\n\n\n\n<li>BSB Framework<\/li>\n\n\n\n<li>Number Process<\/li>\n\n\n\n<li>Versatile Design<\/li>\n\n\n\n<li>HTML5 &amp; CSS3<\/li>\n\n\n\n<li>W3C Valid<\/li>\n\n\n\n<li>Clean Snippet<\/li>\n\n\n\n<li>Commented Code<\/li>\n\n\n\n<li>Responsive Layout<\/li>\n\n\n\n<li>Easy to Use<\/li>\n\n\n\n<li>SEO Optimized<\/li>\n\n\n\n<li>Cross Browser Compatible<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-large-font-size\">Tags<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"taxonomy-bsb_component_tag wp-block-post-terms\"><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/bootstrap-5\/\" rel=\"tag\">Bootstrap 5<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/clean\/\" rel=\"tag\">Clean<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/css3\/\" rel=\"tag\">CSS3<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/html5\/\" rel=\"tag\">HTML5<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/multipurpose\/\" rel=\"tag\">Multipurpose<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/process\/\" rel=\"tag\">Process<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/responsive\/\" rel=\"tag\">Responsive<\/a><span class=\"wp-block-post-terms__separator\">, <\/span><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/steps\/\" rel=\"tag\">Steps<\/a><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alert alert-light is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-98bb686d wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-normal-font-size\" style=\"font-style:normal;font-weight:700\"><i class=\"bi-plugin me-1 bsb-primary-color\"><\/i> Bootstrap 5 Components<\/h2>\n\n\n\n<p><a href=\"https:\/\/bootstrapbrain.com\/component-tag\/login-forms\/\">Bootstrap Login Forms<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/component-tag\/bootstrap-5\/\">Bootstrap 5 Snippets<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/component-tag\/cards\/\">Bootstrap Cards<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/component-tag\/carousel\/\">Bootstrap Carousels<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/component-tag\/hero-banner\/\">Bootstrap Heroes<\/a>,&nbsp;<a href=\"https:\/\/bootstrapbrain.com\/component-tag\/footer\/\">Bootstrap Footers<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing py-4 py-md-6 py-xl-10 is-layout-constrained wp-block-group-is-layout-constrained\" id=\"code\">\n<div class=\"wp-block-group alignwide is-style-allele-no-spacing ps-0 pe-0 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-kadence-tabs alignnone\"><div class=\"kt-tabs-wrap kt-tabs-id1206_75d444-c4 kt-tabs-has-2-tabs kt-active-tab-1 kt-tabs-layout-tabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-inherit kt-tab-alignment-left \"><ul class=\"kt-tabs-title-list\"><li id=\"tab-html\" class=\"kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active\"><a href=\"#tab-html\" data-tab=\"1\" class=\"kt-tab-title kt-tab-title-1 \"><span class=\"kt-title-text\">HTML<\/span><\/a><\/li><li id=\"tab-css\" class=\"kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive\"><a href=\"#tab-css\" data-tab=\"2\" class=\"kt-tab-title kt-tab-title-2 \"><span class=\"kt-title-text\">CSS<\/span><\/a><\/li><\/ul><div class=\"kt-tabs-content-wrap\">\n<div class=\"wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-tab_c9c8b5-7d\"><div class=\"kt-tab-inner-content-inner\">\n<pre class=\"wp-block-code bb-code-block\"><code lang=\"markup\" class=\"language-markup\">&lt;!-- Process 1 - Bootstrap Brain Component -->\n&lt;section class=\"py-3 py-md-5 py-xl-8\">\n  &lt;div class=\"container\">\n    &lt;div class=\"row gy-5 gy-lg-0 align-items-lg-center\">\n      &lt;div class=\"col-12 col-lg-6\">\n        &lt;img class=\"img-fluid rounded\" loading=\"lazy\" src=\".\/assets\/img\/process-img-1.png\" alt=\"Our Design Process\">\n      &lt;\/div>\n      &lt;div class=\"col-12 col-lg-6\">\n        &lt;div class=\"row justify-content-xl-end\">\n          &lt;div class=\"col-12 col-xl-11\">\n            &lt;h2 class=\"h1 mb-3\">Our Design Process&lt;\/h2>\n            &lt;p class=\"lead fs-4 text-secondary mb-5\">Our design approach is very organized to ensure satisfaction for our esteemed clients.&lt;\/p>\n            &lt;div class=\"d-flex mb-4\">\n              &lt;div>\n                &lt;span class=\"btn btn-primary bsb-btn-circle pe-none me-4\">1&lt;\/span>\n              &lt;\/div>\n              &lt;div>\n                &lt;h4 class=\"mb-3\">Planning&lt;\/h4>\n                &lt;p class=\"mb-0 text-secondary\">Get to know your users and their needs better through surveys, interviews, usability testing, and other methods.&lt;\/p>\n              &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"d-flex mb-4\">\n              &lt;div>\n                &lt;span class=\"btn btn-primary bsb-btn-circle pe-none me-4\">2&lt;\/span>\n              &lt;\/div>\n              &lt;div>\n                &lt;h4 class=\"mb-3\">Launch&lt;\/h4>\n                &lt;p class=\"mb-0 text-secondary\">This involves creating wireframes, mockups, and prototypes to test out your ideas and get feedback from users.&lt;\/p>\n              &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"d-flex\">\n              &lt;div>\n                &lt;span class=\"btn btn-primary bsb-btn-circle pe-none me-4\">3&lt;\/span>\n              &lt;\/div>\n              &lt;div>\n                &lt;h4 class=\"mb-3\">Finalize Product&lt;\/h4>\n                &lt;p class=\"mb-0 text-secondary\">Once your product is launched, it's important to gather feedback from users to learn what they like and dislike about it.&lt;\/p>\n              &lt;\/div>\n            &lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/section><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tab_ca11b1-4d\"><div class=\"kt-tab-inner-content-inner\">\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\">\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/bs-brain@2.0.4\/components\/processes\/process-1\/assets\/css\/process-1.css\"><\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing py-4 py-md-6 py-xl-10 has-background-secondary-background-color has-background is-layout-constrained wp-container-core-group-is-layout-d31693f3 wp-block-group-is-layout-constrained\" id=\"snippets\">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"has-text-align-center has-huge-font-size wp-block-heading\" style=\"font-style:normal;font-weight:700\">Bootstrap 5 Process Steps Snippets<\/h3>\n\n\n\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_99ff03-b7\"><div class=\"kt-block-spacer kt-block-spacer-halign-left\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-text-secondary-color has-text-color\">Browse our helpful examples of Bootstrap process steps snippets. These Bootstrap process components are straightforward to use and customize.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-query alignwide is-layout-constrained wp-block-query-is-layout-constrained\"><ul class=\"alignwide bsb-post-template-1 is-column-3X wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-1206 bsb_component type-bsb_component status-publish has-post-thumbnail hentry bsb_component_category-blog bsb_component_category-creative bsb_component_category-free bsb_component_category-magazine bsb_component_category-portfolio bsb_component_tag-bootstrap-5 bsb_component_tag-clean bsb_component_tag-css3 bsb_component_tag-html5 bsb_component_tag-multipurpose bsb_component_tag-process bsb_component_tag-responsive bsb_component_tag-steps\">\n<figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/\" target=\"_self\"  ><img decoding=\"async\" width=\"900\" height=\"448\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image lazyload\" alt=\"Bootstrap 5 Process Steps Example\" style=\"--dominant-color: #f1f1f1;object-fit:cover;\" data-srcset=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp 900w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-300x149.webp 300w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-768x382.webp 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" data-has-transparency=\"false\" data-dominant-color=\"f1f1f1\" \/><noscript><img decoding=\"async\" width=\"900\" height=\"448\" src=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image lazyload\" alt=\"Bootstrap 5 Process Steps Example\" style=\"--dominant-color: #f1f1f1;object-fit:cover;\" srcset=\"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp 900w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-300x149.webp 300w, https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-768x382.webp 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" data-has-transparency=\"false\" data-dominant-color=\"f1f1f1\" \/><\/noscript><\/a><\/figure>\n\n<h2 style=\"font-style:normal;font-weight:700;\" class=\"wp-block-post-title has-average-font-size\"><a href=\"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/\" target=\"_self\" >Bootstrap 5 Process Steps Example<\/a><\/h2>\n<\/li><\/ul><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-allele-no-spacing py-4 py-md-6 py-xl-10 is-layout-constrained wp-block-group-is-layout-constrained\" id=\"pricing\">\n<div class=\"wp-block-group alignwide is-style-allele-no-spacing is-layout-flow wp-block-group-is-layout-flow\"><div class=\"pricing-1 bg-white bg-lightX bg-light-100X py-5X py-xl-8X bsb-body\">\n  <div class=\"container\">\n    <div class=\"row gx-xl-1\">\n      <div class=\"col-12 col-xl-3 d-none d-xl-block\">\n        <div class=\"pricing-features border-top border-bottom\">\n          <ul class=\"list-group list-group-flush\">\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Use in personal projects<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Allows you to use the template(s) to create personal or commercial websites for yourself.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Customize the template files<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You can modify and customize the template files to fit your needs.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Number of websites\/domains<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"How many domains\/websites can you use the template(s)?\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Create websites for clients<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Allows you to use the template(s) to create websites for your clients and charge them as much as you want for your work.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Remove footer credit link<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Allows you to remove the footer credit link and any other reference to BootstrapBrain.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Working <a href=\"https:\/\/bootstrapbrain.com\/php-ajax-email-form\/\" class=\"text-decoration-none\">PHP\/AJAX contact form<\/a><\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"A working PHP\/Ajax contact form script that lets you receive messages from the contact form to your e-mail inbox.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Sass\/SCSS Files<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Access the Sass\/SCSS source files.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>JS Source Files<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Access the JS source files.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Premium support via Email<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You will get a response at priority in 24 hours during business days.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Forum support<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You will get forum support.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Free Updates<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You have free access to our new templates and updates during your membership. After that period, You need to purchase the membership again to get free updates. You can use our products lifetime without renewing the membership.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Access to all <strong>8<\/strong> Pro Templates<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Access all our available Pro templates and New templates released during your membership.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Access to all <strong>51<\/strong> Pro Components<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"Access all our available Pro components and New components released during your membership.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-1 d-flex align-items-center justify-content-between\">\n              <span>Use in SaaS<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You can use our products to create an application where the end-user pays a monthly\/annual subscription plan (SaaS - Software as a Service).\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n            <li class=\"list-group-item bg-blue-2 d-flex align-items-center justify-content-between\">\n              <span>Resell & Redistribute<\/span>\n              <span data-bs-toggle=\"tooltip\" data-bs-title=\"You cannot resell, redistribute, license, or sub-license any files or code found on BootstrapBrain.com without permission from BootstrapBrain.com.\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n                  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" \/>\n                  <path d=\"m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" \/>\n                <\/svg>\n              <\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n      <div class=\"col-12 col-xl-9\">\n        <div class=\"row gx-lg-1 gy-4 gy-lg-0\">\n          <div class=\"col-12 col-lg-6\">\n            <div class=\"pricing-title bg-blue-4 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <h4 class=\"m-0\">BB Startup<\/h4>\n              <p class=\"m-0 fs-7 text-secondary\">Freelancer<\/p>\n            <\/div>\n            <div class=\"pricing-amount bg-blue-2 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <h4 class=\"m-2 display-4 fw-bold\"><sup>$<\/sup>49<\/h4>\n            <\/div>\n            <div class=\"pricing-highlight bg-blue-3 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <p class=\"m-0 fs-7 text-secondary\"><strong>3<\/strong> Months Access<\/p>\n              <p class=\"m-0 fs-7 text-secondary\"><strong>8<\/strong> Pro BS Templates<\/p>\n              <p class=\"m-0 fs-7 text-secondary\"><strong>51<\/strong> Pro BS Components<\/p>\n            <\/div>\n            <div class=\"pricing-detail\">\n              <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Use in personal projects<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Customize the template files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <span>Unlimited<\/span>\n                  <span class=\"text-center text-secondary d-xl-none\">Number of websites\/domains<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Create websites for clients<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Remove footer credit link<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Working <a href=\"https:\/\/bootstrapbrain.com\/php-ajax-email-form\/\" class=\"text-decoration-none\">PHP\/AJAX contact form<\/a><\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Sass\/SCSS Files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">JS Source Files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Premium support via Email<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Forum support<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <span>3 Months<\/span>\n                  <span class=\"text-center text-secondary d-xl-none\">Free Updates<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Access to all our <strong>8<\/strong> Pro Templates<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Access to all our <strong>51<\/strong> Pro Components<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-x text-danger\" viewBox=\"0 0 16 16\">\n                    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\"><s>Use in SaaS<\/s><\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-x text-danger\" viewBox=\"0 0 16 16\">\n                    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\"><s>Resell & Redistribute<\/s><\/span>\n                <\/li>\n              <\/ul>\n            <\/div>\n            <div class=\"pricing-action bg-blue-4 p-3 border-top border-bottom d-grid\">\n              <a href=\"https:\/\/designorbital.market\/checkout?edd_action=add_to_cart&amp;download_id=11570\" class=\"btn btn-lgx btn-danger text-decoration-none\" role=\"button\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-cart\" viewBox=\"0 0 16 16\">\n                  <path d=\"M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\" \/>\n                <\/svg>\n                <span>Buy Now<\/span>\n              <\/a>\n            <\/div>\n          <\/div>\n          <div class=\"col-12 col-lg-6\">\n            <div class=\"pricing-title bg-blue-4 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <h4 class=\"m-0\">BB Club<\/h4>\n              <p class=\"m-0 fs-7 text-secondary\">Agency<\/p>\n            <\/div>\n            <div class=\"pricing-amount bg-blue-2 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <h4 class=\"m-2 display-4 fw-bold\"><sup>$<\/sup>149<\/h4>\n            <\/div>\n            <div class=\"pricing-highlight bg-blue-3 py-3 border-bottom d-flex flex-column align-items-center justify-content-center\">\n              <p class=\"m-0 fs-7 text-secondary\"><strong>12<\/strong> Months Access<\/p>\n              <p class=\"m-0 fs-7 text-secondary\"><strong>8<\/strong> Pro BS Templates<\/p>\n              <p class=\"m-0 fs-7 text-secondary\"><strong>51<\/strong> Pro BS Components<\/p>\n            <\/div>\n            <div class=\"pricing-detail\">\n              <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Use in personal projects<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Customize the template files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <span>Unlimited<\/span>\n                  <span class=\"text-center text-secondary d-xl-none\">Number of websites\/domains<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Create websites for clients<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Remove footer credit link<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Working <a href=\"https:\/\/bootstrapbrain.com\/php-ajax-email-form\/\" class=\"text-decoration-none\">PHP\/AJAX contact form<\/a><\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Sass\/SCSS Files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">JS Source Files<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Premium support via Email<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Forum support<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <span>12 Months<\/span>\n                  <span class=\"text-center text-secondary d-xl-none\">Free Updates<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Access to all our <strong>8<\/strong> Pro Templates<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Access to all our <strong>51<\/strong> Pro Components<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-1 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-check text-success\" viewBox=\"0 0 16 16\">\n                    <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\">Use in SaaS<\/span>\n                <\/li>\n                <li class=\"list-group-item bg-blue-2 d-flex flex-column align-items-center justify-content-center\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" class=\"bi bi-x text-danger\" viewBox=\"0 0 16 16\">\n                    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" \/>\n                  <\/svg>\n                  <span class=\"text-center text-secondary d-xl-none\"><s>Resell & Redistribute<\/s><\/span>\n                <\/li>\n              <\/ul>\n            <\/div>\n            <div class=\"pricing-action bg-blue-4 p-3 border-top border-bottom d-grid\">\n              <a href=\"https:\/\/designorbital.market\/checkout?edd_action=add_to_cart&amp;download_id=11573\" class=\"btn btn-lgx btn-danger text-decoration-none\" role=\"button\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-cart\" viewBox=\"0 0 16 16\">\n                  <path d=\"M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\" \/>\n                <\/svg>\n                <span>Buy Now<\/span>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In web development and application design, user interfaces often benefit from straightforward, intuitive navigation through multi-step processes. Bootstrap [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1210,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"bsb_component_category":[78,59,75,79,72],"bsb_component_tag":[61,66,65,64,62,138,63,139],"class_list":["post-1206","bsb_component","type-bsb_component","status-publish","has-post-thumbnail","hentry","bsb_component_category-blog","bsb_component_category-creative","bsb_component_category-free","bsb_component_category-magazine","bsb_component_category-portfolio","bsb_component_tag-bootstrap-5","bsb_component_tag-clean","bsb_component_tag-css3","bsb_component_tag-html5","bsb_component_tag-multipurpose","bsb_component_tag-process","bsb_component_tag-responsive","bsb_component_tag-steps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap 5 Process Steps Example - BootstrapBrain<\/title>\n<meta name=\"description\" content=\"This Bootstrap 5 process steps example is perfect for quickly demonstrating design, development, or any other process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/\",\"url\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/\",\"name\":\"Bootstrap 5 Process Steps Example - BootstrapBrain\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bootstrapbrain.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/bootstrap-5-process-steps-example-featured-jpg.webp\",\"datePublished\":\"2023-02-07T05:01:22+00:00\",\"dateModified\":\"2024-07-11T10:54:05+00:00\",\"description\":\"This Bootstrap 5 process steps example is perfect for quickly demonstrating design, development, or any other process.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bootstrapbrain.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/bootstrap-5-process-steps-example-featured-jpg.webp\",\"contentUrl\":\"https:\\\/\\\/bootstrapbrain.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/bootstrap-5-process-steps-example-featured-jpg.webp\",\"width\":900,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/bootstrap-5-process-steps-example\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bootstrapbrain.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BS Components\",\"item\":\"https:\\\/\\\/bootstrapbrain.com\\\/component\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap 5 Process Steps Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#website\",\"url\":\"https:\\\/\\\/bootstrapbrain.com\\\/\",\"name\":\"BootstrapBrain\",\"description\":\"Free Bootstrap Templates, Components and Snippets\",\"publisher\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bootstrapbrain.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#organization\",\"name\":\"BootstrapBrain\",\"url\":\"https:\\\/\\\/bootstrapbrain.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bootstrapbrain.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/bootstrapbrain-logo.svg\",\"contentUrl\":\"https:\\\/\\\/bootstrapbrain.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/bootstrapbrain-logo.svg\",\"caption\":\"BootstrapBrain\"},\"image\":{\"@id\":\"https:\\\/\\\/bootstrapbrain.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 5 Process Steps Example - BootstrapBrain","description":"This Bootstrap 5 process steps example is perfect for quickly demonstrating design, development, or any other process.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/","url":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/","name":"Bootstrap 5 Process Steps Example - BootstrapBrain","isPartOf":{"@id":"https:\/\/bootstrapbrain.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/#primaryimage"},"image":{"@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/#primaryimage"},"thumbnailUrl":"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp","datePublished":"2023-02-07T05:01:22+00:00","dateModified":"2024-07-11T10:54:05+00:00","description":"This Bootstrap 5 process steps example is perfect for quickly demonstrating design, development, or any other process.","breadcrumb":{"@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/#primaryimage","url":"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp","contentUrl":"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2023\/02\/bootstrap-5-process-steps-example-featured-jpg.webp","width":900,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/bootstrapbrain.com\/component\/bootstrap-5-process-steps-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bootstrapbrain.com\/"},{"@type":"ListItem","position":2,"name":"BS Components","item":"https:\/\/bootstrapbrain.com\/component\/"},{"@type":"ListItem","position":3,"name":"Bootstrap 5 Process Steps Example"}]},{"@type":"WebSite","@id":"https:\/\/bootstrapbrain.com\/#website","url":"https:\/\/bootstrapbrain.com\/","name":"BootstrapBrain","description":"Free Bootstrap Templates, Components and Snippets","publisher":{"@id":"https:\/\/bootstrapbrain.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bootstrapbrain.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bootstrapbrain.com\/#organization","name":"BootstrapBrain","url":"https:\/\/bootstrapbrain.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bootstrapbrain.com\/#\/schema\/logo\/image\/","url":"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2022\/11\/bootstrapbrain-logo.svg","contentUrl":"https:\/\/bootstrapbrain.com\/wp-content\/uploads\/2022\/11\/bootstrapbrain-logo.svg","caption":"BootstrapBrain"},"image":{"@id":"https:\/\/bootstrapbrain.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/bsb_component\/1206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/bsb_component"}],"about":[{"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/types\/bsb_component"}],"author":[{"embeddable":true,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/comments?post=1206"}],"version-history":[{"count":0,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/bsb_component\/1206\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/media\/1210"}],"wp:attachment":[{"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/media?parent=1206"}],"wp:term":[{"taxonomy":"bsb_component_category","embeddable":true,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/bsb_component_category?post=1206"},{"taxonomy":"bsb_component_tag","embeddable":true,"href":"https:\/\/bootstrapbrain.com\/wp-json\/wp\/v2\/bsb_component_tag?post=1206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}