Introduction
Bootstrap is a CSS framework that allows designing responsive websites quite easily. Using Bootstrap the developers can also design a website quite comfortably. It is a mobile first approach towards the repsonsive web -designing, as compared to Bootstrap-2 that was a desktop first approach.
Using the code
This article refers to the basics given on the Bootstrap Official site.
Below are the steps for creating a simple bootstrap responsive page.
Step-1:
Go to the official Site of bootstrap and download the bootstrap css and js files.
Step-2:
We can add some meta tags on the top, IE-edge meta tag ensures the highest stantdards mode for the internet explorer. Refer this link for further idea on it.
The next meta tag for viewport ensures the screen to be rendered according to the width of the screen. Refer this link for further idea on this tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
We can also add a favicon to our site:
<link rel="icon" href="/favicon.ico" type="image/ico" >
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" >
<link rel="apple-touch-icon" href="/images/FavIcon-Apple.png" type="image/png" >
Step-3: Include the minified css file to the head section of the Html page
<link href="css/bootstrap.min.css" rel="stylesheet" />
Step-4:
Include the jquery file and bootstrap js file at the bottom of the page to allow faster loading of the page. Scripts are in general loaded at the last of the page.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
Make sure the Jquery file is placed before the bootstrap js file as the later has a dependency on the former.
Step-5:
We will have few sections on our webpage:
Section 1: Header:
This section is going to include the navigation bar for our website with collapsible menu items. The menu items would initially be collapsed(Hidden) or shown depending on the view-port size.
Below is the code for our header section:
<!--Header-->
<header class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img class="img-circle" src="images/mylogo.jpg" alt="logo"> Mindfire</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Hobbies</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</header>
<!--Header-->
We have made use container class for enclosing the content of the whole section. This we would be doing for each of the sections. The navbar class denotes the navigation bar in bootstrap, navbar-inverse is to give a black color to our navigation bar. nabar-fixed-top is a class that makes sure the navigation bar remains fixed at the top while we scroll down the page.
We have a button with class navbar-toggle that contains three icons, this is a toggle button that appears on the menu bar once the view-port is small and the menu items remain collapsed until the button gets clicked on smaller devices.
In the class navbar-brand, we generally have the website title and logo that is to be highlighted. The collapsible menu items are enclosed in a div with class navbar-collapse. navbar-right floats the menu items towards the right.
Section 2: Slider:
Its really cool to have an image slider at the top of your web-page. For this we would be using bootstrap carousel.
<!--Slider-->
<section id="my-Slider">
<div class="container" style="padding-top: 60px;">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-slider-1.jpg" alt="...">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="images/image-slider-2.jpg" alt="...">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="images/image-slider-3.jpg" alt="...">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--Slider-->
We have indicators labelled with class carousel-indicators over our image slider to allow the navigation between the slides, these are dots that appear over the slider that point to the various image slides.
Inside the carousel-inner class we have the slide items wrapped inside the divs with item class. Each slide is having an image with src pointing to some local image on our images folder and with an optional carousel-caption that is a text that appears over the images.
Section-3: Jumbotron
Next we have a section labelled with class jumbotron inside which we can have text that needs special attention.
<!--JumboTron-->
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive img-circle" src="images/amit.jpg" />
</div>
<div class="col-md-6">
<h1 class="text-center">Amit Kumar</h1>
<p class="text-center">My Personal Site</p>
</div>
</div>
</div>
</section>
<!--JumboTron-->
In this section we have an image with circular border with the class img-circle and a heading.
Section-4: Social Media:
In this section we have the links to the various social netwroking sites. The class alert-info gives a blue color to the content.
<!--Social Media-->
<section id="social-media">
<div class="container alert alert-info">
<div class="col-md-4"><a href="facebook.com"><b><em> Connect me on Facebook</em></b></a></div>
<div class="col-md-4"><a href="twitter.com"><b><em> Connect me on Linked In</em></b></a></div>
<div class="col-md-4"><a href="gmail.com"><b><em>Follow me on Twitter</em></b></a></div>
</div>
</section>
Section-5: Footer
This section includes the copyright information for our website.
<!--Footer-->
<section id="footer">
<footer class="navbar navbar-fixed-bottom navbar-inverse text-warning text-center">
© All Rights reserved 2014.
</footer>
</section>
<!--Footer-->
We have used navbar-fixed-bottom to make the footer stick to the bottom of the site.
To Improve the Looks we have added css for the slider background and slide width:
<style>
.slide {
width: 95%;
}
#my-Slider {
background: url("images/bamboo.jpg") no-repeat fixed center center/cover rgba(0, 0, 0, 0);
}
</style>
For a video tutorial on this article you can visit my youtube video https://www.youtube.com/watch?v=Flj23MY4Qvw.
History
* As per the request by a fellow friend Mr.T, I have added the favicon-icon on the article.
* Additionally I have added some important meta tags.
Verision: 2
