How to Use Offline Bootstrap for Beginners
- First, please open a web browser on your PC or laptop. Then, please type https://getbootstrap.com/ or just click here.
- Then, you will be taken to the next page. Please click the Download button.
- Wait a few moments until the download is complete. Usually only briefly because of its very small size.
- Then, continue to the next step.
How to Use Bootstrap
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Belajar Bootstrap 4</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Menyisipkan Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- Menyisipkan JQuery dan Javascript Bootstrap --><script src="js/bootstrap.min.js"></script></head><body><!-- Membuat komponen jubotron sebagai header --><header><div class="jumbotron jumbotron-fluid"><div class="container"><div class="row"><div class="col"><h1>Welcome to My Web</h1><div class="lead">Aku sedang belajar Bootstrap 4</div></div></div></div></div></header></body></html>
7. Then, please try running it in a web browser. But before that don't forget to turn on your XAMPP. If successful, the display in your browser will look like the image below.
8. Selesai. Sekarang Anda sudah bisa menggunakan Bootstrap untuk web Anda.
Explanation: Actually in using Bootstrap the things that must be used are these two:
The <link rel="..."> tag is used to insert or link a bootstrap CSS file into an HTML document. While the <script src="..."> tag functions to insert or link your html or php file with Javascript or Jquery Bootstrap.
Why is bootstrap.min.css linked instead of bootstrap.css?
Because the bootstrap.min.css file is a compressed file which is smaller in size and ready to be used for production. While the bootstrap.css file is usually used for development. If you want to modify Bootstrap, you can do so from this file.
In addition, in Bootstrap you can also use the following tags:
The <meta name="..."> tag is used to adjust the appearance of the web to the user's screen. So if your website is opened on a smaller screen like a cellphone, it will scale according to the size of the screen width. This tag is mandatory, if you want to create a responsive web.
So this article discusses how to use Bootstrap. Pay attention to where the bootstrap css and js file directories are when you link them. There is no need to connect all existing bootstrap, you just need to connect the bootstrap.min.css / bootstrap.css and bootstrap.js files.
Hopefully this article can be useful and help you. Thank you..!!!
