<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <!-- Button trigger modal --> <img src="http://placehold.it/1900x1080" style="max-width:120px;" data-toggle="modal" data-target="#myModal" id="launch"> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/1900x1080" alt="Chania"> </div> <div class="item"> <img src="http://placehold.it/1900x1080" alt="Chania"> </div> <div class="item"> <img src="http://placehold.it/1900x1080" alt="Flower"> </div> <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div> </div> <!-- Left and right controls --> <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> </div> </div> </div> </div>

#editor { overflow:scroll; max-height:300px; height: 15em; border: 1px solid #ccc; border-radius: 4px; } #editor table { width: 100% } #editor table tr th { font-size: 80%; padding: 0.5em; font-align: center; } #editor table tr td { padding: 0.3em; } form .row { border: 1px solid #ccc; border-radius: 4px; margin-left: 0px; margin-right: 0px; } div.checkbox { margin-left: 12px; padding-top: 6px; padding-bottom: 6px; } .twitter-typeahead { width: 100%; } .to { padding: 4px; position: relative; } .to .icon-remove-sign { color: #ccc; cursor: pointer; } .to-dropdown { display: float; position: absolute; left: -1.9em; top: 0.4em; width: 4em; } .to .to-dropdown { left: -4.2em; } .to .to-dropdown > span { float: right; } .tt-dropdown-menu { background: white; border-radius: 4px; padding: 12px; margin: 1px; border: solid 1px rgb(102, 175, 233); outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); } .modal-dialog{ width:80%; }