Sunday, August 9, 2015

Bootstrap Tutorial For Beginners 12 - Adding Carousel (Image Slider)







<!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">
      <!-- The above 3 meta tags *must* come first in the 
         head; any other head content must come 
         *after* these tags -->
      <title>EasyOnlineConverter</title>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/custom.css" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   </head>
   <body>
      <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
            <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="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
            <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="#" > Home </a></li>
                  <li><a href="#">About</a></li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" 
                        data-toggle="dropdown">
                        Learn <b 
                           class="caret"></b>
                        <ul class="dropdown-menu">
                           <li class="dropdown-header">Examples</li>
                           <li>
                     <a href="#">C++</a></li>
                     <li><a href="#">Java</a></li>
                     <li class="divider"></li>
                     <li class="dropdown-header">Tutorials</li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">Java</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="container">
         <div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
            <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>
            </ol>
            <div class="carousel-inner">
               <div class="item active">
                  <img src="img/1.jpg">   
                  <div class="carousel-caption">
                     <h1>Theme 1</h1>
                  </div>
               </div>
               <div class="item ">
                  <img src="img/2.jpg">   
                  <div class="carousel-caption">
                     <h1>Theme 2</h1>
                  </div>
               </div>
               <div class="item ">
                  <img src="img/3.jpg">   
                  <div class="carousel-caption">
                     <h1>Theme 3</h1>
                  </div>
               </div>
            </div>
            <a class="left carousel-control " href="#mycarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control " href="#mycarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
         </div>
         <div class="row">
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/cpp.jpg" alt="C++ tutorial">
               </a>
               <h3>C++</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/java.jpg" alt="Java tutorial">
               </a>
               <h3>Java</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/python.jpg" alt="Python tutorial">
               </a>
               <h3>Python</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
         </div>
      </div>
      <!-- Fixed footer -->
      <div class="navbar navbar-inverse navbar-fixed-bottom">
         <div class="container">
            <div class="navbar-text pull-left">
               <p>copyright ProgrammingKnowledge 2015</p>
            </div>
            <div class="navbar-text pull-right">    
               <a href="#" ><i class="fa fa-facebook fa-2x"></i></a>
               <a href="#" ><i class="fa fa-twitter fa-2x"></i></a>
               <a href="#" ><i class="fa fa-google-plus fa-2x"></i></a>
            </div>
         </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript 
         plugins) -->
      <script src="
         https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include 
         individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>


















Searches related to bootstrap carousel images

bootstrap carousel images not showing

bootstrap carousel images distorted

bootstrap carousel image link

bootstrap carousel image not responsive

bootstrap carousel image aspect ratio

bootstrap carousel image slider

bootstrap carousel image fixed height

bootstrap carousel image scaling
IT Certification Category (English)640x480

Partner Sites

VideoToGifs.com

EasyOnlineConverter.com

SqliteTutorials.com


Top Online Courses From ProgrammingKnowledge

Python Course http://bit.ly/2vsuMaS
Java Coursehttp://bit.ly/2GEfQMf
Bash Coursehttp://bit.ly/2DBVF0C
Linux Coursehttp://bit.ly/2IXuil0
C Course http://bit.ly/2GQCiD1
C++ Coursehttp://bit.ly/2V4oEVJ
PHP Coursehttp://bit.ly/2XP71WH
Android Coursehttp://bit.ly/2UHih5H
C# Coursehttp://bit.ly/2Vr7HEl
JavaFx Coursehttp://bit.ly/2XMvZWA
NodeJs Coursehttp://bit.ly/2GPg7gA
Jenkins Course http://bit.ly/2Wd4l4W
Scala Coursehttp://bit.ly/2PysyA4
Bootstrap Coursehttp://bit.ly/2DFQ2yC
MongoDB Coursehttp://bit.ly/2LaCJfP
QT C++ GUI Coursehttp://bit.ly/2vwqHSZ