Cara Mengatur Vertical Alignment Dengan Bootstrap 4

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

Untuk dapat mengetahui Â Cara Mengatur Vertical 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{padding: 10px 0;}
    </style>
  </head>
  <body>
      <div class="container text-center">
        <div class="row">
          <h1>Cara Mengatur Vertical Alignment Dengan Bootstrap 4</h1>
        </div>
      </div>
    
      <div class="container">
      <div class="row text-center text-white">  
        <div class="col align-self-start bg-info">
          align-self-start
        </div>
        <div class="col align-self-center bg-secondary">
          align-self-center
        </div>
        <div class="col align-self-end bg-danger">
          align-self-end
        </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.

Tampilan versi laptop

Tampilan versi mobile

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

align-self-start memberikan posisi alignment secara vertical dengan posisi column berada di paling atas diantara column yang lain.
align-self-center memberikan posisi alignment secara vertical dengan posisi column berada di paling center diantara column yang lain.
align-self-end memberikan posisi alignment secara vertical dengan posisi column berada di paling bawah diantara column yang lain.

Demikian artikle tentang Cara Mengatur Vertical Alignment Dengan Bootstrap 4. Semoga bermanfaat buat teman-teman, sampai jumpa di pembahasan selanjutnya dan selamat mencoba ya. Terima Kasih

Cara Mengatur Vertical Alignment Dengan Bootstrap 4

Kategori