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:
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:
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
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
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
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 [
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 .
Untuk memahaminya,
berikut contoh lengkapnya:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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
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..
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"?.