tutorialstonight logo

BOOTSTRAP 4 INTRODUCTION


What is Bootstrap?

Bootstrap is a free and open-source CSS framework. It is the world's most popular framework for building a responsive and mobile-first website.

Bootstrap follows a mobile-first approach, which means it involves designing a website starting with a mobile version, which then gradually adapted to larger screens.

Bootstrap contains huge CSS and Javascript based design templates for buttons, forms, navigation, alert, typography, and other interface components. Using these design templates you can make websites better, easier, and faster.

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 tutorial for beginners

  • Bootstrap is a 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.
  • Bootstrap 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.

This bootstrap tutorials contains various examples with editor where you can edit the code,


What is bootstrap used for?

Bootstrap solves 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 on the idea to create a mobile-first responsive website, so the website made using bootstrap adjusts and reorders its content based on the device website is used on.

In the image below you can see what a responsive website looks like on different types of devices. You can see how the website is adjusting its content to best fit within the device.

responsive website with bootstrap
Responsive website with bootstrap

Advantages of using Bootstrap

If you want to design a responsive website then Bootstrap is a good choice.

Advantage of using Bootstrap are as follows:

  1. Bootstrap is lightweight and customizable. It can be modified to fit best for your needs.
  2. Using bootstrap is time-saving, it increases the development speed.
  3. Bootstrap is a consistent framework that supports all browsers and CSS compatibility fixes.
  4. Bootstrap creates a responsive website that fits every device.
  5. It makes designing websites faster and easier. Since it has pre-defined templates that save a lot of time.
  6. Bootstrap creates platform-independent webpages.
  7. Bootstrap has very good documentation. It is open source and has very good community support.
  8. Bootstrap has a great grid system.
  9. Bootstrap is easy to learn and use. ( how to set up bootstrap in HTML )

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 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.

In June 2014 Bootstrap was the number 1 project on Github


Bootstrap Responsive Website Example

Below is an example of a basic website using bootstrap 4. Don't worry if you don't understand the code, we will discuss everything in the coming sections.

Output:

Bootstrap Getting Started