Responsive Website Using Bootstrap

Simple Responsive Website Using Bootstrap



Just found good tutorial to develop a responsive website using Bootstrap. Just add bootstrap libraries amd use some class names for div elements from css and the website will automatically resize with the change in resolution which makes your website accessible via mobile devices as well as desktop browsers.

Libraries:  bootstrap.css, bootstrap-responsive.css, bootstrap.js,  jquery.min.js.

Class names: container, row-fluid, span1,span2,...,span12,offset1,...

Just follow the Template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
...content
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Try this small Example:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
<p>A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act. - <b>Mahatma Gandhi</b></p>

</div>
<div class="span6">
<p>Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. -<b>Swami Vivekananda</b></p>
</div>
</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>


1 comment:

  1. I am really impressed with your blog article, such great & useful knowledge you mentioned here. DataIT Solutions have a web designing company in india and USA offers services to develop websites on bootstrap framework. Our experienced web designer’s team has adapted this new trend and we recommend the bootstrap for the quick turnaround time in the development process. Bootstrap website design | Responsive bootstrap website design | Best bootstrap website design

    ReplyDelete