Introduction:-
Hii....Friends,
Today I explain that how to make a image responsive in bootstrap. This is not a complicated case the bootstrap provide only a pre-define class that is "img-responsive_no".
Step:1 The designing code goes here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Asp.Net Modules</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/custom_HomePage.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>How to use it</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<div class="row">
<div class="col-sm-6">
<div class="portfolio-item">
<a href="#">
<img class="img-responsive_no" src="img\second.jpg" alt="">
</a>
</div>
</div>
<div class="col-sm-6">
<p>rsus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<a href="#" class="btn btn-default ">Download</a>
</div>
</div>
</div>
<div class="col-sm-6">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<a href="#" class="btn btn-success btn-lg ">Know more about this</a>
</div>
</div>
<hr />
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .
DEMO:-
0 comments:
Post a Comment