Monday, 23 October 2017

How to make tables and images responsive (IMAGE AND TALBES 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"/>

</head>



<body>



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



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



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

<img src="img/logo.png" style="width:200px; height:200px;" class="img-responsive img-thumbnail"/>



 </div>



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



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

<img src="img/changeimg.jpg" style="width:200px; height:200px;" class="img-responsive  img-rounded"/>

</div>





</div>



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

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



</div>





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



<div style="background-color:#03C;height:500px" class="col-sm-3"> </div>



<div style="background-color:white;height:500px" class="col-sm-6">



<h1 >Bootstrap Tutorials <small> Tables </small> </h1>



<table class="table table-striped table-bordered table-hover table-responsive">



<tr> <td><b> Id</b> </td>  <td><b> Name</b> </td> <td><b> Email </td> </tr>





<tr> <td> 1</td>  <td> Salmanmasood</td> <td>theideassolution@gmail.com</td> </tr>





<tr> <td> 2</td>  <td> Ali</td> <td>Alisolution@gmail.com</td> </tr>







<tr> <td> 3</td>  <td> Umar</td> <td>Umardeassolution@gmail.com</td> </tr>











</table>







</div>





<div style="background-color:#C03;height:500px" class="col-sm-3"> </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

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 ...