Friday, 27 October 2017

image and jumbotron class in bootstrap





<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>grid in bs</title>

<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>



<style>



body

{ background-color:#000;

 

}



#SIDE a:hover

{ background-color:#09F;

color:#fff;

font-family:"Courier New", Courier, monospace;

font-size:26px;



}



</style>



</head>



<body>



<div class="container" style="height:1000px; background-color:#069">



<div class="row" style="height:200px; background-color:#096;background-image:url(img/1.jpg); background-size:100% 1000px">



<div class="col-sm-4" style="height:200px; ">



<img src="img/logo (1).png" style="width:80%;height:200px"/>

 </div>



<div class="col-sm-4" style="height:200px; "> </div>



<div class="col-sm-4" style="height:200px; ">



</div>





</div>



<!-- HEad section end..............................................  -->

<div class="row" style="height:50px; background-color:#036">









</div>





<DIV class="row" style=" height:1000px; background-color:#CCC">



<div ID="SIDE" style="height:1000px;background-image:url(img/1.jpg); background-size:100% 1000px" class="col-sm-2">



<h3>ASIDE BAR </h3>







<nav>



<ul class="nav  nav-pills  nav-stacked">



<li class="active"> <a href="#" >Home </a> </li>





<li> <a href="#">About Us </a> </li>





<li> <a href="#">Gallery </a> </li>





<li> <a href="#">Contact Us </a> </li>





<li> <a href="#">Admission </a> </li>





<li> <a href="#">Home </a> </li>





<li> <a href="#">About Us </a> </li>





<li> <a href="#">Gallery </a> </li>





<li> <a href="#">Contact Us </a> </li>





<li> <a href="#">Admission </a> </li>











</ul>



</nav>











</div>



<div style="background-color:white;height:1000px;background-image:url(img/2.jpg); background-size:100% 1000px" class="col-sm-8">





<div style="width:100%; background-color:rgba(82, 99, 158,0.4)">

<div class="jumbotron" >



<h1>Bootstrap Tutorial </h1>



<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. </p>



</div>



</div>



<table style="margin-left:90px">



<tr>

<td>

<img src="img/slide1.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>



<td>

<img src="img/slide2.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 

 <td>

<img src="img/slide3.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 



 </tr>



 <tr>

<td>

<img src="img/slide2.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>



<td>

<img src="img/slide3.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 

 <td>

<img src="img/slide1.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 



 </tr>





 <tr>

<td>

<img src="img/slide1.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>



<td>

<img src="img/slide2.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 

 <td>

<img src="img/slide3.jpg" style="width:150px; height:100px; display:inline" class="img-responsive img-circle" />



 </td>

 

 



 </tr>













</table>







</div>





<div style="background-color:#C03;height:1000px; background-image:url(img/1.jpg); background-size:100% 1000px" class="col-sm-2"> </div>











</DIV>



























</div>



<!--  CONTAINER end..............................................  -->



























<script src="js/bootstrap.js"> </script>

<script src="js/bootstrap.min.js"> </script>

<script src="js/jquery.js"> </script>

<script src="js/jquery-migrate-1.4.1.min.js"> </script>





</body>



</html>
-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...