Issue 1:

Issue 2:
here are the files

INDEX.HTML

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
body { padding-bottom: 70px; }
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/tumblr_nb1uhrRrge1st5lhmo1_1280.jpg" alt="jelifish">
<div class="carousel-caption">
first one
</div>
</div>
<div class="item">
<img src="img/YzgdnQ4TTumS8xR9YRKJ_IMG_2761%20(1).jpg" alt="crysanth">
<div class="carousel-caption">
second one
</div>
</div>
<div class="item">
<img src="img/tumblr_nb1uhrRrge1st5lhmo1_1280.jpg" alt="koala">
<div class="carousel-caption">
<a><h3>mcloud ...</h3> </a>
</div>
</div>
</div>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!- corosel ends-->
<!-- thumbnail starts here-->
<div class="container">

<div class="row">

<div class="col-md-4">
<h3><a href="#">WI-FI</a></h3>
<img src="img/quickpay.jpg" alt="">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a href="#" class="btn btn-default"> read more</a>
</div>

<div class="col-md-4">
<h3><a href="#">WI-FI</a></h3>
<img src="img/quickpay.jpg" alt="">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a href="#" class="btn btn-default"> read more</a>
</div>

<div class="col-md-4">
<h3><a href="#">WI-FI</a></h3>
<img src="img/quickpay.jpg" alt="">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a href="#" class="btn btn-default"> read more</a>
</div>

</div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

AND HEADER.HTML

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<a href="#" class="navbar-brand" style="color:red">MCLOUD</a>

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">

<li><a href="#" style="color:red" class="active">home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:red">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li ><a href="#apply" data-toggle="modal" >Apply for new Connection</a></li>
<li ><a href="#quick" data-toggle="modal">Quick Pay</a></li>
<li role="presentation" class="divider"></li>
<li ><a href="#account" data-toggle="modal">MyAccount</a></li>
</ul>
</li>
<li><a href="#" style="color:red">home</a></li>
</ul>

</div>
</div>

</div>
<!-- apply for new connection form-->

<div class="modal fade" id="apply" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Apply for new connection</h4>
</div>

<div class="modal-body">

<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-lable">Name:</label>
<div class="col-lg-10">

<input type="text" class="form-control" id="contact-name" placeholder="Full name">

</div>

</div>

<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-lable">email:</label>
<div class="col-lg-10">

<input type="email" class="form-control" id="contact-email" placeholder="you@example.com">

</div>

</div>

<div class="form-group">
<label for = "contact-mobileNo." class="col-lg-2 control-lable">Mobile NO.</label>
<div class="col-lg-10">

<input type="mobileNo." class="form-control" id="contact-mobileNo." placeholder="+910000000000">

</div>

</div>

<div class="form-group">
<label for = "contact-city" class="col-lg-2 control-lable">City:</label>
<div class="col-lg-10">

<input type="city" class="form-control" id="contact-mobileNo." placeholder="pune west,east or center">

</div>

</div>

<div class="form-group">
<label for = "contact-area" class="col-lg-2 control-lable">Area:</label>
<div class="col-lg-10">

<input type="area" class="form-control" id="contact-area" placeholder="Area">

</div>

</div>

<div class="form-group">
<label for = "contact-building" class="col-lg-2 control-lable">Building:</label>
<div class="col-lg-10">

<input type="building" class="form-control" id="contact-building" placeholder="Building">

</div>

</div>

<div class="form-group">
<label for = "contact-address" class="col-lg-2 control-lable">Address:</label>
<div class="col-lg-10">

<input type="address" class="form-control" id="contact-address" placeholder="address">

</div>

</div>

<div class="form-group">
<label for = "contact-address" class="col-lg-2 control-lable"></label>
<div class="col-lg-10">

<div class="checkbox">
<label>
<input type="checkbox"> Mcloud Broadband can call with details!<span class="glyphicon glyphicon- warning-sign"></span>
</label>
</div>

</div>

</div>

</div>

<div class="modal-footer">

<a class="btn btn-primary" data-dismiss="modal">Close</a>
<a class="btn btn-success" type="submit" >Submit</a>

</div>
</form>

</div>
</div>
</div>
<!--apply for new connection ends here -->
<!-- quick pay -->

<div class="modal fade" id="quick" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Quick Pay</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for = "Username" class="col-lg-2 control-lable">Username:</label>
<div class="col-lg-10">

<input type="text" class="form-control" id="Username" ><p><br>OR</p>

</div>

</div>

<div class="form-group">
<label for = "accountno" class="col-lg-2 control-lable">Account NO.</label>
<div class="col-lg-10">

<input type="text" class="form-control" id="accountno" >

</div>

</div>

</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
<a class="btn btn-success">submit</a>
</div>
</form>
</div>
</div>
</div>
<!-- quick pay -->
<!-- my account -->

<div class="modal fade" id="account" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Log In or<a style="color:blue"> Sign Up</a></h4>
</div>
<div class="modal-body">

<div class="form-group">
<label for = "Username" class="col-lg-2 control-lable">Username:</label>
<div class="col-lg-10">

<input type="text" class="form-control" id="Username" ><p>

</div>

</div>

<div class="form-group">
<label for = "password" class="col-lg-2 control-lable">Password:</label>
<div class="col-lg-10">

<input type="text" class="form-control" id="password" >

</div>

</div>

<div class="form-group">
<div class="checkbox">
<label for = "password" class="col-lg-2 control-lable"></label>
<div class="col-lg-10">
<label>
<input type="checkbox"> Remember Password!<span class="glyphicon glyphicon- warning-sign"></span>
</label>
</div>
</div>
</div>

</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
<a class="btn btn-success">submit</a>
</div>
</form>
</div>
</div>
</div>
<!-- my account ends here-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

WHAT THE HELL IT IS NOT WORKING???