Bootstrap modal carousel - images and text overlapping and stacking on each other - html

Question

It's supposed to show one image at a time with one caption at a time, but now I have one image on the top of the other one and the two captions overlapping each other at the bottom..
Any clues?
EDIT: I did include boostrap.js.
None of the css is editing this part of my html.
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
At the bottom of my html.
<!--Second column-->
<div class="col-md-6 modal-lg">
<!-- Trigger the modal with a button -->
<img src="media/mobile.png" data-toggle="modal" data-target="#modalmockupsmobile" class="img-circle" alt="Mockup">
<h5><p>Mobile</p></h5>
<div id="modalmockupsmobile" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Coming Soon!</h4>
</div>
<div class="modal-body">
<!-- Start Carousel -->
<div id="mobilemockups_carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mobilemockups_carousel" data-slide-to="0" class="active"></li>
<li data-target="#mobilemockups_carousel" data-slide-to="1"></li>
<li data-target="#mobilemockups_carousel" data-slide-to="2"></li>
<li data-target="#mobilemockups_carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p class="carousel-caption">Login Screen</p>
<img src="media/nq.jpg" alt="Login screen">
</div>
<div class="item">
<p class="carousel-caption">Welcome Screen</p>
<img src="media/union.JPG" alt="Welcome screen">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mobilemockups_carousel" 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="#mobilemockups_carousel" 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 -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!--/.Second column-->