Membuat Jumbotron,About,Dan News

Assalamualaikum Wr. Wb.

Ahmad Dindan Romadhoni

Membuat jumbotron dengan bootstrap 4

Jumbotron adalah sebuah komponen yang ringan dan fleksibel yang di sediakan oleh bootstrap.untuk menampilkan konten yang di unggulkan pada sebuah halaman website.Biasanya pesan yang ingin di sampaikan ke pengunjung website,dibuat menggunakan jumbotron agar lebiah terlhat dan mendapatkan perhatian dari pengunjung website.pada kali ini kita akan membuat jumbotron yang memiliki lebar penuh.kita akan menggunakan jumbotron-fluid.class jumbotron-fluid ini harus diletakan setara dengan kelas jumbroton.

Berikut adalah script jumbotron fluid:

<div class="jumbotron jumbotron-fluid">   <div class="container">     <h1 class="display-4">Contoh Jumbotron-Fluid</h1>     <p class="lead">ini adalah contoh dari jumbotron fluid.hanya sedikit modifikasi dengan menambahkan class jumbotron fluid p>   </div> </div>

Pada contoh ini kita menerapkan class .container di dalam class .jumbotron,agar isi jumbotron lebih masuk kebagian dalam.

dan hasilnya adlah sebagai berikut:

Ok sekian tutorial tentang jumbotron bootstrap 4.

Membuat About Dengan Grid System

Grid System merupakan pengaturan ukuran yang ditampilkan pada monitor.Grid System berfungsi untuk membuat pengaturan untuk lebar ddari masing masing kmponen web sehingga kita dapat denag bebas mengatur ke-responsivan halam website yang kita buat dengan bootstrap

Mengenal Grid System Bootatrap

·         Col-lg-

Digunaka untuk mengatur grid pada monitor computer yang berukuran besar.

·         Col-mid-

Digunakan untuk mengatur grid pada layar monitor computer yang berukuran sedang

·         Col-sm-

Digunakan untuk mengatur grid dengan layar yang berukuran tablet

·         Col-xs-

Digunakan untuk mengatur grud untuk layar handphone

 

Untuk membuat about dengan menggunakan grid system silakan masukan sript berikut:

<!--about-->

<section class="About" id="About"></section>

<div class="container">

    <div class="row">

        <div class="col">

            <h1>About</h1>

        </div>

        </div>

        <div class="row">

            <div class="col">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            </div>

            <div class="col text-center">

               <img src="img/logo.png">

            </div>

        </div>

    </div>

Dan Hasilnya Sebagai Berikut:

Ok sekian tutorial tentang About Menggunakan Grid System bootstrap 4.

Membuat News Dengan Card Bootstrap 4

Komponen card adalah komponen yang menggantikan komponen panel dari versi bootstrap sebelumnya.Card memiliki 3 bagian yaitu bagian header,body dan footer.

Untuk memuat News pada web Menggunakan card Silahkan masukan script berikut:

<section class="News" id="News"></section>

    <div class="container">

        <h1>News</h1>

        <div class="card-group">

  <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

  <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

 <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

</div>

    </div>

 

Dan Hasilnya sebagai berikut:

 

Terimakasih sudah mengikuti tutorial dari saya.