API tools faq
paste
martinms

HTML untuk dijadikan Bootstrap style

martinms
Jul 12th, 2021
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9.   <title>Komponen Bootstrap</title>
  10.  
  11.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  12.  
  13.   <style>
  14.     body {
  15.       padding-top: 50px;
  16.     }
  17.   </style>
  18. </head>
  19.  
  20. <body>
  21.   <div class="container">
  22.     <div class="row">
  23.       <div class="col-6">
  24.         <form action="#" method="post">
  25.           <h3 class="display-5">Formulir Pendaftaran UKM XYZ Fakultas Teknik UNIB</h3>
  26.  
  27.           <div>
  28.             <label for="nama-lengkap">Nama Lengkap:</label>
  29.             <input type="text" name="nama_lengkap" id="nama-lengkap" required="required">
  30.           </div>
  31.  
  32.           <div>
  33.             <label for="npm">NPM:</label>
  34.             <input type="text" name="npm" id="npm" required="required">
  35.           </div>
  36.  
  37.           <div>
  38.             <label for="prodi">Prodi:</label>
  39.             <select name="prodi" id="prodi">
  40.               <option value="A">Informatika</option>
  41.               <option value="B">Teknik Elektro</option>
  42.               <option value="C">Teknik Mesin</option>
  43.               <option value="D">Teknik Elektro</option>
  44.               <option value="E">Arsitektur</option>
  45.               <option value="F">Sistem Informasi</option>
  46.             </select>
  47.           </div>
  48.  
  49.           <div>
  50.             <label for="scan-ktm">File Scan KTM:</label>
  51.             <input type="file" name="ktm" id="scan-ktm">
  52.           </div>
  53.  
  54.           <div>
  55.             <input type="submit" value="Daftar">
  56.           </div>
  57.  
  58.         </form>
  59.       </div>
  60.  
  61.       <div class="col-6">
  62.         <h5>Daftar Buah</h5>
  63.         <ul>
  64.           <li>Apel</li>
  65.           <li>Mangga</li>
  66.           <li>Jeruk</li>
  67.           <li>Semangka</li>
  68.           <li>Rambutan</li>
  69.           <li>Nanas</li>
  70.         </ul>
  71.       </div>
  72.     </div>
  73.  
  74.     <div class="row mt-3">
  75.       <div class="col-6">
  76.         <!-- Ubah tabel berikut sehingga menggunakan styling Bootstrap -->
  77.         <h5>Tabel</h5>
  78.         <table>
  79.           <thead>
  80.             <tr>
  81.               <th>Judul 1</th>
  82.               <th>Judul 2</th>
  83.               <th>Judul 3</th>
  84.             </tr>
  85.           </thead>
  86.           <tbody>
  87.             <tr>
  88.               <td>Kolom 1 dibaris 1</td>
  89.               <td>Kolom 2 dibaris 1</td>
  90.               <td>Kolom 3 dibaris 1</td>
  91.             </tr>
  92.  
  93.             <tr>
  94.               <td>Kolom 1 dibaris 2</td>
  95.               <td>Kolom 2 dibaris 2</td>
  96.               <td>Kolom 3 dibaris 2</td>
  97.             </tr>
  98.  
  99.             <tr>
  100.               <td>Kolom 1 dibaris 3</td>
  101.               <td>Kolom 2 dibaris 3</td>
  102.               <td>Kolom 3 dibaris 3</td>
  103.             </tr>
  104.           </tbody>
  105.         </table>
  106.       </div>
  107.       <div class="col-6">
  108.         <img
  109.          src="https://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2hpbGR8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
  110.          alt="">
  111.       </div>
  112.     </div>
  113.   </div>
  114. </body>
  115.  
  116. </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!