Introduction to Bootstrap Framework – Setting Up & Including Bootstrap in our Project | Tutorial – 2

In this tutorial post we will understand the Bootstrap framework for mobile first responsive website development.We will take a brief introduction to what is bootstrap framework and how it helps us in front end responsive mobile web development. We will also include bootstrap library into our project. Official Bootstrap framework website – https://getbootstrap.com/

What is Bootstrap ?

• Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
• Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development.
• It uses HTML, CSS and Javascript.
• Bootstrap is completely free to download and use!

What Bootstrap Includes?

• Grid system – Bootstrap provides a basic structure with Grid System which is a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
• Custom CSS – Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
• Components – Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more.
• JavaScript Plugins – Bootstrap contains over a dozen custom jQuery plugins.
• Customize – You can customize Bootstrap’s components, LESS variables, and jQuery plugins to get your very own version.

Setting up Bootstrap Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

• test code
  • bootstrap
    • css
      • bootstrap.min.css
    • js
      • bootstrap.min.js
      • jquery-3.3.1.slim.min.js
      • popper.min.js
  • default.html

YouTube video tutorial –