Guide How to Use Offline Bootstrap for the First Time

Bootstrap is a CSS framework that is used to create web interfaces. Bootstrap provides ready-to-use classes and components, so you don't have to write CSS code from scratch.

Say you want to create a button, then you don't need to create it from scratch. You just need to add the “btn” class and your button will be ready in no time. Initially Bootstrap was developed by Twitter developers, and the first time the website used Bootstrap was Twitter. Then, along the way Bootstrap was made open source so that everyone can contribute to it.

Currently, many website developers are using Bootstrap. Why? Because obviously Bootstrap has many advantages, including being able to save time, having a modern design, a very responsive, lightweight display, and much more.

How to Use Offline Bootstrap for Beginners

Then, how to use Bootstrap for beginners? Here are the steps to use it. Just follow the steps below.

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

1. After the download process is complete, you will get a Bootstrap file in the form of .rar.

2. Then, please create a new folder in the htdocs, for example here I create a new folder with the name "learningbootstrap". Please move the .rar file into this new folder.

3. Then, please extract the file.

4. Then, please open the text editor on your PC or laptop. And please open the folder that you created earlier, for example here my folder which was "learning bootstrap".

5. Then, please create a new file with the name index.html.

6. Then, please fill in the file with the code below.

<!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">


<link rel="stylesheet" href="css/bootstrap.min.css" />

<script src="js/bootstrap.min.js"></script>
</head>

<body>


<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..!!!

Guide How to Use Offline Bootstrap for the First Time

How to Use Offline Bootstrap for Beginners

How to Use Bootstrap

Post a Comment

Erzedka Media

#buttons=(Ok, Go it!) #days=(20)

Contact form

var darkImage = document.querySelector('#darkroom1'); (localStorage.getItem('mode')) === 'darkmode' ? darkImage.setAttribute("src", darkImage.getAttribute("data-dark")): darkImage.setAttribute("src", darkImage.getAttribute("data-normal"))

Guide How to Use Offline Bootstrap for the First Time

Related Post

How to Use Offline Bootstrap for Beginners

How to Use Bootstrap

You Might Like

Post a Comment

#buttons=(Ok, Go it!) #days=(20)

Contact form