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>


How to break page sections without css (grids 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">


 </div>

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

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

</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">





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

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