July 2015 ~ Klick Dev

Wednesday, July 29, 2015

Bootstrap Tutorial For Beginners 10 - Adding Thumbnail and Image to Boot...

<!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>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
  </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 class="jumbotron text-center">
<h1>Hello World !!!</h1>
<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-primary">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</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>
</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 thumbnail and images

bootstrap thumbnail image size

bootstrap thumbnail image gallery

bootstrap thumbnail image slider

bootstrap thumbnail carousel

bootstrap thumbnail grid

bootstrap thumbnail example

bootstrap thumbnail gallery with caption

bootstrap thumbnail border

By: Unknown On 3:05 PM

Bootstrap Tutorial For Beginners 9 - Creating Multi Column Layout

<!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>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
  </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 class="jumbotron text-center">
<h1>Hello World !!!</h1>
<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-primary">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Head 1</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">
<h3>Head 2</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">
<h3>Head 3</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>
</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>

Understanding the Bootstrap 3 Grid System

Searches related to bootstrap column

bootstrap column height

bootstrap table

bootstrap navbar

bootstrap column no padding

bootstrap column ordering

bootstrap column spacing

bootstrap column height 100

bootstrap column center

By: Unknown On 2:43 PM

Wednesday, July 22, 2015

Bootstrap Tutorial For Beginners 8 - Bootstrap Buttons

<!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>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
  </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.ProgrammingKnowledge.org">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 class="jumbotron text-center">
<h1>Hello World !!!</h1>
<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-primary">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</div>
<div class="page-header">
<h1>Button</h1>
</div>
<p>
<button type=button class="btn btn-default">Default</button>
<button type=button class="btn btn-primary">Primary</button>
<button type=button class="btn btn-success">Success</button>
<button type=button class="btn btn-info">Info</button>
<button type=button class="btn btn-warning">warning</button>
<button type=button class="btn btn-danger">Danger</button>
<button type=button class="btn btn-link">Link</button>
</p>
<p>
<button type=button class="btn btn-lg btn-default">Default</button>
<button type=button class="btn btn-lg btn-primary">Primary</button>
<button type=button class="btn btn-lg btn-success">Success</button>
<button type=button class="btn btn-lg btn-info">Info</button>
<button type=button class="btn btn-lg btn-warning">warning</button>
<button type=button class="btn btn-lg btn-danger">Danger</button>
<button type=button class="btn btn-lg btn-link">Link</button>
</p>
<p>
<button type=button class="btn btn-sm btn-default">Default</button>
<button type=button class="btn btn-sm btn-primary">Primary</button>
<button type=button class="btn btn-sm btn-success">Success</button>
<button type=button class="btn btn-sm btn-info">Info</button>
<button type=button class="btn btn-sm btn-warning">warning</button>
<button type=button class="btn btn-sm btn-danger">Danger</button>
<button type=button class="btn btn-sm btn-link">Link</button>
</p>
<p>
<button type=button class="btn btn-xs btn-default">Default</button>
<button type=button class="btn btn-xs btn-primary">Primary</button>
<button type=button class="btn btn-xs btn-success">Success</button>
<button type=button class="btn btn-xs btn-info">Info</button>
<button type=button class="btn btn-xs btn-warning">warning</button>
<button type=button class="btn btn-xs btn-danger">Danger</button>
<button type=button class="btn btn-xs btn-link">Link</button>
</p>

</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>
</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 button

bootstrap button generator

bootstrap button color

font awesome

bootstrap button icon

bootstrap button toggle

bootstrap button href

bootstrap button link

bootstrap modal

By: Unknown On 2:17 PM

Bootstrap Tutorial For Beginners 7 - Jumbotron

<!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>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
  </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.ProgrammingKnowledge.org">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 class="jumbotron text-center">
<h1>Hello World !!!</h1>
<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>
</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>
</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 jumbotron

bootstrap jumbotron background image

bootstrap jumbotron carousel

bootstrap jumbotron background color

bootstrap jumbotron height

bootstrap jumbotron center

bootstrap jumbotron background image responsive

bootstrap jumbotron template

bootstrap jumbotron full width

Bootstrap Jumbotron Background Cover Image

css - Responsive Bootstrap Jumbotron Background Image

By: Unknown On 1:54 PM

Saturday, July 11, 2015

Bootstrap Tutorial For Beginners 6 - Adding Fixed Footer

<!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>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </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.ProgrammingKnowledge.org">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="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>copyright ProgrammingKnowledge 2015</p>
</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 add footer bootstrap

footer bootstrap example

footer bootstrap template

footer bootstrap code

responsive footer bootstrap

footer bootstrap w3schools

footer bootstrap css

fixed footer bootstrap

footer bootstrap design

By: Unknown On 5:06 PM

Bootstrap Tutorial For Beginners 4 - Creating Responsive Navbar with Dro...

<!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>Bootstrap 101 Template</title>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
   </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.ProgrammingKnowledge.org">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>
      <!-- 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 Responsive Navbar with Dropdown Menus
bootstrap responsive navbar dropdown
bootstrap responsive navbar dropdown not working
bootstrap navbar dropdown submenu
bootstrap navbar dropdown hover
navbar drop down menu
navbar drop down menu html
responsive drop down navigation menu free download
responsive navigation menu css

By: Unknown On 3:13 AM

Klick Dev