How do I use this Bootstrap snippet?

Load Bootstrap 4.1.1, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 4.1.1 and inherits its responsive grid and components.

Bootstrap html snippet. bs4 3d slider vue js

HTML code

Clean, semantic HTML that powers this Bootstrap 4.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

    <script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
    
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
    
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/carousel-3d.common.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-carousel.min.js"></script>

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
    <div id="carousel3d">
        <carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000">
            <slide :index="0">
                <span class="title">Web Development</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="1">

                <span class="title">Web Design</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="2">
                <span class="title">You know</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="3">
                <span class="title">You know</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="4">
                <span class="title">You know</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="5">
                <span class="title">You know</span>
                <a href="#">Click Here</a>
            </slide>
            <slide :index="6">
                <span class="title">You know</span>
                <a href="#">Click Here</a>
            </slide>

        </carousel-3d>
    </div>
    <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js'></script>
    <script src='https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js'></script>
    <script>
        new Vue({
                el: '#carousel3d',
                data: {
                    slides: 7
                },
                components: {
                    'carousel-3d': Carousel3d.Carousel3d,
                    'slide': Carousel3d.Slide
                }
            })
            //# sourceURL=pen.js
    </script>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 4.1.1 to keep the design, spacing, and responsiveness consistent.

body{
background:#eee;
}        
#carousel3d .carousel-3d-slide {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            text-align: center;
            background-color: #fff;
            padding: 10px;
            -webkit-transition: all .4s;
            transition: all .4s;
        }
        
        #carousel3d .carousel-3d-slide.current {
            background-color: #333;
            color: #fff;
        }
        
        #carousel3d .carousel-3d-slide.current span {
            font-size: 20px;
            font-weight: 500;
        }