Bootstrap Web Developer’s Friend

Are you a web developer or someone who is aspiring to be one, and have been hearing about bootstrap? Is this bootstrap another tool for web development? Will it help me in my development cycle? These and many more questions have troubled my peers and juniors as developers, so I compiled this article to share with you, what answers I found to these questions.

As a fellow web developer my aim in introducing bootstrap and its uses is to help you know about this resource and to implement it easily in your own projects. It will boost your efficiency and your end product will look even better. So let's get started with the article.

What is Bootstrap?

“The world’s most popular front-end component library.”

“Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app “

This is the description shared on their site. So let's break it down, bootstrap is basically just two files, one big CSS(Cascading Style sheet, used for styling web pages) file and one big JS file (JavaScript File, which is the dynamic part of a website).

We can add this code to our website and make really good looking responsive websites in a short time. It is used by a lot of developers (in fact it is one of the most starred(used) repository on Github), startups and many companies. It’s easy, quick to build and good to use which makes bootstrap so awesome.Let's see it in practice:

Adding styled buttons take a lot of time and efforts (plus the code is long), but what if I tell you with bootstrap it just takes a line of code

<button type="button" class="btn btn-primary">Primary</button>        

And you styled and the responsive button is ready this is the power of boostrap[Here with help of classes “btn” and “btn-primary” the CSS style is applied].

Do all sites using Bootstrap look similar?

At this point a question might be arising in your mind, that wouldn’t my site looks similar to another site using it(or the thousands of sites using it now)?

The answer is simple it will be your choice, bootstrap styles can be easily modified by your custom styles to add your individuality in them and to make them look distinct like many companies are doing today. Not only your bootstrap components look good but also they adapt to different screen size(Full-screen browser, mobiles.minimized browser etc) so that your site always look great. Here is a link to thousands of companies using them

I recommend that as a developer you use the components of bootstrap like navbars, menus and the grid system of bootstrap, at the same time use your own styles to create a unique website.

Adding Bootstrap To Our Project

There are two approaches to adding bootstrap to your project

1) Downloading it and adding to your project(For CSS)

Go to the above site and click on download the file(in Zip format).

1. After extracting it go to bootstrap-4.3.1-dist\bootstrap-4.3.1-dist\css subfolder in it. You will see many files(It is actually single file others are minimized versions[white spaces removed and minimized] or specific files).
2. The file we are interested in is bootstrap.css(mostly the topmost one, this is a big CSS file containing styles). Copy this file to where your HTML file of a project is there (beginner level users) or you can use relative path[Eg ../css/bootstrap.css].
3. Now we just need to link this bootstrap with our HTML document. Which is simply done like adding a simple stylesheet.[This is added in the head section of the page]

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

And you have it now as a part of your project. Just use the bootstrap class name as your html tag class and you will have the style like we have used btn and btn default.

<button type="button" class="btn btn-primary">Primary</button>        

Want a simpler way to do this?

2 Using CDN (Just add a line in your HTML)

Add this line in HTML head of your page

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" data-stripped-integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" data-stripped-integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>        

And done it is added to your site. The files are loaded from CDN and added to your project. The mini bootstrap is hosted on the link above from where we are reading the styles and using them

At this point we have covered a basic introduction to bootstrap and how we can include it in our project. This is just an introduction to Bootstrap there are a lot of interesting things to learn about like components in Bootstrap, the grid system in bootstrap and so on. I hope to cover this in upcoming articles.

Wish a good day to my LinkedIn Family