Large Bootstrap Carousel

This is a responsive Bootstrap carousel example that fills any container and scales beautifully from large screen down to cell phone screen. This carousel is using only bootstrap out of the box styling with no extras.



HTML Code


<%--Begin carousel container--%>
    <div style="border: 2px solid #033769; border-radius: 4px; overflow:hidden">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover">
            <!-- Indicators -->
            <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>
           <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/10-15-16-carousel/earth.jpg" alt="The Earth" />
                    <%--<div class="container">--%>
                    <div class="carousel-caption">
                        <h3>The Earth</h3>
                        <p>The world we live in.</p>
                        <a href="#" class="btn btn-default btn-xs">Learn more</a>
                    </div>
                    <%--</div>--%>
                </div>
                <div class="item">
                    <img src="images/10-15-16-carousel/moon.jpg" alt="The Moon" />
                    <%--<div class="container">--%>
                    <div class="carousel-caption">
                        <h3>The Moon</h3>
                        <p>Our nearest neighbor.</p>
                        <a href="#" class="btn btn-default btn-xs">Learn more</a>
                    </div>
                    <%--</div>--%>
                </div>
                <div class="item">
                    <img src="images/10-15-16-carousel/sun.jpg" alt="The Sun" />
                    <%--<div class="container">--%>
                    <div class="carousel-caption">
                        <p style="font-size: 20px; font-weight: bold;">The Sun</h3>
                        <p>The center of our solar system.</p>
                        <h3>Learn more</a>
                    </div>
                    <%--</div>--%>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
 <%--end carousel container--%>

            

© 2018 - KRobbins.com

If attribution for any resource used on this or any page on krobbins.com is incorrect or missing, please check the about page. If there is still an error, please contact me to correct it.