Bootstrap 4 Learning Note Part 2

Hi πŸ‘‹ and welcome to part 2 of my learning Notes from bootstrap 4 on codecademy the first part of the note had talked about the fundamentals of bootstrap 4 grid which includes : bootstrap 4 introduction, column width with content, breakpoints , bootstrap 4 naming convention ,grid and combining bootstrap 4 classes.

Part 2 Notes

This part of the note focuses on utility classes in bootstrap 4 , the course had referred heavily on Bootstrap Documentation . The utility classes provides additional styling and components.

Adding Colors

The color utility class provides us with the means to change elements color easily within the tag itself an example was given in the course as below:

the above code shows that the paragraph element should be made blue , now I was wondering why blue? as with plain CSS where you would probably do something like this:

with bootstrap we just provide and add a preset bootstrap 4 color. The instructor pointed out that the text property of class="text-primary" just:

targets the element’s text styling. Appending "primary" after "text" changes the text color to blue.

codecademy

some other preset colors can be gotten from the bootstrap 4 documntation. In addition to the color utility bootstrap 4 also provides background color utility , with pure CSS to change the background color of an element will look something like this:

in the code above element could be any valid html element e.g p ,div, section e.t.c. Bootstrap 4 has completely simplified the above as this can be achieved directly from the element , here is an example from the course:

from the code above the utility class bg-success simply changes the div background to green right inside the div element itself , how 😎 is that?.

As usual the course had given some interactive practice exercises to close the lesson.

Styling Text

Bootstrap 4 has an amazing collection of classes to style and format text , due to its exhaustive list the course only elaborated on some few which are font-weight class and text-uppercase font-weight-[predefined bootstrap value] this value could be bold,light,lighter e.t.c an example from the course is given below:

 

 

when we look closely at the above we had combined two classes font-weight-bold and text-uppercase. The bootstrap documentation has provided a lot of this helper classes.

 

Element Positioning:

wow bootstrap 4 also provide amazing positioning utility classes position-fixed, position-absolute, position-relative, position-sticky, position-static e.t.c as provided by the bootstrap 4 documentation for the course we had utilized fixed-top for position which goes something like this:

the above code will fix that div at the top of the document viewport, it works like setting the position property of an element in css to fixed, Note there is a difference between fixed-top and sticky-top

image-20200609135534824

Source: Codecademy

Notice the difference ? the former the content reflows underneath while the latter the content starts right beneath the fixed header.

After the explanation and example the instructor had given a hands on classwork.

 

The Navigation Component:

when I first heard the nav component I was mistaking a nav component for a navbar...this two are closely related , a nav component offers a user a selection of links on one or few pages of a website while a navbar component appears on all pages of a website.

a nav component in bootstrap 4 is made of 3 classes(nav , nav-item and nav-link) or at least 2 classes (nav-item,nav-link) examples will be shown below from the course

 

what we simply did above was to give the ul element a class of nav this automatically turns the ul element to a bootstrap nav component. Amazing right? πŸ˜ƒ . we talked about a nav component having the 3 essential classes nav , nav-item and nav-link as indicated in the code sample above. the course had further referred us to get more information from the bootstrap 4 documentation. The instructor didn't leave us without an activity as usual ,this is one very interesting thing about this platform it's interactivity.

 

The Button Component

bootstrap 4 provides a super amazing way to format html buttons , we had taken a sample exercise from the bootstrap 4 documentation and customized to our preference a sample from the course is shown below:

the sample code above defines 3 classes on the button element namely :

I actually went a step further to checkout the bootstrap documentation on buttons and discovered other bootstrap default button classes such as btn-info , btn-success structured to give User experience meaning for success and information. With an hands on interactive activity we had concluded this sub topic on button component.

 

Collapsing a component

Have you ever thought of a moment to display something on a webpage but you really don't feel it should compulsorily appear on the page except when needed ? this should take quite some lines of code but bootstrap 4 has made it easy!!

To achieve this we need two components , the element with the content and the other that switches the visibility of the element .I know it's quite a lengthy explanation I felt that bored when I approached collapsing components too .Let's take a look at an example given from the course .

 

okey since we have a code above it's easier to explain now as done by the course the button element is the controller of the <p> element in Section B the button gained the toggle ability from the data-toggle attribute with value of collapse notice that we have data-target with value #collapseExample.It says simply collapses the div with collapseExample . The course has also referred us to the Bootstrap 4 documentation for more collapse functionalities and as usual an interactive class activity was given.

Creating a Navbar

navbars are very important components of a webpage but it can sometimes become daunting , but alas bootstrap 4 has made it pretty easy to create it's quite elaborate to explain as shown by the course ,lets take a sample example from the bootstrap 4 documentation and customize it .

oops that's a lot of code so I said to myself too when I first took a glance at it. The course had explained that the navbar class makes the <nav> element a bootstrap 4 navbar , the navbar-expand-lg renders <div class="collapse navbar-collapse"> on large and extra large screens .

 

it is simply saying when the page is in large screen or extra large screen collapse the navbar and display the nav button

notice we have lg this is the breakpoint of that div element this could be sm ,md ,lg or xl

you will also notice the bg-light class this essentially renders the background to bootstrap 4 default of white.

The navbar-brand class represents the brand/logo of the website. The visibility of the navbar is toggled each time navbar-expand-{breakpoint} renders .Now when navbar-brand button is toggled on it expands the navbar and displays the links.

The ul and <li> elements make up a nav component. and as usual an interactive hands on classwork was given.

 

Jumbotron Component

on hearing of this component I quickly recalled a popular fiction movie 'Voltron' (the defender of the universe) , why did I remember voltron the fiction star ? because he always stands out. The jumbotron element also helps make content stand out. The course had given an example of a display board in a stadium for instance that shows an event for everyone in the crowd to see. an example was given in the course below:

 

the course had used an <h1> element but this could be any html5 element you wish to display to stand out!!! thankfully the course had pointed us to the documentation for more elaborate examples.

 

Adding a Card

The course also went ahead to introduce the card component as a container for smaller customized content.

This helps to display a collection of similar content in manageable chunks
~learn Bootstrap 4 @codecademy

 

Let's look at the example given from the course below:

essentially notice we have 6 classes used above to create a card component , the container class of card image element with the class card-img-top essentially tells the browser this is a bootstrap card image placed at the top , the card-body defines a new section for the card with subsection of card-title ,card-text and card-link the course referred students to the documentation for more customization options.

 

The Carousel Component

Bootstrap 4 has done amazingly in giving us the ability to fit our images into a slideshow using Bootstrap's carousal component. the course had selected a basic example for simplicity sake which is shown below:

The code above renders a slideshow that loops through two images, which displays one at a time.

the parent <div> element has an id of carouselExampleslidesonly this helps us to uniquely target that particular div when manipulating the DOM to change the click events, the carousel and slide classes provides the styling of the carousel interestingly the data-ride rides us πŸ˜„ through interactively when the slides transitions.

the second div provides the inner elements of the carousel with a class of carousel-inner this houses the other carousel items

 

only one image needs the active class as shown above ,if none have active , no images are shown

~Learn Bootstrap 4 @codecademy

 

the <img> elements use the utility classes d-block which sets the display as block and w-100 to take up 100% of the width. an interactive classwork was given to test our assimilation.

This marks the end of the bootstrap 4 course on codecademy!!!

 

What Next ?

As part of my learning goals in part 1 of this series I had stated I was going to build a website using the new found knowledge , I was able to build a website using bootstrap 4 here , ain't that amazing ? 🍷 🍾

Glossary

This is a list of new terms learnt

 

CheatSheet

This covers most of the commands covered in this note .

Adding Colors

Styling Text

Element Positioning

The Navigation Component

The button component

Collapsing component

Creating a Navbar

Jumbotron Component

Adding a Card

The Carousel Component

 

Thank you!!!

 

 

Join My Newslater

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