How to install and use bootstrap

As a web developer or you are aspiring to be one you are likely to come across the term bootstrap. Bootstrap is an essential tool for front-end developers since it has aggregated different classes and styles together so that web developers do not invent these tools always making the process of web design easier and faster to accomplish

Bootstrap is the most popular CSS framework that is used in developing responsive mobile-friendly websites. By saying the most popular it means that it is the most white widely used and acceptable CSS tool.

Bootstrap was originally developed by Twitter and it is sometimes referred to as Twitter bootstrap. You can get to the latest version of bootstrap either on the official website of get bootstrap or on Github.

We have defined bootstrap as a CSS framework but we may like to know what a framework is, and it basically means a platform for developing software applications in that it provides a foundation on which programs refer to the contents in the application.

Some examples of frameworks include the Android application framework used by Android apps, the .NET framework for Windows, and many more.

A framework contains different predefined classes and functions that are referenced so as to achieve a certain goal.

An example in bootstrap is how we use a class like 'img-responsive' which bootstrap has instructions predefined where the image responds and fits depending on the size of the browser in that the developer will not have to say what will happen to the image when it is viewed either by phone, laptop or desktop.

Without bootstrap, the developer will have to write every single instruction for every element in the web page but the bootstrap framework simplifies this work for the developer.

• It is open source meaning you get it freely without purchase
• It is flexible to work with that's why it became popular very quickly after its release in 2011
• It offers a consistent design procedure meaning its components do not change over time to time
• It is compatible with any ID or editor and any server-side language

'With bootstrap, you concentrate on the development work without worrying about the design'

To work with bootstrap two files are required
1. .CSS file
      bootstrap.css or bootstrap.min.css
2. .js file
     bootstrap.js or bootstrap.min.js

There are still other files that are present in bootstrap and are used at certain stages, but to start, the above 2 are the most necessary.

• Visit https://www.getbootstrap.com 
• On the page, you will notice that the current version of bootstrap is v5.1.1
• You can decide to download this version or choose any other lower version in all releases link

• To download the current version click the download button
• The button will direct you to another page, click download

• Select the directory you want to save the zip folder

• Wait for it to finish downloading the zip

Right-click the zip file and select extract files here
It will now create a folder and inside the folder will get CSS and js folders with files inside

Now bootstrap is ready for use in a project

Create your project folder in your desired location on the PC but note for Projects with the server-side eg PHP you create your project in the localhost server, that is, either Xammp or Wamp.

Let's call the project folder 'example1', so I will create a folder called example1
Copy and paste the bootstrap folder inside the example1 folder as below
You can rename the bootstrap folder to bootstrap only

Open your editor and create a file called index.html and save it in example1 folder
Initialise HTML tags
In the head, section add bootstrap CSS and js files as below

With that, you would have installed bootstrap and be ready to use it in your website project

Follow our next articles where we will discuss how to launch a website project with bootstrap components and classes included