Bootstrap 4 tutorial – Beta 2 version

I am learning Bootstrap 4 by following this coursera course: Front-End Web UI Frameworks and Tools: Bootstrap 4  I have learnt a lot through the way.

However, since this course is based on Bootstrap 4 alpha version and now Bootstrap 4 has already moved into Beta 2 version, I have found that a lot of things have already changed. It does take me some time to figure out how to adjust the code for the newer version by looking at the css file and documents.

I have browsed around and I didn’t see any good tutorial for the latest Bootstrap 4 version. So I guess it might be a good idea to write one.

I will still be following the structure and sequence of the coursera course coupled with the code working for the latest Bootstrap version and my understanding from a learner’s perspective.

Ready to learn Bootstrap 4 now? Let’s go!

Bootstrap Grid System

What is Bootstrap and Responsive Web Design

Introduction to Bootstrap Grid System

Write a simple page with Bootstrap Grid System

Re-order our content

Use offset to leave some space

Hide stuffs with a responsive design

Build up a Navigation Bar

What is navigation bar and why is it important

Build up a navigation bar

Different front color and fixed top

Collapse into a button

Build breadcrumbs with Bootstrap