Home » How To » Cara Membuat Website Sederhana Dengan Bootstrap 4

Cara Membuat Website Sederhana Dengan Bootstrap 4

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan membuat cara membuat situs web responsif dengan Bootstrap 4.

Buat Situs Web dengan Bootstrap 4

Bootstrap adalah sebuah framework HTML, CSS dan JavaScript paling populer untuk mengembangkan situs web yang responsif dan memprioritaskan perangkat seluler. Bootstrap sepenuhnya gratis untuk diunduh dan digunakan.

Bootstrap 4 adalah versi terbaru dari Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>Website Dengan Menggunakna Bootstrap 4</h1>
  <p>Ubah ukuran halaman responsif ini untuk melihat efeknya!</p> 
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>Tentang Saya</h2>
      <h5>Foto saya:</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" style="width:250px;"></div><br><br>
      <p>Hai Teman-Teman Semua!</p>
      <h3>Sebuah Link Di sini!</h3>
      <p>Beberapa link.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
     <h2>Hello Word(Anime, Movie)</h2>
      <h5>Rilis, 7 November 2019</h5>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg"  style="width:500px;" ></div><br><br>
      <p>Sinopsis</p>
      <p>Film ini akan menjadi kisah perjalanan waktu yang ditetapkan pada tahun 2027 di Kyoto, Jepang. Dikatakan sebagai cerita bahwa "tidak ada yang pernah melihat seseorang menemukan diri mereka" meskipun dengan "adegan, pandangan, dan cahaya yang semua orang tahu.</p>
      <br>
      <h2>Sprited Away</h2>
      <h5>Rilis,20 Juli 2001</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg"  style="width:500px;" ></div><br><br><br><br>
      <p>Sinopsis</p>
      <p>Kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba..</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

</body>
</html>

You may also like