What is Bootstrap?

Web Development Jargons Explained in 5 Different Ways

TLDR: Bootstrap is a CSS framework that lets front-end web engineers add style structure to websites very quickly. Bootstrap provides a set of standards in spacing, typography, color, interactive behaviors, and more.


Explain like I only speak in plain English

Bootstrap is a CSS framework that lets front-end web engineers add style structure to websites very quickly. Bootstrap provides a set of standards in spacing, typography, color, interactive behaviors, and more.

Its most prominent feature is the responsive grid structure. Allowing engineers to divide and position HTML content in columns for different viewing devices with ease.

If CSS is make up for websites, then CSS framework such as Bootstrap is like a brand of make up products. It comes with an array of tools and standards to help you layout and dress up websites very quickly.

Explain like I'm a total nerd

Bootstrap started as an internal initiative at Twitter to standardize design patterns across departments. Bootstrap was released as an open source project in 2011. It is the second most liked project on GitHub with over 125,000 stars.

15% of the top 100 thousand most visited websites are built with Bootstrap. The latest version, Bootstrap 4, was released on 19 Jan, 2018. A total of 17,483 commits were created by 1,005 contributors up to this point.

After adding Bootstrap to your project, you can use its styling standards by adding Bootstrap specific classes to your HTML elements. Bootstrap comes with standards for layout, typography, forms, buttons, navigation, media, and more. To use its grid structure, you need to follow its grid hierarchy of container > row > columns.

Explain like I'm an artist

Using Bootstrap in a website project is like using French curve and template ruler when you are drawing. It helps you quickly add standardised features to your project.

css_cat.jpg

Explain like I like examples

The following boxes are created using Bootstrap 4's grid structure. Using Bootstrap col-* classes, we can define the width each element should take up per row.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Explain like I already know it

Bootstrap made the switch to use CSS flexbox for its grid structure in version 4. Which allows for fluid grid layouts while still supporting fixed grid. It also switched to Sass in favor of Less.

Due to its use of flexbox, Bootstrap 4 won't support IE9 and earlier Internet Explorer browsers. It also has some gotchas on iOS10 and prior versions.

Apart from Bootstrap, other note worthy CSS frameworks include Foundation "27k stars", Bulma "27k stars", and Semantic UI "41k stars".

We are trusted by

Students and instructors from world-class organizations

Imperial College London
Carnegie Mellon University
City University of Hong Kong
Hack Reactor
Cisco Meraki
University of Oxford
Swift
Bazaarvoice
Waterloo
Uber
AtlanTech
Tumblr
Boston College
Bombardier Aerospace
University of St. Andrews
New York University
Minerva Schools at KGI
Merrill Lynch
Riot Games
JP Morgan
Morgan Stanley
Advanced Placement®
Google
KPMG
The University of Hong Kong
University of Toronto
SCMP
Moat
Zynga
Hello Toby
Deloitte
Goldman Sachs
Yahoo
HSBC
General Assembly
Tesla
McGill University
Microsoft

Join the upcoming Cohort #72

Enroll for December 5th, 2022