How to integrate bootstrap components into my theme

Store Design
1

hi guys

I try desperately to implement bootstrap components into my theme, but even after clean and limit CSS code used for specific HTML code, it impact my homepage. look for example; in my theme I could add custom HTML section (via visual editor), so I added this code :

and look, the image banner is not in wide width anymore, without html/css code imported, I got this : https://iteraktive.com/

and with html/css code imported, I got this : https://moduulaar.com/

could you please / do you know how to solve it?? thanks a lot for your help

2

Hi,

I’m not quite sure what you are looking for.

However, the bootstrap also uses the container class.

Please add the code below to the CSS part.

.container {
    max-width: 100% !important;
}

The code above will force the maximum width to 100%.

Hope it helps.

Thanks.

3

Hi @ite23 ,

Looks like you’re on the right track…

You may want to first check that bootstrap is properly integrated.
Make sure:

  • Bootsrap is properly placed in your ‘theme.liquid’
  • CDN link is placed in ‘head’ above other css files
  • Bootstrap JS is placed just before the ‘body close tag’

Once all this is sorted, test bootstrap by adding bootstrap classes to certain elements.

Hope that helps

4

Hi @ite23 ,

We have checked your code, we found that the bootstrap js CDN link is missing so please add the bootstrap js CDN link inside the header or body.

Hope it’ll help

All the best,

Team CedCommerce

1 Like
5

hi guys

first THANKS A LOT for your replies, so let me recap :

  • it works well with the code provided by @DavidEKim by specifing container max-width: 100%

however guys I need to understand few things, because :

  • @Farouk-dev and @Cedcommerce you ask to add the JS bootstrap file in theme.liquid, but atm, I only added the code I mention in my first post, where there is only the css boostrap file provided :

so I have to obviously add JS file link ? or it is OK like that ?

also, @Cedcommerce you mentions bootstrap files with version 3.4.1, is it OK if for example I try to use bootstrap version 5 ?

THANKS a lot guys, really helpful inputs

6

another issue I meet, is that I cleaned a css file (to only have ID/Classes used by the html code), and I got this message in shopify editor when I fill it :

Settting ‘custom_css’ can’t include Liquid syntax (‘{{’, ‘}}’, ‘{%’ or ‘%}’) without valid dynamic sources.

the CSS code is this one :

@charset 'UTF-8';@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,600,700,800&display=swap);:root{--blue:#008aff;--indigo:#6e00ff;--purple:#510fa8;--pink:#f074ad;--red:#f25767;--orange:#ffbe3d;--yellow:#ffc431;--green:#5cc9a7;--teal:#50b5ff;--cyan:#4bd6e5;--white:#fff;--gray:#718096;--gray-dark:#2d3748;--primary:#008aff;--secondary:#eaecf3;--success:#5cc9a7;--info:#50b5ff;--warning:#ffbe3d;--danger:#f25767;--light:#eaecf3;--dark:#171347;--neutral:#fff;--white:#fff;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(31,45,61,0)}section{display:block}body{font-family:'Nunito Sans',sans-serif;font-size:1rem;font-weight:400;line-height:1.7;margin:0;text-align:left;color:#718096;background-color:#fff}[tabindex='-1']:focus:not(:focus-visible){outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.66667rem}p{margin-top:0;margin-bottom:1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}[type=button],[type=reset],[type=submit]{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:600;line-height:1.5;margin-bottom:.66667rem;color:#152c5b}.h1,h1{font-size:2.5rem}@media (max-width:1200px){.h1,h1{font-size:calc(1.375rem + 1.5vw)}}.h2,h2{font-size:2rem}@media (max-width:1200px){.h2,h2{font-size:calc(1.325rem + .9vw)}}.h3,h3{font-size:1.75rem}@media (max-width:1200px){.h3,h3{font-size:calc(1.3rem + .6vw)}}.h4,h4{font-size:1.5rem}@media (max-width:1200px){.h4,h4{font-size:calc(1.275rem + .3vw)}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.125rem;font-weight:300}.display-1{font-size:6rem;font-weight:700;line-height:1.3}@media (max-width:1200px){.display-1{font-size:calc(1.725rem + 5.7vw)}}.display-2{font-size:5rem;font-weight:700;line-height:1.3}@media (max-width:1200px){.display-2{font-size:calc(1.625rem + 4.5vw)}}.display-3{font-size:4rem;font-weight:700;line-height:1.3}@media (max-width:1200px){.display-3{font-size:calc(1.525rem + 3.3vw)}}.display-4{font-size:3rem;font-weight:700;line-height:1.3}@media (max-width:1200px){.display-4{font-size:calc(1.425rem + 2.1vw)}}.img-fluid{max-width:100%;height:auto}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid,.container-lg,.container-md{width:100%;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container,.container-md{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md{max-width:1140px}}.row{display:flex;margin-right:-15px;margin-left:-15px;flex-wrap:wrap}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{max-width:100%;flex-basis:0;flex-grow:1}.col-1{max-width:8.33333%;flex:0 0 8.33333%}.col-2{max-width:16.66667%;flex:0 0 16.66667%}.col-3{max-width:25%;flex:0 0 25%}.col-4{max-width:33.33333%;flex:0 0 33.33333%}.col-5{max-width:41.66667%;flex:0 0 41.66667%}.col-6{max-width:50%;flex:0 0 50%}.col-7{max-width:58.33333%;flex:0 0 58.33333%}.col-8{max-width:66.66667%;flex:0 0 66.66667%}.col-9{max-width:75%;flex:0 0 75%}.col-10{max-width:83.33333%;flex:0 0 83.33333%}.col-11{max-width:91.66667%;flex:0 0 91.66667%}.col-12{max-width:100%;flex:0 0 100%}@media (min-width:768px){.col-md{max-width:100%;flex-basis:0;flex-grow:1}.col-md-1{max-width:8.33333%;flex:0 0 8.33333%}.col-md-2{max-width:16.66667%;flex:0 0 16.66667%}.col-md-3{max-width:25%;flex:0 0 25%}.col-md-4{max-width:33.33333%;flex:0 0 33.33333%}.col-md-5{max-width:41.66667%;flex:0 0 41.66667%}.col-md-6{max-width:50%;flex:0 0 50%}.col-md-7{max-width:58.33333%;flex:0 0 58.33333%}.col-md-8{max-width:66.66667%;flex:0 0 66.66667%}.col-md-9{max-width:75%;flex:0 0 75%}.col-md-10{max-width:83.33333%;flex:0 0 83.33333%}.col-md-11{max-width:91.66667%;flex:0 0 91.66667%}.col-md-12{max-width:100%;flex:0 0 100%}}@media (min-width:992px){.col-lg{max-width:100%;flex-basis:0;flex-grow:1}.col-lg-1{max-width:8.33333%;flex:0 0 8.33333%}.col-lg-2{max-width:16.66667%;flex:0 0 16.66667%}.col-lg-3{max-width:25%;flex:0 0 25%}.col-lg-4{max-width:33.33333%;flex:0 0 33.33333%}.col-lg-5{max-width:41.66667%;flex:0 0 41.66667%}.col-lg-6{max-width:50%;flex:0 0 50%}.col-lg-7{max-width:58.33333%;flex:0 0 58.33333%}.col-lg-8{max-width:66.66667%;flex:0 0 66.66667%}.col-lg-9{max-width:75%;flex:0 0 75%}.col-lg-10{max-width:83.33333%;flex:0 0 83.33333%}.col-lg-11{max-width:91.66667%;flex:0 0 91.66667%}.col-lg-12{max-width:100%;flex:0 0 100%}}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;border:1px solid #eaecf3;border-radius:.75rem;background-color:#fff;background-clip:border-box}.card-body{min-height:1px;padding:1.75rem;color:#718096;flex:1 1 auto}.card-title{margin-bottom:1.25rem}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.75rem}.card-img{width:100%;flex-shrink:0}.card-img{border-top-left-radius:calc(.75rem - 1px);border-top-right-radius:calc(.75rem - 1px)}.card-img{border-bottom-right-radius:calc(.75rem - 1px);border-bottom-left-radius:calc(.75rem - 1px)}.badge{font-size:80%;font-weight:700;line-height:1;display:inline-block;padding:.35rem .5rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;text-align:center;vertical-align:baseline;white-space:nowrap;border-radius:.375rem}@media (prefers-reduced-motion:reduce){.badge{transition:none}}.badge:empty{display:none}.badge-pill{padding-right:.875em;padding-left:.875em;border-radius:50rem}.badge-secondary{color:#273444;background-color:#eaecf3}.badge-success{color:#fff;background-color:#5cc9a7}.badge-white{color:#273444;background-color:#fff}@keyframes progress-bar-stripes{from{background-position:.5rem 0}to{background-position:0 0}}@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.bg-secondary{background-color:#eaecf3!important}.bg-success{background-color:#5cc9a7!important}.bg-white{background-color:#fff!important}.bg-white{background-color:#fff!important}.flex-row{flex-direction:row!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.justify-content-center{justify-content:center!important}.align-items-center{align-items:center!important}.align-content-center{align-content:center!important}@media (min-width:768px){.flex-md-row{flex-direction:row!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.justify-content-md-center{justify-content:center!important}.align-items-md-center{align-items:center!important}.align-content-md-center{align-content:center!important}}@media (min-width:992px){.flex-lg-row{flex-direction:row!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.justify-content-lg-center{justify-content:center!important}.align-items-lg-center{align-items:center!important}.align-content-lg-center{align-content:center!important}}.overflow-hidden{overflow:hidden!important}.position-fixed{position:fixed!important}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;z-index:1020;top:0}}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-10{height:10%!important}.h-15{height:15%!important}.h-80{height:80%!important}.h-90{height:90%!important}.h-110{height:110%!important}.h-120{height:120%!important}.h-130{height:130%!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.mt-6{margin-top:4.5rem!important}.mb-6{margin-bottom:4.5rem!important}.mt-7{margin-top:6rem!important}.mb-7{margin-bottom:6rem!important}.mt-8{margin-top:7.5rem!important}.mb-8{margin-bottom:7.5rem!important}.mt-9{margin-top:9rem!important}.mb-9{margin-bottom:9rem!important}.mt-10{margin-top:10.5rem!important}.mb-10{margin-bottom:10.5rem!important}.mt-17{margin-top:21rem!important}.mb-17{margin-bottom:21rem!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.px-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.px-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.px-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3{padding-top:1rem!important}.px-3{padding-right:1rem!important}.pb-3{padding-bottom:1rem!important}.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4{padding-top:1.5rem!important}.px-4{padding-right:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5{padding-top:3rem!important}.px-5{padding-right:3rem!important}.pb-5{padding-bottom:3rem!important}.px-5{padding-left:3rem!important}.p-6{padding:4.5rem!important}.pt-6{padding-top:4.5rem!important}.px-6{padding-right:4.5rem!important}.pb-6{padding-bottom:4.5rem!important}.px-6{padding-left:4.5rem!important}.p-7{padding:6rem!important}.pt-7{padding-top:6rem!important}.px-7{padding-right:6rem!important}.pb-7{padding-bottom:6rem!important}.px-7{padding-left:6rem!important}.p-8{padding:7.5rem!important}.pt-8{padding-top:7.5rem!important}.px-8{padding-right:7.5rem!important}.pb-8{padding-bottom:7.5rem!important}.px-8{padding-left:7.5rem!important}.p-9{padding:9rem!important}.pt-9{padding-top:9rem!important}.px-9{padding-right:9rem!important}.pb-9{padding-bottom:9rem!important}.px-9{padding-left:9rem!important}.p-10{padding:10.5rem!important}.pt-10{padding-top:10.5rem!important}.px-10{padding-right:10.5rem!important}.pb-10{padding-bottom:10.5rem!important}.px-10{padding-left:10.5rem!important}.p-17{padding:21rem!important}.pt-17{padding-top:21rem!important}.px-17{padding-right:21rem!important}.pb-17{padding-bottom:21rem!important}.px-17{padding-left:21rem!important}@media (min-width:768px){.mt-md-0{margin-top:0!important}.mb-md-0{margin-bottom:0!important}.mt-md-1{margin-top:.25rem!important}.mb-md-1{margin-bottom:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mb-md-2{margin-bottom:.5rem!important}.mt-md-3{margin-top:1rem!important}.mb-md-3{margin-bottom:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mb-md-5{margin-bottom:3rem!important}.mt-md-6{margin-top:4.5rem!important}.mb-md-6{margin-bottom:4.5rem!important}.mt-md-7{margin-top:6rem!important}.mb-md-7{margin-bottom:6rem!important}.mt-md-8{margin-top:7.5rem!important}.mb-md-8{margin-bottom:7.5rem!important}.mt-md-9{margin-top:9rem!important}.mb-md-9{margin-bottom:9rem!important}.mt-md-10{margin-top:10.5rem!important}.mb-md-10{margin-bottom:10.5rem!important}.mt-md-17{margin-top:21rem!important}.mb-md-17{margin-bottom:21rem!important}.p-md-0{padding:0!important}.pt-md-0{padding-top:0!important}.px-md-0{padding-right:0!important}.pb-md-0{padding-bottom:0!important}.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1{padding-top:.25rem!important}.px-md-1{padding-right:.25rem!important}.pb-md-1{padding-bottom:.25rem!important}.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2{padding-top:.5rem!important}.px-md-2{padding-right:.5rem!important}.pb-md-2{padding-bottom:.5rem!important}.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3{padding-top:1rem!important}.px-md-3{padding-right:1rem!important}.pb-md-3{padding-bottom:1rem!important}.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4{padding-top:1.5rem!important}.px-md-4{padding-right:1.5rem!important}.pb-md-4{padding-bottom:1.5rem!important}.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5{padding-top:3rem!important}.px-md-5{padding-right:3rem!important}.pb-md-5{padding-bottom:3rem!important}.px-md-5{padding-left:3rem!important}.p-md-6{padding:4.5rem!important}.pt-md-6{padding-top:4.5rem!important}.px-md-6{padding-right:4.5rem!important}.pb-md-6{padding-bottom:4.5rem!important}.px-md-6{padding-left:4.5rem!important}.p-md-7{padding:6rem!important}.pt-md-7{padding-top:6rem!important}.px-md-7{padding-right:6rem!important}.pb-md-7{padding-bottom:6rem!important}.px-md-7{padding-left:6rem!important}.p-md-8{padding:7.5rem!important}.pt-md-8{padding-top:7.5rem!important}.px-md-8{padding-right:7.5rem!important}.pb-md-8{padding-bottom:7.5rem!important}.px-md-8{padding-left:7.5rem!important}.p-md-9{padding:9rem!important}.pt-md-9{padding-top:9rem!important}.px-md-9{padding-right:9rem!important}.pb-md-9{padding-bottom:9rem!important}.px-md-9{padding-left:9rem!important}.p-md-10{padding:10.5rem!important}.pt-md-10{padding-top:10.5rem!important}.px-md-10{padding-right:10.5rem!important}.pb-md-10{padding-bottom:10.5rem!important}.px-md-10{padding-left:10.5rem!important}.p-md-17{padding:21rem!important}.pt-md-17{padding-top:21rem!important}.px-md-17{padding-right:21rem!important}.pb-md-17{padding-bottom:21rem!important}.px-md-17{padding-left:21rem!important}}@media (min-width:992px){.mt-lg-0{margin-top:0!important}.mb-lg-0{margin-bottom:0!important}.mt-lg-1{margin-top:.25rem!important}.mb-lg-1{margin-bottom:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mb-lg-3{margin-bottom:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mb-lg-5{margin-bottom:3rem!important}.mt-lg-6{margin-top:4.5rem!important}.mb-lg-6{margin-bottom:4.5rem!important}.mt-lg-7{margin-top:6rem!important}.mb-lg-7{margin-bottom:6rem!important}.mt-lg-8{margin-top:7.5rem!important}.mb-lg-8{margin-bottom:7.5rem!important}.mt-lg-9{margin-top:9rem!important}.mb-lg-9{margin-bottom:9rem!important}.mt-lg-10{margin-top:10.5rem!important}.mb-lg-10{margin-bottom:10.5rem!important}.mt-lg-17{margin-top:21rem!important}.mb-lg-17{margin-bottom:21rem!important}.p-lg-0{padding:0!important}.pt-lg-0{padding-top:0!important}.px-lg-0{padding-right:0!important}.pb-lg-0{padding-bottom:0!important}.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1{padding-top:.25rem!important}.px-lg-1{padding-right:.25rem!important}.pb-lg-1{padding-bottom:.25rem!important}.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2{padding-top:.5rem!important}.px-lg-2{padding-right:.5rem!important}.pb-lg-2{padding-bottom:.5rem!important}.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3{padding-top:1rem!important}.px-lg-3{padding-right:1rem!important}.pb-lg-3{padding-bottom:1rem!important}.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4{padding-top:1.5rem!important}.px-lg-4{padding-right:1.5rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5{padding-top:3rem!important}.px-lg-5{padding-right:3rem!important}.pb-lg-5{padding-bottom:3rem!important}.px-lg-5{padding-left:3rem!important}.p-lg-6{padding:4.5rem!important}.pt-lg-6{padding-top:4.5rem!important}.px-lg-6{padding-right:4.5rem!important}.pb-lg-6{padding-bottom:4.5rem!important}.px-lg-6{padding-left:4.5rem!important}.p-lg-7{padding:6rem!important}.pt-lg-7{padding-top:6rem!important}.px-lg-7{padding-right:6rem!important}.pb-lg-7{padding-bottom:6rem!important}.px-lg-7{padding-left:6rem!important}.p-lg-8{padding:7.5rem!important}.pt-lg-8{padding-top:7.5rem!important}.px-lg-8{padding-right:7.5rem!important}.pb-lg-8{padding-bottom:7.5rem!important}.px-lg-8{padding-left:7.5rem!important}.p-lg-9{padding:9rem!important}.pt-lg-9{padding-top:9rem!important}.px-lg-9{padding-right:9rem!important}.pb-lg-9{padding-bottom:9rem!important}.px-lg-9{padding-left:9rem!important}.p-lg-10{padding:10.5rem!important}.pt-lg-10{padding-top:10.5rem!important}.px-lg-10{padding-right:10.5rem!important}.pb-lg-10{padding-bottom:10.5rem!important}.px-lg-10{padding-left:10.5rem!important}.p-lg-17{padding:21rem!important}.pt-lg-17{padding-top:21rem!important}.px-lg-17{padding-right:21rem!important}.pb-lg-17{padding-bottom:21rem!important}.px-lg-17{padding-left:21rem!important}}.text-justify{text-align:justify!important}.text-center{text-align:center!important}@media (min-width:768px){.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-center{text-align:center!important}}.text-white{color:#fff!important}.text-secondary{color:#eaecf3!important}.text-success{color:#5cc9a7!important}.text-white{color:#fff!important}.text-body{color:#718096!important}.text-muted{color:#718096!important}.text-white-50{color:rgba(255,255,255,.5)!important}@media print{*,::after,::before{box-shadow:none!important;text-shadow:none!important}img{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.badge{border:1px solid #1f2d3d}}.bg-soft-secondary{background-color:#fcfdfe}.bg-soft-success{background-color:#ebf9f4}.bg-soft-white{background-color:#fff}.bg-white{background-color:#fff!important}.bg-section-secondary{background-color:#fafbfe!important}.bg-text{font-size:40rem;font-weight:700;position:absolute;top:50%;left:0;transform:translate(0,-50%);white-space:nowrap;text-transform:uppercase;color:rgba(255,255,255,.2)}.img-bg:after{position:absolute;z-index:1;top:-168px;left:31px;width:783px;height:725px;content:'';background:none no-repeat 50%;background-image:none;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg width=\'783\' height=\'726\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M606.14 725.179c144.64-.87 225.447-587.194 144.64-694.046-73.915-97.74-579.852 50.733-716.756 222.443-12.763 16.009-22.32 32.22-28.019 48.451-66.83 190.337 442.822 424.098 600.136 423.152z\' fill=\'%23eaecf3\' fill-rule=\'evenodd\'/%3E%3C/svg%3E');background-size:auto auto;background-size:contain}.img-bg img{position:relative;z-index:2}.img-center{display:block;margin-right:auto;margin-left:auto}.center{left:50%;transform:translateX(-50%)}[class*=shadow]{transition:all .2s ease}.text-lg{font-size:1.25rem!important}.lh-100{line-height:1!important}.lh-110{line-height:1.1!important}.lh-120{line-height:1.2!important}.lh-130{line-height:1.3!important}.lh-140{line-height:1.4!important}.lh-150{line-height:1.5!important}.lh-160{line-height:1.6!important}.lh-170{line-height:1.7!important}.lh-180{line-height:1.8!important}.lh-190{line-height:1.9!important}.lh-200{line-height:2!important}:root{--primary-dark:#006ecc;--primary-light:#33a1ff;--secondary-dark:#cacfe0;--secondary-light:white;--success-dark:#3cb690;--success-light:#82d6bc;--info-dark:#1d9fff;--info-light:#83cbff;--warning-dark:#ffad0a;--warning-light:#ffcf70;--danger-dark:#ee283c;--danger-light:#f68692;--light-dark:#cacfe0;--light-light:white;--dark-dark:#0a081f;--dark-light:#241e6f;--neutral-dark:#e6e6e6;--neutral-light:white;--white-dark:#e6e6e6;--white-light:white}body,html{overflow-x:hidden}svg{overflow:hidden;vertical-align:middle}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.img-fluid{width:100%}}[class*=alert-outline-]{border-right:1px solid}.badge{display:inline;text-transform:none}.badge svg{margin-right:.5rem}.badge-md{padding:.65em 1em}.badge-lg{padding:.85em 1.375em}.badge-soft-secondary{color:#eaecf3;background-color:#fbfbfd}.badge-soft-secondary[href]:focus,.badge-soft-secondary[href]:hover{text-decoration:none;color:#eaecf3;background-color:#eaeaf5}.badge-soft-success{color:#5cc9a7;background-color:#def4ed}.badge-soft-success[href]:focus,.badge-soft-success[href]:hover{text-decoration:none;color:#5cc9a7;background-color:#cbeee3}.badge-soft-white{color:#fff;background-color:#fff}.badge-soft-white[href]:focus,.badge-soft-white[href]:hover{text-decoration:none;color:#fff;background-color:#f2f2f2}.card{position:relative;margin-bottom:30px;box-shadow:0 0 1.25rem rgba(31,45,61,.05)}.card-fluid{height:calc(100% - 30px)}.card-img-bg{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .2s ease;border-radius:.75rem;background-size:cover;-webkit-backface-visibility:hidden}@media (prefers-reduced-motion:reduce){.card-img-bg{transition:none}}.card-img-bg~.card-body{position:relative}.card:hover .card-img-bg{transform:scale(1.1)}.card .card-image{min-height:1px}@keyframes show-dropdown{0%{transition:all .3s ease;transform:translateX(0) translateY(-3px) scale(.97);opacity:0}100%{transform:translateX(0) translateY(-3px) scale(1);opacity:1}}@keyframes hide-dropdown{from{transition:all .3s ease;transform:translateX(0) translateY(-3px) scale(1);opacity:1}to{transform:translateX(0) translateY(-3px) scale(.97);opacity:0}}.icon svg{font-size:1.71429rem}.icon:not(.icon-shape) svg{width:3rem;height:3rem}.icon+.icon-text{width:calc(100% - 3rem - 1);padding-left:1rem}.icon-lg svg{font-size:2.28571rem}.icon-lg:not(.icon-shape) svg{width:4rem;height:4rem}.icon-lg+.icon-text{width:calc(100% - 4rem - 1)}.icon-secondary{color:#eaecf3;background-color:#fbfbfd}.icon-success{color:#5cc9a7;background-color:#def4ed}.icon-white{color:#fff;background-color:#fff}@keyframes show-navbar-collapse{0%{transform:translateX(30px);opacity:0}100%{transform:translateX(0);opacity:1}}.h1,.h2,.h3,h1,h2,h3{font-weight:600}.h4,.h5,.h6,h4,h5,h6{font-weight:600}.link{transition:all .2s ease}@media (prefers-reduced-motion:reduce){.link{transition:none}}[class*=link-underline-]{position:relative;padding-bottom:8px}[class*=link-underline-]:after{position:absolute;bottom:0;left:0;width:100%;height:3px;content:'';transition:all .2s cubic-bezier(.77,0,.2,2.25);border-radius:50rem}@media (prefers-reduced-motion:reduce){[class*=link-underline-]:after{transition:none}}[class*=link-underline-]:hover:after{left:-4px;width:calc(100% + 8px)}.feather{width:1em;height:1em;fill:none;stroke:currentcolor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.svg-text{display:inline-flex;align-items:center}.svg-text svg{position:relative}@keyframes show-navbar-collapse{0%{transform:translateX(30px);opacity:0}100%{transform:translateX(0);opacity:1}}section{background-color:#fff}.slice{position:relative;padding-top:4rem;padding-bottom:4rem}.slice-lg{padding-top:6rem;padding-bottom:6rem}.slice:not(.border-top):not(.border-bottom):not(.delimiter-bottom):not([class*=bg-]):not(.section-rotate)+.slice:not(.border-top):not(.border-bottom):not(.delimiter-top):not([class*=bg-]){padding-top:0}
7

Hello, @ite23

You can include these CDNs with bootstrap 5

All the best,
Team CedCommerce

8

hello, thanks for your reply sir, but the problem is that if I add these bootstrap file links to the HTML custom code, it impacts very badly the menu header.. :disappointed_face:

without the link to bootstrap files, the default theme menu is like that :

Screenshot 2022-08-05 at 01.35.50.png
Screenshot 2022-08-05 at 01.35.50.png878×242 36.1 KB

and if I add bootstrap files link the menu is now like that :disappointed_face: :

Screenshot 2022-08-05 at 01.36.32.png
Screenshot 2022-08-05 at 01.36.32.png660×250 23.4 KB

(you could see the current change here : https://iteraktive.com/)

(and without the bootstrap files link the default menu : https://interaktible.com/)

do you know how I can fix it ? thanks a lot

d

9

hu ? @Shopify_77 why I cant delete / modify my post ? I found what was the issue, so…? can I delete my previous post ?