Membuat Middle Konten dengan Bootstrap 3

Membuat Middle Konten dengan Bootstrap 3 - Middle konten merupakan penataan letak suatu konten pada website yang berpusat di tengah layar, mungkin diantara kalian pernah melihat desain website yang menampilkan konten baik berupa gambar, ataupun berupa objek lainnya berada persis di tengah layar. Tentu desain seperti ini dibuat dengan kebutuhan dan selera masing - masing. Nah, buat kalian yang penasaran dan ingin mencoba membuat desain konten seperti itu, berikut akan saya kasih tutorial dan mempraktekan bagaimana Membuat Middle Konten dengan Bootstrap 3.

Sebelum memulai praktek membuat middle konten, kalian wajib mengerti cara menggunakan bootstrap, dan pada kasus yang akan di buat nanti akan menggunakan bootstrap 3, jadi silahkan kalian siapkan file bootstrap 3 terlebih dahulu.

Langkah 1 : Membuat Middle Konten dengan Bootstrap 3

Kita mulai dengan langkah pertama, yakni kalian buat dulu struktur sederhana HTML seperti berikut untuk membuat konten, yakni berupa gambar dan satu paragraf.

<div class="container valign">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 col-xs-4">
            <!-- kontennya -->
            <div class="panel panel-default">
                  <img src="image-1.jpeg" class="img-responsive">
              <div class="panel-body">
                <p class="text-justify">Lorem ipsum dolor sit amet...</p>
                <a href="#" class="btn btn-info btn-sm">More</a>
              </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-4">
            <!-- kontennya -->
            <div class="panel panel-default">
                  <img src="image-2.jpeg" class="img-responsive">
              <div class="panel-body">
                <p class="text-justify">Lorem ipsum dolor sit amet...</p>
                <a href="#" class="btn btn-info btn-sm">More</a>
              </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>

Langkah 2 : Membuat Middle Konten dengan Bootstrap 3

Setelah membuat struktur seperti diatas, selanjutnya kita akan mendesain bagian konten agar tujuan utama kita yakni membuat middle konten tercapai dengan menambahkan sintak CSS sederhana seperti berikut.

.valign {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.panel {border-radius: 0}

Setelah semua sintak telah diketikan semua, silahkan simpan dan buka pada browser masing - masing dan lihat hasilnya, maka hasilnya akan seperti gambar berikut, dimana konten yang telah kita buat akan terpusat dibagian tengah (middle) layar. Selesai

Baik, cukup sekian tutorial kali ini mengenai Membuat Middle Konten dengan Bootstrap 3, semoga bermanfaat dan selamat mencoba :)

24 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat