Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap

Membuat Jumbotron dengan Bootstrap
Pada tutorial belajar bootstrap sebelumnya telah di jelaskan tentang cara menggunakan bootstrap, membuat table dengan design bootstrap, membuat tombol dengan bootstrap. dan beberapa penjelasan tentang cara penggunaan bootstrap lainnya.
Jumbotron merupakan semacam bentuk yang di buat untuk tujuan membuat semacam pengumuman,konten khusus atau informasi tentang halaman website. biasanya jumbotron di buat pada halaman depan website. secara default tampilan umum jumbotron bootstrap berwarna abu-abu dengan sisi bulat pada tiap sudut jumbotron. jumbo tron berisi text di dalamnya yang bebas anda customize sesuai keinginan anda.
Hampir seluruh design template website sekarang ini rata-rata semua menggunakan jumbotron untuk memberi informasi tentang halaman website pada halaman depannya. jumbotron bootstrap juga dapat anda modifikasi sendiri dengan menambahkan css anda sendiri dan dapat anda design sesuai dengan keinginan anda. tetapi pada contoh kali ini tentang membuat jumbotron dengan bootstrap kita hanya akan menggunakan atau membuat jumbotron bootstrap dengan gaya standar dari bootstrap sendiri. pada tutorial selanjutnya baru kita akan membuat design jumbotron agar lebih menarik. Membuat jumbotron dengan bootstrap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 5 : Membuat jumbotron dengan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>www.malasngoding.com</h1> <p> Tutorial pemrograman web, mobile dan design. <br/> Belajar Jumbotron bootstrap di malasngoding.com. <br/> Cara Membuat jumbotron pada dengan Bootstrap | www.malasngoding.com. </p> <p> <button class="btn btn-lg btn-primary">Tutorial</button> <button class="btn btn-lg btn-danger">Demo</button> </p> </div> </div> </body> </html> |
Membuat jumbotron dengan bootstrap

membuat jumbotron dengan bootstrap
See the Pen RrpxyX by Malas Ngoding (@malasngoding) on CodePen.
Untuk membuat jumbotron memenuhi layout anda bisa mengganti class “container” dengan “container-fluid”. sekian tutorial tentang membuat jumbotron dengan bootstrap. untuk selanjutnya di tutorial belajar bootstrap di www.malasngoding.com akan di bahas tentang pengenalan glyphicon bootstrap dan tutorial bootstrap lainnya.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya

Membuat Template Blog Sederhana Dengan Bootstrap


Bootstrap Part 16 : Mengenal Grid System Bootstrap


Bootstrap Part 15 : Membuat Modal Dengan Bootstrap

