tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 INTRODUCTION



What is Bootstrap?

Bootstrap is most powerful CSS framework, which is used to make mobile-first responsive websites. It is open-source and free to use.

It contains huge CSS and Javascript based design templates for buttons, forms, navigation, alert, typography and other interface components.

Note: Responsive websites are those websites that fit the device screen automatically. These websites adjust their contents automatically to best fit all devices like computers, tablets, mobile, etc.

bootstrap tutorial
  • Bootstrap is free and open-source front-end framework.
  • It is the most powerful and famous front end framework to learn.
  • It can be used either using bootstrap CDN (Content Delivery Network) or download it from the official website.
  • Bootstrap also includes design templates based on HTML and CSS. The design templates include typography, form, alert, button, table, carousels, image, navigation, toast, and more.
  • It makes it very easy to design responsive websites.
  • Bootstrap contains lots of predefined classes that can be used to get its features.

This Bootstrap tutorial includes all topics of Bootstrap with their examples such as containers, grids, jumbotron, table, button, carousel, badges, alert, form, labels, pagination, wells, image, progress bar, lists, etc.


What is bootstrap used for?

Bootstrap is used to solve many problems of front-end development that we had back in the days. One of the main problem that bootstrap solve is webpage's responsiveness.

Bootstrap is focused around the idea to create responsive website, that can adjust and reorderd its content based on the device it is used on.

It follows mobile-first approach, means that the bootstrap framework designed such that it designes websites starting with mobile version, which is then adopted to larger screens.

responsive website with bootstrap

In June 2014 Bootstrap was the number 1 project on Github

Advantages of using Bootstrap

If you want to design a responsive website then Bootstrap has is a good choice. Bootstrap has many advantages which mentioned below:

  • Easy - Bootstrap is easy to learn and use.
  • Customizable - Bootstrap is lightweight and customizable. It can be modified to fit best for your needs.
  • Responsive Website - Bootstrap creates a responsive structure and design for the website.
  • responsive website
  • Saves Time - It makes designing websites faster and easier. Since it has pre-defined templates that save a lot of time.
  • Browser Support - Bootstrap creates platform-independent webpages.
  • Open Source - Bootstrap has very good documentation. It is open source and has very good community support.

History of Bootstrap

The original name of Bootstrap was Twitter Blueprint. It was developed by Mark Otto and Jacob Thornton at Twitter. Various libraries that were used before Bootstrap caused inconsistencies and high maintenance burden.

Few months after the start of Twitter Blueprint many developers started contributing to it as a part of Hack Week. Twitter Blueprint was then renamed as Bootstrap and released on 19th Aug 2011 as an open-source project.

  • Bootstrap 2: Released on 31st Jan 2012
  • Bootstrap 3: Released on 19th Aug 2013
  • Bootstrap 3: Released on 29th Oct 2014
  • Bootstrap 5 Alpha: Released on 16th Jun 2020. Its experimental package.

Bootstrap Responsive Website Example

Look at the example below for a bootstrap responsive website example.

Output:

Bootstrap Getting Started