Advertisement
Guest User

Untitled

a guest
Feb 18th, 2019
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.19 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>Grille</title>
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  11. <a class="navbar-brand" href="#">Entrainement Bootstrap</a>
  12. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  13. aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  14. <span class="navbar-toggler-icon"></span>
  15. </button>
  16.  
  17. <div class="navbar-collapse" id="navbarSupportedContent">
  18. <ul class="navbar-nav mr-auto">
  19. <li class="nav-item active">
  20. <a class="nav-link" href="#">Accueil <span class="sr-only">(Selectionné)</span></a>
  21. </li>
  22. <li class="nav-item">
  23. <a class="nav-link" href="#">Boutique</a>
  24. </li>
  25. <li class="nav-item dropdown">
  26. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
  27. aria-haspopup="true" aria-expanded="false">
  28. Nos articles
  29. </a>
  30. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  31. <a class="dropdown-item" href="#">Action</a>
  32. <a class="dropdown-item" href="#">Another action</a>
  33. <div class="dropdown-divider"></div>
  34. <a class="dropdown-item" href="#">Something else here</a>
  35. </div>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  39. </li>
  40. </ul>
  41. <form class="form-inline my-2 my-lg-0">
  42. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  43. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  44. </form>
  45. </div>
  46. </nav>
  47.  
  48. <div class="container border border-dark">
  49. <h1 class="display-4 text-center">Entrainement Bootstrap</h1>
  50. </div>
  51.  
  52. <br>
  53.  
  54. <div class="container-fluid border border-dark">
  55. <h1 class="display-4 text-center">Entrainement Bootstrap</h1>
  56. </div>
  57.  
  58. <br>
  59. <div class="container">
  60. <div class="row">
  61. <div class="col-md-10 col-sm-5 bg-info">
  62. <p class="text-center">Col 10</p>
  63. </div>
  64. <div class="col-md-1 bg-primary">
  65. <p class="text-center"> Col 1</p>
  66. </div>
  67. <div class="col-md-1 bg-warning">
  68. <p class="text-center"> Col 1</p>
  69. </div>
  70. </div>
  71. <br>
  72. <div class="row">
  73. <div class="col-md-6 col-sm-3 bg-danger">
  74. <p class="text-center">Col 6</p>
  75. </div>
  76. <div class="col-md-3 bg-primary">
  77. <p class="text-center"> Col 3</p>
  78. </div>
  79. <div class="col-md-1 bg-warning">
  80. <p class="text-center"> Col 1</p>
  81. </div>
  82. </div>
  83. <div class="row">
  84. <div class="col border border-dark bg-primary">1</div>
  85. <div class="col border border-dark bg-success">2</div>
  86. <div class="col border border-dark bg-primary">3</div>
  87. <div class="col border border-dark bg-success">4</div>
  88. <div class="col border border-dark bg-primary">5</div>
  89. <div class="col border border-dark bg-success">6</div>
  90. <div class="col border border-dark bg-primary">7</div>
  91. <div class="col border border-dark bg-success">8</div>
  92. <div class="col border border-dark bg-primary">9</div>
  93. <div class="col border border-dark bg-success">10</div>
  94. <div class="col border border-dark bg-primary">11</div>
  95. <div class="col border border-dark bg-success">12</div>
  96. <div class="col border border-dark bg-primary">13</div>
  97. <div class="col border border-dark bg-success">14</div>
  98. <div class="col border border-dark bg-primary">15</div>
  99. <div class="col border border-dark bg-success">16</div>
  100. </div>
  101. <br>
  102. <div class="row justify-content-end">
  103. <div class="col-md-3 bg-info">Lorem</div>
  104. <div class="col-md-3 bg-primary">Lorem</div>
  105. </div>
  106. <br>
  107. <div class="row justify-content-center">
  108. <div class="col-md-3 bg-info">Lorem</div>
  109. <div class="col-md-3 bg-primary">Lorem</div>
  110. </div>
  111. <br>
  112. <div class="row justify-content-around">
  113. <div class="col-md-3 bg-info">Lorem</div>
  114. <div class="col-md-3 bg-primary">Lorem</div>
  115. </div>
  116. <br>
  117. <div class="row justify-content-between">
  118. <div class="col-md-3 bg-info">Lorem</div>
  119. <div class="col-md-3 bg-primary">Lorem</div>
  120. </div>
  121. <br>
  122. <div class="row">
  123. <div class="w-50 bg-success">Lorem</div>
  124. </div>
  125. <div class="row">
  126. <div class="col-md-3 ml-5 bg-info">Lorem</div>
  127. </div>
  128. </div>
  129.  
  130. <script src="js/jquery-3.3.1.js"></script>
  131. <script src="js/popper.min.js"></script>
  132. <script src="js/bootstrap.min.js"></script>
  133. </body>
  134. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement