Bootstrap Tutorial - 01 (Create image slideshow)

Repository Link :

https://github.com/twbs/bootstrap

What will I learn ?

• You will learn how to made an image slide using bootstrap .

Software Requirements:

• Any HTML / CSS code editor software . I always suggest using sublime text.

Resources :

• https://getbootstrap.com/

Defficulty:

• Basic/intermediate.

Tutorial Description :

This is my first tutorial about Bootstrap. In this tutorial you will learn how to mak a image-slideshow easily using bootstrap , and use it on your website. At first you need to know-

What is bootstrap?

Bootstrap (front-end framework), Bootstrap is a free and open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Slideshow is very much important to making your website attractive and more dynamic. There are lots of way making image-slideshow . But using bootstrap is more easier than the other's way. To making slideshow using bootstrap you need to following these steps.

At first in HTML header section You need to add bootstrap CSS and Javascript link:

Add CSS Link:

link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

Add Javascript Link:

Addnig javascript link you need to add 2 link, one is slim.min.js which is query. And another is bootstrap.min.js that is main javascript link.
script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js
script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js

IN HTML body section , you create a div like this :

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">

    <div class="carousel-item active">
      <im g class="d-block w-100" src="image/1.png" alt="First slide">
    </div>

    <div class="carousel-item">
      <im g class="d-block w-100" src="image/2.png" alt="Second slide">
    </div>

    <div class="carousel-item">
      <im g class="d-block w-100" src="image/3.png" alt="Second slide">
    </div>

  </div>

  <  a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Slideshow example

Proof of work done :

https://github.com/oracle-expert/picture-slide

My github profile :

https://github.com/oracle-expert

Thanks ,all to read my tutorial.