Cara Mengatur Horizontal Alignment Dengan Bootstrap 4



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





Bagi dapat mengetahui  Cara Mengatur Horizontal Alignment Dengan Bootstrap 4 kita seketika saja membangun struktur htmlnya seperti di script di bawah ini. Teman-teman dapat 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 seandainya telah selesai teman-teman simpan dengan format html. Dan seandainya teman-teman buka di browser masing-masing karenanya tampilannya akan seperti di gambar di bawah ini.





Sekiranya 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 sangat awal lalu sisa column berada di sangat ahir (offset column di ahir)


  • justify-content-center memberikan posisi alignment secara horizontal dengan posisi column berada di sangat tengah lalu sisa column berada di sangat ahir dan sangat awal (offset column di untuk dua di awal dan ahir)


  • justify-content-end memberikan posisi alignment secara horizontal dengan posisi column berada di sangat ahir lalu sisa column berada di sangat depan (offset column di awal)


  • justify-content-around memberikan posisi alignment secara horizontal dengan posisi column berada di tengah lalu sisa column berada di sangat depan , tengah dan ahir (offset column di depan, tengah dan ahir)


  • justify-content-bettwen memberikan posisi alignment secara horizontal dengan posisi column berada di sangat awal dan sangat ahir lalu sisa column berada di sangat tengah (offset sangat di tengah)



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




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more