Ayan Banerjee Logo

Designed and Created By Ayan Banerjee

All photos from Unsplash. Credits to their respective owners

AB logo made by Debangsu Basu

Made with and Node.js

Sqreen | Runtime Application Protection

Image by Gary Bendig
blog image
Image by Gary Bendig
A beginners guide to

Bootstrap

The most popular
front-end component library


Today I will be showing you how to get started with Bootstrap, the world's most popular front-end component library as the title says on the official bootstrap page at getbootstrap.com.

First some Introduction


Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Its more helpful in quickly building or more prototyping your site. With added responsive grid system, Bootstrap also takes care of the site on smaller devices.

How to get Started


First setup everything like normal when starting a project then there are two ways you can add Bootstrap to your project.

The Easy Way


Goto official Bootstrap site and select download. Then choose 'Compiled CSS and JS' Download the zip and open it. Then copy from css folder the 'bootstrap.min.css' and from js folder select 'bootstrap.min.js' and paste it into your project css and js folder respectively. Finally add a link and a script tag in your html file pointing to those file respectively.

There is another way to link it and that's called the using the CDN Link. If you don't know what CDN is don't worry. Just paste the following lines of code in the head tag:

  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      
    

The CDN taken from official Bootstrap Page.

The intermediate Way


There is another way to install Bootstrap and that is by the help of a package manager. If don't know what a package manager is or if you never used one, it's better to use the above method as they both provide the same result and none of them is a better way than either. For npm paste the following code:

         
        $ npm install bootstrap
        
         

And for gem use the following code:
 
$ gem install bootstrap -v 4.0.0


Can also be done with yargs and bower. Remember to remove the '$' at the beginning.

I have installed Bootstrap now what?


You have reached upto this that means you are setted up your project and added Bootstrap. Now head over to the official Bootstrap documentation and goto layout section. Now the way Bootstrap works is that they have classes that you can add which will make your job easier by applying the styles. Remember to put every element in a container div. Add a div and give a class of 'container'. The container class adds responsiveness to the site (meaning its max-width changes at every breakpoint). The 'container-fluid' class will take entire viewport width so use what suits you best.
Then add another class called the 'row'. The 'row' class centers element and gives you a space of 1440px to write your content. Whatever goes inside row will be centered in the page. Then start adding your content.
For images add the 'img-fluid' class to the container of the image so it will be responsive when adding. For lidt images add the 'img-thumbnail' class so images of various size don't overflow.

For buttons add the 'btn' class and there is a variety of buttons to choose form in the official documentation.
Then comes the form elements. Put every form element (mainly contains a label and an input tag) inside a container and give it the class name of 'form-group'. This keeps every element separate from one another keeping things nice and tidy.
At last there is the nav element that is used for navbars. There are variety of navbars prebuilt to choose from so I am giving you the link to go and see for yourself rather than me mentioning every class separately. Bootstrap Navbars .

So there you are. Now you have a basic understanding of Bootstrap and hope you can build quickly amazing things you had in mind without writing much code. Remember to use the docs of Bootstrap as there are numerous classes and its not possible to write every single one of them. And I can't wait to see what you build, so send me a link as soon as you build something. -Ayan Banerjee