Adding Bootstrap to Shopify is a great way to add some extra style and functionality to your store. Bootstrap is a front-end framework that provides a number of reusable components for building web applications.
Shopify’s theme system is based on the Liquid templating language, which makes it easy to add Bootstrap components to your shop’s pages. In this article, we’ll show you how to add Bootstrap to Shopify using the BootstrapCDN.
BootstrapCDN is a content delivery network that provides access to the latest versions of Bootstrap. To use BootstrapCDN, simply include the following code in the < head > section of your shop’s pages:
You can also include other Bootstrap components using BootstrapCDN. For example, to add theBootstrap carousel component, you would include the following code:
< script src="https://stackpath.3/js/bootstrap.js">< /script >
< script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/carousel.js">< /script >
Once you’ve included the necessary code, you can start using Bootstrap components in your shop’s pages. For example, to create a carousel, you would use the following code:
< div id="myCarousel" class="carousel slide" data-ride="carousel" >
< ol class="carousel-indicators" >
< li data-target="#myCarousel" data-slide-to="0" class="active" >< /li >
< li data-target="#myCarousel" data-slide-to="1" >< /li >
< li data-target="#myCarousel" data-slide-to="2" >< /li >
< /ol >
< !-- Wrapper for slides -- >
< div class="carousel-inner" >
< div class="item active" > < !--First Slide-- > < !--Add image here-- > < /div>
< div class="item" > < !--Second Slide-- > < !--Add image here-- > < /div >
< div class="item" > < !--Third Slide-- > < !--Add image here-- > < /div >
< /div >
< !-- Left and right controls -- > < --Add prev and next buttons here-- > < /div >
