Introduction
Hi.. Friends,
Today I explain that how to use jumborton in bootstrap. A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Use a <div> element with class .jumbotronto create a jumbotron.
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="jumbotron">
<h2>Android Apps for learning Magic</h2>
<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 cinia bibendum nulla sed consectetur.</p>
<p class="btn-group">
<a href="#" class="btn btn-success btn-lg">Download App</a>
<a href="#" class="btn btn-default btn-lg">Text Me Link</a>
</p>
</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