<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 ---------->
<div class="container">
<div class="row">
<!--Start First Column-->
<div class="col-md-4 no-image"><!--Delete the no-image class from your code, all css in this example is merely to beautify the results on this page, and is not required for the modal carousels to work-->
<!-- The size of your images determines the size of the modal, set them to whatever you like-->
<button class="btn btn-block btn-info" data-toggle="modal" data-target=".firstModal">click me</button><!--Note the data-toggle and data-target name-->
</div>
<div class="modal fade firstModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><!--This class matches the button target-->
<div class="modal-dialog modal-lg"><!--This will also affect your modal size, look into it-->
<div class="modal-content">
<div id="carousel-controls" class="carousel slide" data-ride="carousel"><!--This calls the controls for the carousel, note the id-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=First-Slide" alt="...">
<div class="carousel-caption">
insert a caption for your images here, if you want
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/ffb8bb/000&text=Second-Slide" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/ccc033/000&text=Third-Slide" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-controls" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-controls" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<!--Start Second Column-->
<div class="col-md-4 no-image">
<!--Note the different target class and id names, these are what distinguishes this modal carousel from the first-->
<button class="btn btn-block btn-info" data-toggle="modal" data-target=".secondModal">click me</button><!--Target Here-->
</div>
<div class="modal fade secondModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><!--Should Match Class Here-->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-controls-2" class="carousel slide" data-ride="carousel"><!--id here should match href in controls section-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1200x600/BB8CFF/000&text=First-Slide" alt="...">
<div class="carousel-caption">
See,this carousel is independent and different than the other
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/FF8C97/000&text=Second-Slide" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/D1FF8C/000&text=Third-Slide" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-controls-2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-controls-2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<!--Start Third Column-->
<div class="col-md-4 thumb">
<!--Note the different target class and id names, these are what distinguishes this modal carousel from the first-->
<div class="text-center align">
<img class="img-circle" src="http://placehold.it/250x250/8CFFF3/BA8CFF&text=Fancy!" alt="...">
<button class="btn btn-block btn-info third-btn" data-toggle="modal" data-target=".thirdModal">click me</button><!--Target Here-->
</div>
</div>
<div class="modal fade thirdModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><!--Should Match Class Here-->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-controls-3" class="carousel slide" data-ride="carousel"><!--id here should match href in controls section-->
<!-- Indicators if you like them -->
<ol class="carousel-indicators">
<li data-target="#carousel-controls-3" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-controls-3" data-slide-to="1"></li>
<li data-target="#carousel-controls-3" data-slide-to="2"></li>
<li data-target="#carousel-controls-3" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-rounded" src="http://placehold.it/1200x600/BB8CFF/000&text=First-Slide" alt="...">
<div class="carousel-caption">
Let's Experiment with this carousel a little.
</div>
</div>
<div class="item text-center">
<div class="row">
<div class="col-md-4">
<img class="img-responsive img-circle" src="http://placehold.it/300x300/57A8EB/000&text=Second-Slide" alt="...">
</div>
<div class="col-md-4">
<img class="img-responsive img-circle" src="http://placehold.it/300x300/E457EB/000&text=Another-Image" alt="...">
</div>
<div class="col-md-4">
<img class="img-responsive img-circle" src="http://placehold.it/300x300/5EEB57/000&text=And-Another!" alt="...">
</div>
</div>
<div class="carousel-caption dark-text">
Notice how you can place multiple images within the same carousel slide. Also take notice to how the modal height was altered by the image height, width may not act the same
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/D1FF8C/000&text=Third-Slide" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/EB9A57/000&text=ADD-MORE-SLIDES!" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-controls-3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-controls-3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<!--IMPORTANT: This should be a given, but just in case it helps: The number of modals you can fit in a row is limited by your column width.
The above example will only allow 3 modals per row because our column width is set to 4, 4+4+4=12 so... no more than 3, if you wanted 4 modals,
change the column width to 3, 3+3+3+3=12 (four modals!), Also this should be a given, but the included CSS is not manditory for any functionality, modals are
javascript based and their funtionality is included in bootstrap, unless you specifically exclude them. The carousel works because of jQuery, which you should
also already have-->
</div> <!--End Row-->
<!--Want more Modal Carousels? Great, just copy and paste the section from above, change your class names, update your image sources, and you're done!-->
</div><!--End Container-->
.no-image {
padding-top: 300px;
}
.align{
padding-top:25px;
}
.third-btn{
margin-top:25px;
}
.dark-text{
color:#000;
}
