search

Cara menggunakan bootstrap footer

1 years ago
Komentar: 0
Dibaca: 64

Assalamualaikum wr. wb
Hallo teman semua pada kesempatan kali ini saya memposting bagaimana cara membuat footer menggunakan bootstrap. Berikut langkah-langkahnya

Cara menggunakan bootstrap footer

LATAR BELAKANG

Pada suatu program atau aplikasi biasanya sering menggunakan footer sebagai salah satu bagian dari layout web.

MAKSUD DAN TUJUAN

Untuk mempraktekan apa yang telah saya pelajari mengenai bootstrap diw3schools

ALAT DAN BAHAN

  • Bootstap
  • Sublime text
  • Laptop

TAHAP PELAKSANAAN

  • Langkah pertama, kita harus siapkan file bootstrapnya apabila sudah ada atau download terlebih dahulu disini. 
  • File bootstrap diletakan satu folder dengan file footer
  • Kemudian buat file diberi nama footer.html
  • Selanjutnya tulis script dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
     <title>FOOTER</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
</head>
<body>
      <div class="container-fluid">
          <div class="row">
             <div class="col-sm-12" style="background-color:#171717;color:white;text-align:center;"><h2>LOREM IPSUM</h2>
             <hr style="background-color:#4E4E4E;">
             <a href="#"><img class="image" border="0" title="#" src="image/f.png" width="40px" height="40px" ></a>

             <a href="#"><img class="image" border="0"title="#" src="image/ig.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/gp.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/tw.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/y.png" width="40px" height="40px"></a>
      <br>
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
     
    <hr style="background-color:#4E4E4E;">
      Copyright &copy; 2017 Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    </div>
  </div>
</div>
</body>
</html>

  • Kalau sudah save file tersebut (ctrl+s)
  • Hasilnya akan muncul seperti dibawah ini 

Cara menggunakan bootstrap footer

Dari hasil yang diatas anda bisa menambahkan judul, media sosial maupun keterangan-keterangan mengenai aplikasi yang anda buat.

Keterangan  :

  • <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>, digunakan untuk memanggil file bootstrap.
  • <div class="container-fluid">, digunakan untuk isi agar full atau penuh.
  • <div class="row">
    <div class="col-sm-12>, menambahkan kolom anda dapat memasukan sesuai keinginan anda 12 merupakan untuk tampilan penuhnya.

KESIMPULAN

Dengan menggunakan bootstrap, tampilan website bisa responsive.

REFERENSI

Sekian dan terimakasih 

kode bootstrap Footer button bootstrap Footer CSS Bootstrap icon Footer W3Schools Footer generator

Pos Terkait

Cara menggunakan arti kata php
Cara menggunakan arti kata php

Cara menggunakan mysql monitor agent user
Cara menggunakan mysql monitor agent user

Javascript find next sibling with class
Javascript find next sibling with class

What is session in php explain with example?
What is session in php explain with example?

Penggunaan fungsi PRELOAD pada PHP
Penggunaan fungsi PRELOAD pada PHP

Cara menggunakan INTRO.JS pada JavaScript
Cara menggunakan INTRO.JS pada JavaScript

Why cant i freeze the second row in excel?
Why cant i freeze the second row in excel?

Uncaught typeerror: mysqli_num_rows(): argument #1 ($result) must be of type mysqli_result
Uncaught typeerror: mysqli_num_rows(): argument #1 ($result) must be of type mysqli_result

Cara menggunakan mysql workbench ubuntu
Cara menggunakan mysql workbench ubuntu

Cara menggunakan php-fpm config
Cara menggunakan php-fpm config

Periklanan

BERITA TERKINI

Cara diet dalam 1 minggu tanpa olahraga
1 years ago . by TannedStole
Apakah kenari betina bisa over birahi?
1 years ago . by Eight-yearEnvoy
Apa yang dimaksud interval nada tuliskan contohnya?
1 years ago . by AdjustableLikeness
Do I need PHP if I know JavaScript?
1 years ago . by AestheticPlaza
Cara membersihkan kamera HP realme c15
1 years ago . by ConsiderateBattling
Google Sheets count cells
1 years ago . by NegligiblePublisher
Cara membuat background gambar di html dengan notepad
1 years ago . by MissedArdor
Cara membuat saus pedas alami
1 years ago . by Open-endedBasis
Cara memasak sarden kings fisher
1 years ago . by NegotiableAnomaly
Cara mengobati gejala hiv pada pria
1 years ago . by FallingMajority

Toplist Popular

#1
Top 9 contoh eksposisi yang dapat dimanfaatkan untuk mempromosikan dan menjual barang, jasa dan aktivitas 2022
2 years ago
#2
Top 10 hal apa yang sudah kalian lakukan sebagai bentuk penghargaan terhadap hak asasi manusia 2022
2 years ago
#3
Top 10 wirupa merupakan unsur dalam tari yang memberikan kejelasan tentang 2022
1 years ago
#4
Top 10 perusahaan yang melakukan pengolahan bahan baku menjadi bahan jadi disebut dengan perusahaan 2022
1 years ago
#5
Top 10 yang bukan termasuk langkah-langkah dalam merancang sebuah wirausahawan adalah 2022
2 years ago
#6
Top 1 jika titik l -8, 10 ditranslasikan terhadap titik t(52), maka akan terbentuk bayangan di titik 2022
1 years ago
#7
Top 8 apa itu benedict dan biuret? 2022
1 years ago
#8
Top 9 bagaimana cara kamu menyikapi semua perbedaan yang dimiliki oleh teman-temanmu 2022
1 years ago
#9
Top 9 sebuah prisma segitiga abcdef dengan ukuran lihat gambar luas permukaan prisma tersebut adalah cm2 2022
1 years ago
#10
Top 6 apa itu self pick up grabfood? 2022
2 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeendefrjakoptzhthit
Copyright © 2024 toptenid.com Inc.