BootStrap4 Learning plan and Part 1 Notes

Introduction

Hello its awesome having you around!! let me begin this post with a a little introduction of who I am .I’m Agene O. Sunday an enthusiastic life long learner currently studying frontend web development with openclassrooms I’m learning bootstrap 4 for career and school related reasons, as this is part of the curriculum for openclassrooms frontend web development path , with Bootstrap 4 being my primary focus for the next 21 days. Some quick exciting things about bootstrap 4:

  1. It’s easy to use and adopt
  2. helps you create astonishing responsive web layouts quickly
  3. It has an amazing community
  4. its the most popular front-end component library give a citation

As part of my plans to learn in public , I've put together a plan to learn bootstrap 4 for the purpose of building responsive web design projects .This is a quick outlook of my plans: Learn enough Bootstrap 4 to be proficient , measured by :

Here is a further breakdown of my goals into actionable plans:

This blog post is the first in the series , it covers my notes and thoughts on Part 1 of the Bootstrap 4 course on Codecademy, perhaps you happen to take the course and you would love us to discuss, let’s converse !!! shoot me a DM on twitter or tweet at me.

Notes on Part 1

Notes on Part 1 of the bootstrap 4 course focuses primarily on Bootstrap 4 Grid. This section of the notes is organized into different subsections as outlined in the course:

Introduction to Bootstrap 4

Bootstrap 4 is a responsive design framework by twitter, the designers of bootstrap 4 were majorly focused on responsiveness that is designs that tended towards mobile devices. Just as 52% of internet users are viewing from mobile.

Note: bootstrap 4 uses the grid system based on CSS flexbox of laying out web components.

 

Setting up bootstrap 4 or adding it to your code

Bootstrap 4 can be added to your code easily usually through a CDN or downloading to your local machine , the CDN code will be inserted in the head section of your html code an example from bootstrap 4 documentation was shown in the course

usually for extra JavaScript functionality such as sliders,popups and JavaScript animations we will add extra CDN (popper.js and bootstrap.js) code to the closing body tag like so

The first thing worthy of note is that bootstrap 4 uses the 12 grid CSS layout.

Setting Column Width with Content:

Not only can we set the width of a column in Bootstrap 4 but we can also allow the content inside a particular row determine it's width E.g in the conventional world we say cut your coat according to your clothe but when determining width of a column we are cutting our clothe according to our size. let's take a look at an example excerpt from the course

Bootstrap 4 Breakpoint

Bootstrap 4 breakpoint is that point when the layout changes as the viewing device changes , For example if we have a website being viewed from device A (A desktop computer) and device B ( A phone) the breakpoint therefore is that point where the layout of the website changes as we transition from desktop to phone.

like plain CSS when using media queries to determine breakpoints@media screen ({breakpoint}){ } , bootstrap already comes with 5 amazing visual breakpoints which are :

when determining the breakpoint for a device we could just simply use any of the abbreviated visual breakpoints classes which are sm,xs,md,lg and xl E.g

The above code simply tells the browser in line 1 when you hit a medium breakpoint that is when the screen size of the viewing device is >= 768px just hide the row with id="hiddenRow"

Bootstrap Naming Convention and Grid

The previous topic as explained by the course introduced us to breakpoints , we further want to look into how we specify a breakpoint : to apply a breakpoint we would be required to provide { breakpoint } - { width }

where : { breakpoint } could be sm,md,lg or xl and {width} could be any number from 1 to 12 (Representing 12 column css grid layout)

An example was given in the course which is shown below

From the code above on line 1 <div class="col-sm-8" ></div> it simply says at {breakpoint} in this case sm(small device) make the row occupy 8 columns.

Combining Bootstrap Classes

In the previous topic the course had explained what bootstrap classes were and how to write them , I was wondering like you 😄 if it was possible to combine bootstrap classes ...and voila the answer was a big yes . The course explained that we could combine several Bootstrap classes . Now what that means is that we could have a single row adjust accordingly to several breakpoints all written in one html class property. Its more like normal html where if you want to define several classes you just do it in a single html class property lets look at an example then explain the example accordingly.

    

The code above <div class="col-12" ></div> when explained means when the screen is extra small make the row occupy 12 columns.

image-20200525070715408

Then that same class can be further modified into this:

The code above explains that when the screen size is on medium screen e.g on a tablet screen let the row occupy 8 columns

image-20200525072207130

What's Next?

Next is part 2 of codecademy bootstrap 4 course. Here , we will we walked through using Bootstrap 4 utility classes and components, can't wait to get to use those amazing bootstrap 4 components.

The part 2 notes will also cover my notes on building the intended website from knowledge gained learning bootstrap 4.

P.S: I included a glossary and cheatsheet at the end . Enjoy reading!

 

Cheatsheet

Most of the commands covered in the first part of the course

Adding Bootstrap 4 to your code using a CDN

Setting Up a bootstrap 4 breakpoint

 

Join My Newslater

I share one or two emails per month on things I'm excited about!