Complete index page including Bootstrap, FontAwesome and jQuery - Nano Blogs Online

Nano Blogs Online

Nano Blogs Online provides free help in Web Technologies, Affiliate Marketing, Social Media Marketing, Digital Marketing, and reviews different products from the online world.

Complete index page including Bootstrap, FontAwesome and jQuery

Complete index page including Bootstrap, FontAwesome and jQuery

Share This

Just add the following code to your index page and you are ready to use all the functionalities of Bootstrap, FontAwesome and jQuery

 <!DOCTYPE html>  
 <html>  
   <head>  
    <title> </title>  
    <!-- Favicon Start -->  
    <link rel="icon" type="image/png" href="resources/images/favicon.png" />  
    <!-- Favicon End -->  
    <!-- Meta Tags Start -->  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <!-- Mobile First -->  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    <!-- Mobile First -->  
    <!-- Meta Tags Start -->  
    <!-- Latest compiled and minified CSS Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
    <!-- Latest compiled and minified CSS End -->  
    <!-- Optional theme Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
    <!-- Optional theme End -->  
    <!-- JQuery UI CSS Start -->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.structure.min.css">  
    <!-- JQuery UI CSS End -->  
    <!-- Sticky Footer Basic CSS Start -->  
    <style>  
      /* Sticky footer styles  
      -------------------------------------------------- */  
      html {  
      position: relative;  
      min-height: 100%;  
      }  
      body {  
      /* Margin bottom by footer height */  
      margin-bottom: 60px;  
      }  
      .footer {  
      position: absolute;  
      bottom: 0;  
      width: 100%;  
      /* Set the fixed height of the footer here */  
      height: 60px;  
      background-color: #f5f5f5;  
      }  
      /* Custom page CSS  
      -------------------------------------------------- */  
      /* Not required for template or sticky footer method. */  
      .container {  
      width: auto;  
      max-width: 680px;  
      padding: 0 15px;  
      }  
      .container .text-muted {  
      margin: 20px 0;  
      }  
    </style>  
    <!-- Sticky Footer Basic CSS End -->  
    <!-- JQuery Start -->  
    <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>  
    <!-- JQuery End -->  
    <!-- JQuery UI Start -->  
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.min.js"></script>  
    <!-- JQuery UI End -->    
    <!-- FontAwesome JavaScript Start -->  
    <script src="https://use.fontawesome.com/d639cd4fa4.js"></script>  
    <!-- FontAwesome JavaScript Start -->  
    <!-- Latest compiled and minified JavaScript Start -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
    <!-- Latest compiled and minified JavaScript Start -->  
   </head>  
   <body>  
    <!-- Navigation Areas -->  
    <nav class="navbar navbar-default" role="navigation">  
      <!-- Main Navigation Start -->  
      <div class="container">  
       <!-- Navigation Container Start -->  
       <ul class="nav navbar-nav">  
         <li><a href="#">Home</a></li>  
         <li><a href="#">About Us</a></li>  
         <li><a href="#">FAQ</a></li>  
         <li><a href="#">Contact</a></li>  
       </ul>  
      </div>  
      <!-- Navigation Container End -->  
    </nav>  
    <!-- Main Navigation End -->  
    <h1><i class="fa fa-university" aria-hidden="true"></i>This is without Bootsrap!</h1>  
    <!-- Footer Areas -->  
    <footer class="footer">  
      <!-- Footer Start -->  
      <div class="container">  
       <!-- Footer Container Start -->  
       <p class="text-muted">Place sticky footer content here.</p>  
      </div>  
      <!-- Footer Container End -->  
    </footer>  
    <!-- Footer End -->  
   </body>  
 </html>  

1 comment:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete