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:
- It’s easy to use and adopt
- helps you create astonishing responsive web layouts quickly
- It has an amazing community
- 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 :
- my ability to build a projects in Bootstrap 4
- ability to contribute code to an open source project in Bootstrap 4 community
- My ability to understand and explain basic concepts in Bootstrap 4.
Here is a further breakdown of my goals into actionable plans:
- Finish the bootsrap4 course on Codecademy
- write 2 blog post each covering a section of the course
- contribute to an open source project (documentation fix)
- build a small web site for a film festival
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.
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"></head>
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
x
<body> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384- OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> </script></body>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
<div class="container"> <div class="row"> <div class="col-auto"> <p>Auto Adjusted</p> </div> </div> </div> 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 :
Extra Small <576px mostly the screen size of portrait smartphone devices Small >= 576px this is mostly screen size of landscape smartphones Medium >= 768px this is mostly the screensize of tablet pcs large >= 992px this is mostly the screen size of desktop pcs Extralarge >= 1200px this is mostly the screen size of large desktops 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
<div class="row hidden-md" id="hiddenRow"> <div class="col-12"> </div> </div>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
<div class="row"> <div class="col-sm-8"> I will occupy just 8 columns out of 12 when the screen is small </div> </div>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.
<div class="row"> <div class="col-12"> I will occupy 12 columns when i'm extra small </div> </div>The code above <div class="col-12" ></div> when explained means when the screen is extra small make the row occupy 12 columns.
Then that same class can be further modified into this:
<div class="row"> <div class="col-12 col-md-8"> I will occupy 8 columns on medium screen above and occupy 12 columns on small screens </div> </div>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
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
xxxxxxxxxx <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"></head>Setting Up a bootstrap 4 breakpoint
@media screen ({breakpoint}){ }