-->
How To Creating A Website Template Using Bootstrap ? | Virtual Online Marchmadness
  How To Creating A Website Template Using Bootstrap ? | Virtual Online Marchmadness

How To Creating A Website Template Using Bootstrap ? | Virtual Online Marchmadness

Creating a Website Template Using Bootstrap. - Website template design is a layout pattern of a website that wants to be designed & prepared with various features in it. Website templates are the basic components of a website template system that separates the content part from the presentation part of a web design.

This time we will create a simple website template using Bootstrap. Now if you are looking for this article, it means you know what is a website, what is responsive and what is bootstrap.

Creating a Website Template Using Bootstrap
Before we start making templates, of course we have to think about how this template will be, what kind of framework will we use? This time I will create a template with a layout like this.
                                 Creating a Website Template Using Bootstrap How To Creating a Website Template Using Bootstrap ? | Virtual Online Marchmadness



Tata Letak Template Website
Preparation for Creating a Simple Template Using Bootstrap
Some of the things we have to prepare are:

Bootstrap. (Also read: Understanding and How to Use Bootstrap).
Image file. The image we will call the template later.
Start Making Templates
Now we start creating the template,
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Membuat Template Website Menggunakan Bootstrap | www.malasngoding.com</title>
  5. <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8. <div class="container">
  9. <div class="row">
  10. <div class="col-md-12">
  11. <!-- Header -->
  12. <img class="img-fluid mx-auto d-block" src="assets/images/logo.png" style="height: 200px;">
  13. <!-- Navigation -->
  14. <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a>
  15. <form class="form-inline">
  16. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  17. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  18. </form>
  19. </nav>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="container mt-3">
  24. <div class="row">
  25. <!-- Sidebar -->
  26. <div class="col-md-4">
  27. <div class="card mb-3">
  28. <div class="card-header">
  29. <h4 class="text-mono text-center">codelatte.org</h4>
  30. </div>
  31. <div class="card-body">
  32. <img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
  33. <br />
  34. <blockquote class="card-blockquote">
  35. <p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
  36. </blockquote>
  37. </div>
  38. </div>
  39. <div class="card mb-3">
  40. <div class="card-header">
  41. <h4 class="text-mono text-center">codelatte.org</h4>
  42. </div>
  43. <div class="card-body">
  44. <img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
  45. <br />
  46. <blockquote class="card-blockquote">
  47. <p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
  48. </blockquote>
  49. </div>
  50. </div>
  51. </div>
  52. <!-- Isi Content -->
  53. <div class="col-md-8 mb-3">
  54. <div class="card">
  55. <div class="card-header">
  56. <h4 class="text-mono text-center">News</h4>
  57. </div>
  58. <div class="card-body">
  59. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
  60. <h5 class="card-title">News Article 1</h5>
  61. <small><p>19/07/2018</p></small>
  62. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
  63. </p>
  64. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
  65. <h5 class="card-title">News Article 2</h5>
  66. <small><p>19/07/2018</p></small>
  67. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
  68. </p>
  69. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
  70. <h5 class="card-title">News Article 3</h5>
  71. <small><p>19/07/2018</p></small>
  72. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
  73. </p>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- Footer -->
  79. <div class="footer-bottom">
  80. <div class="container">
  81. <div class="row">
  82. <div class="col-md-12">
  83. <p class="text-md-center">&copy; Copyright 2018 - Made <a href="https://codelatte.org/">Codelatte Indonesia</a>. All rights reserved.</p>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </body>
  90. </html>



Then run it on your browser and the template has finished! If you still don't understand, you can ask in the comments column below. Hopefully useful and see you in the next article!
Visit -> Codelatte.org

Baca juga:

Agustus 10, 2018 Tutorial

Next Post
Previous Post