Rata kanan kiri bootstrap 5

Rata kanan kiri bootstrap 5

BOOTSTRAP Fadlullah Fadul December 3, 2018

Media object merupakan bagian dari bootstrap layout yang berguna untuk menempatkan beberapa komponen dan media (seperti gambar, video dan lainnya) agar memiliki tata letak yang sejajar dengan konten-nya. Layout untuk objek media seperti ini, dimaksudkan untuk membuat stayle sejenis agar dapat digunakan secara berulang (terus-menerus) beberapa kali sesuai kebutuhan. Sehingga, dapat diaplikasikan pada komponen yang kompleks sekalipun


Penggunaan Bootstrap media object sering kita lihat pada layout komentar (comment) yang biasanya terdapat dalam sebuah halaman blog. Bootstrap media object juga bisa digunakan untuk aplikasi lainnya sesuai kebutuhan.

Cara Menggunakan Bootstrap Media Object

Untuk menggunakan bootstrap media object hanya dibutuhkan dua nama class, yaitu media dan media-body. class media digunakan sebagai induk objek atau sebuah kontainer yang menampung media. Adapun, media-body adalah konten yang berdampingan dengan media tersebut.

Untuk penataan yang lebih baik dan mengatur spasi (jarak) antar element, Anda juga dapat menggunakan spacing utilities bawaan bootstrap. Akan tetapi, jika Anda memiliki style khusus sendiri maka utilities tersebut tidak diperlukan.

Contoh

Beberapa contoh berikut langsung dapat Anda praktekkan. dengan editor khusus dari kami, Anda bisa koding langsung di browser dan melihat hasilnya secara realtime.

Contoh 1:

Rata kanan kiri bootstrap 5
Raden Ajeng Kartini

Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.


Pada contoh tersebut, keterangannya adalah sebagai berikut:

  • Baris ke-1: menulis HTML element
    dengan nama class media diakhiri dengan tag penutup
    dibaris ke-6.
  • Baris ke-2: Menulis HTML
    Rata kanan kiri bootstrap 5
    Raden Ajeng Kartini

    Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.

    Rata kanan kiri bootstrap 5
    Cut Nyak Dhien

    Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.


Penataan (Alignment) Media

Karena Bootstrap 4 menggunakan flex, maka kita juga dapat menggunakan flex utilities bawaan bootstrap untuk mengatur perataan objek media supaya rata atas, tengah atau bawah.

Berikut contoh lengkapnya dibawah ini, perhatikan penataan pada media gambarnya.

Rata Atas (top-aligned) Media

Rata kanan kiri bootstrap 5
Raden Ajeng Kartini

Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.


Rata Tengah (center-aligned) Media

Rata kanan kiri bootstrap 5
Raden Ajeng Kartini

Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.


Rata Bawah (bottom-aligned) Media

Rata kanan kiri bootstrap 5
Raden Ajeng Kartini

Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.


Order (Pengurutan)

Media (gambar dan lainnya) selain diposisikan di sebelah kiri, kita juga dapat menempatkannya di posisi kanan dan konten-nya disebelah kiri (dibalik).

Caranya, kita dapat memindahkan element (

Rata kanan kiri bootstrap 5


Media List

Media list adalah media object yang ditempatkan pada HTML list element seperti

    dan

      Untuk menggunakannya, tambahkan class .list-unstyled pada ul atau ol element tersebut. Kemudian class .media ditulis didalam element

    1. .

      Untuk memahaminya, berikut contoh lengkapnya:

      • Rata kanan kiri bootstrap 5
        Cut Nyak Dhien

        Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.

      • Rata kanan kiri bootstrap 5
        Raden Ajeng Kartini

        Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.

      • Rata kanan kiri bootstrap 5
        Tuanku Imam Bonjol

        Tuanku Imam Bonjol lahir di Bonjol, Pasaman, Sumatera Barat, Indonesia pada 1 Januari 1772. Beliau wafat dalam pengasingan dan dimakamkan di Lotak, Pineleng, Minahasa, pada 6 November 1864. Beliau adalah salah seorang ulama, pemimpin dan pejuang yang berperang melawan Belanda dalam peperangan yang dikenal dengan nama Perang Padri pada tahun 1803-1838.

      • Rata kanan kiri bootstrap 5

        Cut Nyak Dhien

        Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.

      • Rata kanan kiri bootstrap 5

        Raden Ajeng Kartini

        Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.

      • Rata kanan kiri bootstrap 5

        Tuanku Imam Bonjol

        Tuanku Imam Bonjol lahir di Bonjol, Pasaman, Sumatera Barat, Indonesia pada 1 Januari 1772. Beliau wafat dalam pengasingan dan dimakamkan di Lotak, Pineleng, Minahasa, pada 6 November 1864. Beliau adalah salah seorang ulama, pemimpin dan pejuang yang berperang melawan Belanda dalam peperangan yang dikenal dengan nama Perang Padri pada tahun 1803-1838.


      Additional Information and Resources

      How do I justify text in bootstrap?

      The text can justified by using the . text-justify class and for left, right, and center alignment of text, use the text-left, text-right and text-center classes respectively.

      How do I center text in bootstrap?

      Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.

      How do I change font

      Make sure to set $font-size-base in rem ..
      Use a native font stack that selects the best font-family for each OS and device..
      For a more inclusive and accessible type scale, we use the browser's default root font-size (typically 16px) so visitors can customize their browser defaults as needed..

      How do I change the font weight in bootstrap?

      Oh, that's cute! ... .
      Also (in Bootstrap 4) you can add the suggested class ("font-weight-bold") to the boxes and the text inside will turn bold. ... .
      Cool, cool man. ... .
      There is no text-weight-italic in that pull request. ... .
      Shouldn't that be "font-weight-normal" and not "text-weight-normal"?.