Nowadays if you are browsing a website and you get an awesome look and feel chances are that the site in question is being built with Bootstrap framework. Millions of amazing sites across the web are using Bootstrap – the most popular, open source [maintained on GitHub], HTML, CSS and JS framework. Bootstrap is a mobile first approach for developing responsive web pages.
As mobile devices are getting popular your webpage is expected to adapt and render it self appropriately based on the screen sizes of various devices [phone, tablet, desktop]. Bootstrap solves this problem by providing a standard framework for easier and faster User Interface (UI) development – one framework, every device. The layout of the page will automatically adjust itself based on the screen size of the underlying device.
The icing on the cake is that Bootstrap is compatible with all the modern browsers and is backward compatible to some extent with old browsers.
Prerequisite for Bootstrap
HTML and CSS
How to Get Started
- Either you can download it. The latest version of Bootstrap is V3.3.2 which can be downloaded from here.
OR
- If you don’t want to download and host Bootstrap on your own server, you can include it from a CDN – Content Delivery Network [MaxCDN provide support for Bootstrap CSS and JavaScript]
A Working Example [See the result here]
You must have noticed beautiful slideshows (carousels) in many of the modern websites. Using Bootstrap framework even a non-programmer can implement these features within a few minutes. I’ve used the second option i.e. including a CDN source for Bootstrap, to workout a simple slideshow (carousel) example. One image from the output of this example follows:
The above carousel can be tested even in your local system when you are connected to Internet. Steps to get the carousel are quite simple, documented below:
1. Make a folder, name it as you wish.
2. Open a notepad, copy/paste the following code:
——————————–Code Starts———————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap carousel example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js”></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<header align=”center”> Bootstrap carousel example. Copyright www.CodingThis.com</header>
<div class=”container”>
<br>
<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
<li data-target=”#myCarousel” data-slide-to=”1″></li>
<li data-target=”#myCarousel” data-slide-to=”2″></li>
<li data-target=”#myCarousel” data-slide-to=”3″></li>
<li data-target=”#myCarousel” data-slide-to=”4″></li>
</ol><!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”><div class=”item active”>
<img src=”T1.jpg” alt=”Antelopes” width=”660″ height=”545″>
<div class=”carousel-caption”>
<h3>Antelopes in a farm</h3>
<p>Indian Village</p>
</div>
</div><div class=”item”>
<img src=”T2.jpg” alt=”Buffaloes” width=”660″ height=”545″>
<div class=”carousel-caption”>
<h3>Buffaloes</h3>
<p>Indian Village</p>
</div>
</div><div class=”item”>
<img src=”T3.jpg” alt=”Paddy farm” width=”660″ height=”545″>
<div class=”carousel-caption”>
<h3>Paddy farm</h3>
<p>Agriculture</p>
</div>
</div><div class=”item”>
<img src=”T4.jpg” alt=”Sundown” width=”660″ height=”545″>
<div class=”carousel-caption”>
<h3>Sundown</h3>
<p>Indian Village</p>
</div>
</div>
<div class=”item”>
<img src=”T5.jpg” alt=”Bird” width=”660″ height=”545″>
<div class=”carousel-caption”>
<h3>Black Drongo</h3>
<p>A bird in an Indian village</p>
</div>
</div></div>
<!– Left and right controls –>
<a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
</div></body>
</html>
——————————–Code Ends————————————
3. Save the notepad file as <yourname>.html
4. In the same folder upload 5 images of your choice and name them as T1.jpg, T2.jpg, T3.jpg, T4.jpg, T5.jpg.
5. Right click <yourname>.html file and browse with your favorate browser. See the below screenshot.
And that’s it. Your carousel is ready and can be deployed anywhere or can be integrated with your site. Click & see the deployed version of this example carousel here.
Have you noticed the reference script links in the <head></head> section of the html?These *.js and *.css files are responsible for rendering of this slideshow in the way they are expected to show. And that’s the reason if you are testing this code on your local machine you must be connected to the internet.
You can rewrite unique caption of your images in <div class="carousel-caption"> within each <div class="item">.
You can increase/decrease the number of slides/images based on your requirement. This number can be controlled by the indicators – i.e. the little dots at the bottom of each slide. See the following section from the above code:
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
<li data-target=”#myCarousel” data-slide-to=”1″></li>
<li data-target=”#myCarousel” data-slide-to=”2″></li>
<li data-target=”#myCarousel” data-slide-to=”3″></li>
<li data-target=”#myCarousel” data-slide-to=”4″></li>
</ol>
As this example has 5 images I’ve set the data-slide-to value from 0 through 4. See the class=”active” for the first image; this must be added with anyone of the images.
Hope this works well for you. Get in touch if you are facing any issue.
The post Bootstrap – Getting Started with the Most Popular Framework appeared first on CodingThis.com.
