Bootstrap, Bulma, and MDL

Explore the key features and benefits of popular CSS frameworks such as Bootstrap, Bulma, and Material Design Lite. Understand their unique components, utilities, and how they aid in building responsive and styled web layouts without heavy JavaScript dependencies.

We'll cover the following...

Bootstrap front-end framework
Bulma CSS framework
MDL framework

Bootstrap is a mature front-end framework, currently at version 5.2. It was initially an internal project at Twitter, where it was known as Twitter Blueprint.

It was renamed to Bootstrap and open-sourced on August 11, 2011. Bootstrap is a full-fletched CSS framework. It comes with its own CSS reset—the CSS reboot stylesheet. It has lots of utility classes, namely:

Margin and padding classes (for example, mb-0 sets the margin-bottom to 0, pt-5 makes large padding at the top of an element) ...

1.Introduction

2.Whitespace, HTML Elements, and CSS Selectors

3.CSS Display Property

4.The Box Model

5.CSS Positioning

6.Images and Floats in CSS

7.CSS Selectors and CSS Targeting Revisited

8.Building the First Layout

9.Converting Our First Layout Into a Responsive One

10.CSS Resets and Emmets

11.Column-Based CSS Layouts

12.An Overview of Popular CSS Frameworks

13.Micro CSS Framework

14.CSS Transitions, Animations, and Transforms

15.Introducing the CSS Grid

16.CSS Tips and Tricks for Beginners

17.Wrapping Up

Project

Bootstrap, Bulma, and MDL

Bootstrap front-end framework