API tools faq
paste
khirulnizam

bootstrap simple example with carousel

khirulnizam
Jan 29th, 2018
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Bootstrap Example</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. <style>
  11. /* Remove the navbar's default margin-bottom and rounded borders */
  12. .navbar {
  13. margin-bottom: 0;
  14. border-radius: 0;
  15. }
  16.  
  17. /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
  18. .row.content {height: 450px}
  19.  
  20. /* Set gray background color and 100% height */
  21. .sidenav {
  22. padding-top: 20px;
  23. background-color: #f1f1f1;
  24. height: 100%;
  25. }
  26.  
  27. /* Set black background color, white text and some padding */
  28. footer {
  29. background-color: #555;
  30. color: white;
  31. padding: 15px;
  32. }
  33.  
  34. /* On small screens, set height to 'auto' for sidenav and grid */
  35. @media screen and (max-width: 767px) {
  36. .sidenav {
  37. height: auto;
  38. padding: 15px;
  39. }
  40. .row.content {height:auto;}
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <nav class="navbar navbar-inverse">
  47. <div class="container-fluid">
  48. <div class="navbar-header">
  49. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  50. <span class="icon-bar"></span>
  51. <span class="icon-bar"></span>
  52. <span class="icon-bar"></span>
  53. </button>
  54. <a class="navbar-brand" href="#">Logo</a>
  55. </div>
  56. <div class="collapse navbar-collapse" id="myNavbar">
  57. <ul class="nav navbar-nav">
  58. <li class="active"><a href="#">Home</a></li>
  59. <li><a href="#">Tentang</a></li>
  60. <li><a href="#">Projek</a></li>
  61. <li><a href="#">Hubungi kami</a></li>
  62. </ul>
  63. <ul class="nav navbar-nav navbar-right">
  64. <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68. </nav>
  69.  
  70. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  71. <!-- Indicators -->
  72. <ol class="carousel-indicators">
  73. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  74. <li data-target="#myCarousel" data-slide-to="1"></li>
  75. <li data-target="#myCarousel" data-slide-to="2"></li>
  76. </ol>
  77.  
  78. <!-- Wrapper for slides -->
  79. <div class="carousel-inner">
  80. <div class="item active">
  81. <img src="la.jpg" alt="Los Angeles">
  82. </div>
  83.  
  84. <div class="item">
  85. <img src="chicago.jpg" alt="Chicago">
  86. </div>
  87.  
  88. <div class="item">
  89. <img src="ny.jpg" alt="New York">
  90. </div>
  91. </div>
  92.  
  93. <!-- Left and right controls -->
  94. <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  95. <span class="glyphicon glyphicon-chevron-left"></span>
  96. <span class="sr-only">Previous</span>
  97. </a>
  98. <a class="right carousel-control" href="#myCarousel" data-slide="next">
  99. <span class="glyphicon glyphicon-chevron-right"></span>
  100. <span class="sr-only">Next</span>
  101. </a>
  102. </div>
  103.  
  104.  
  105. <div class="container-fluid text-center">
  106. <div class="row">
  107. <div class="row content">
  108. <div class="col-sm-2 sidenav">
  109. <p><a href="#" class="btn btn-primary btn-block">
  110. Home
  111. <span class="glyphicon glyphicon-home"></span>
  112. </a></p>
  113. <p><a href="http://kerul.net" class="btn btn-primary btn-block">
  114. Kerul.net
  115. <span class="glyphicon glyphicon-globe"></span></a>
  116. </p>
  117. <p><a href="http://fb.com/kuis.fstm" class="btn btn-primary btn-block">
  118. FSTM KUIS fb
  119. <span class="glyphicon glyphicon-share"></span>
  120. </a></p>
  121. <p><a href="#" class="btn btn-primary btn-warning btn-block">
  122. Delete</a></p>
  123. </div>
  124. <div class="col-sm-9 text-left">
  125. <h1>Welcome</h1>
  126. <p>Welcome to FSTM website.</p>
  127. <hr>
  128. <h3>Please register here</h3>
  129. <form method="get"action="">
  130. Username <br>
  131. <input type="text" placeholder="Username"
  132. class="form-control">
  133. Password <br>
  134. <input type="password" placeholder="Password"
  135. class="form-control">
  136. Fullname <br>
  137. <input type="text" placeholder="Fullname"
  138. class="form-control">
  139. <button type="submit" class="btn btn-primary">
  140. Register</button>
  141. <button type="reset" class="btn btn-warning">
  142. Reset</button>
  143. </form>
  144. </div>
  145.  
  146. </div>
  147. </div>
  148.  
  149. <footer class="container-fluid text-center">
  150. <p>Footer Text</p>
  151. </footer>
  152.  
  153. </body>
  154. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!