<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="section-white visible-md visible-lg ">
<div class="container ">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This is a fan made snippet for expressing gratitude to the creator of vocaloid and his team
Hideki Kenmochi (Kenmochi Hideki)
Hideki Kenmochi
Known as "the father of VOCALOID" is the SA Group Team leader of YAMAHA Sound Technology Development Center. In 2000 he began the first developments with a team at the Pompeu Fabra University in Spain. VOCALOID was not originally intended to be a commercial product. He continues to be an important figure with the development of the VOCALOID software
Vocaloid - Miku Hatsune
Rin and Len Kagamine
The development of the Kagamines began when Crypton formulated the concept of making a pair of female and male voicebanks. The first idea was for two voices of a girl and her mirror image of the opposite gender, just like twins
Kaito Shion
Info from http://vocaloid.wikia.com/
She was the first release for Crypton's VOCALOID Character Vocal Series, the third Japanese VOCALOID, and the seventh VOCALOID to have been created overall. She is considered the most popular and well known VOCALOID and the first to become a pop idol.
Death should not have come of thee
English Fandub
Triple baka
Luka Megurine
Vocaloid fans tried to assign an item to Luka as they had done with past VOCALOIDs, sparking heated debate over the choice. Tako Luka marked the end of the "Item War" system where as items were assigned to VOCALOIDs based on Internet Memes. Despite the Internet Meme's popularity, she is often seen with a tuna fish. This is a result of comparing the Japanese word for "tuna" with her last name.
Worlds end dancehall
Romeo and Cinderella
Butterfly on your Right Shoulder
Magnet Live
Canterella
<a href="http://bootsnipp.com/snippets/featured/understanding-responsive-utilities" target="_blank">See my other example which uses different size/cropped images depending on screen size.</a>
</p>
<p class="text-right">
<a href="http://bootsnipp.com/iframe/q8xRg" target="_blank">Best viewed full screen</a><br>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fq8xRg" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
</div>
<h2>Carousel is visible on medium and large screens.</h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://img03.deviantart.net/ad49/i/2015/260/7/f/miku_hatsune_v4x_beta_download___by_imocreator-d99wz93.jpg" alt="...">
<div class="carousel-caption">
<h2>Miku 1</h2>
</div>
</div>
<div class="item">
<img src="http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" alt="...">
<div class="carousel-caption">
<h2>Luka 2</h2>
</div>
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/originals/8d/db/27/8ddb2759a7abff06bfc0119db245e623.jpg" alt="...">
<div class="carousel-caption">
<h2>Rin&Len 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</section>
<hr>
<div class="container visible-sm visible-xs">
<div class="row">
<h2>Only images (responsive) are visible on small and x-small screens.</h2>
<p>Carousel is hidden from small screens.</p>
<div class="col-md-4">
<h4>Item 1 </h4><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<h4>Item 2 </h4><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<h4>Item 3</h4><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
