Cara Mengatur Horizontal Alignment Dengan Bootstrap 4

Hallo teman-teman Dumet School, kembali lagi dengan saya shelli ripati. Kali ini saya akan membahas tentang Cara Mengatur Horizontal Alignment Dengan Bootstrap 4. Dimana Horizontal Alignment berfungsi mengatur posisi align kolom secara horizontal dengan menggunakan class yag sudah disediakan di bootstrap 4.

Untuk dapat mengetahui Cara Mengatur Horizontal Alignment Dengan Bootstrap 4 kita langsung saja membuat struktur htmlnya seperti pada script di bawah ini. Teman-teman bisa salin scriptnya.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style>
     .text-white{height: 200px}
     .col-4{padding: 10px 0; border:1px solid black;}
     </style>
     </head>
  <body>
      <div class="container text-center">
        <div class="row">
          <h1>Cara Mengatur Horizontal Alignment Dengan Bootstrap 4</h1>
        </div>
      </div>
    
      <div class="container text-center text-white">
        <div class="row justify-content-start">
          <div class="col-4 bg-primary">
            justify-content-start
          </div>
          <div class="col-4 bg-danger">
            justify-content-start
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-4 bg-primary">
            justify-content-center
          </div>
          <div class="col-4 bg-danger">
            justify-content-center
          </div>
        </div>
        <div class="row justify-content-end">
          <div class="col-4 bg-primary">
            justify-content-end
          </div>
          <div class="col-4 bg-danger">
            justify-content-end
          </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-4 bg-primary">
            justify-content-around
          </div>
          <div class="col-4 bg-danger">
            justify-content-around
          </div>
        </div>
        <div class="row justify-content-between">
          <div class="col-4 bg-primary">
            justify-content-between
          </div>
          <div class="col-4 bg-danger">
            justify-content-between
          </div>
        </div>
      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Disini teman-teman jangan lupa cek kembali link bootstrap 4 nya. Kebetulan saya menggunakan bootstrap 4 secara online. Kemudian jika sudah selesai teman-teman simpan dengan format html. Dan jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Jika teman-teman perhatikan class justify content memberikan posisi alignment secara horizontal dengan berbeda-beda posisinya. Berikut penjelasan masing-masing classnya ya.

justify-content-start memberikan posisi alignment secara horizontal dengan posisi column berada di paling awal lalu sisa column berada di paling akhir (offset column di akhir)
justify-content-center memberikan posisi alignment secara horizontal dengan posisi column berada di paling tengah lalu sisa column berada di paling akhir dan paling awal (offset column di bagi dua di awal dan akhir)
justify-content-end memberikan posisi alignment secara horizontal dengan posisi column berada di paling akhir lalu sisa column berada di paling depan (offset column di awal)
justify-content-around memberikan posisi alignment secara horizontal dengan posisi column berada di tengah lalu sisa column berada di paling depan , tengah dan akhir (offset column di depan, tengah dan akhir)
justify-content-bettwen memberikan posisi alignment secara horizontal dengan posisi column berada di paling awal dan paling akhir lalu sisa column berada di paling tengah (offset paling di tengah)

Demikian artikle tentang Cara Mengatur Horizontal Alignment Dengan Bootstrap 4. Semoga bermanfaat dan selamat mencoba.

Cara Mengatur Horizontal Alignment Dengan Bootstrap 4

Kategori