Jola Sonowo's Blog

Jola Sonowo's Blog

Bootstrap 🥳🥳🥳

a beginner's introduction to bootstrap

Bootstrap 🥳🥳🥳

Hey everyone!!

It’s been a while, but I’m back now!

We’re going to introduce ourselves to bootstrap in this lesson.

But firstly, what’s bootstrap??

Let’s answer the following questions:

  1. Are you fed up with writing too many lines of code in CSS and JS for a simple task?

  2. Would you like a popular CSS framework for developing responsive and mobile-first websites

  3. Would you like a framework that enables developers to create interactive web applications with minimal effort

If you answered yes to all these then lucky for you, bootstrap does all these and more!!!

Let's dive into the basics: Firstly on out HTML page, we have to add this link to the header:

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"

so our HTML page recognizes that bootstrap is being used.

Next, we are going to talk about containers and columns.

What are containers?

They basically format our page. There are two types of containers; container and container-fluid.

Using container gives a bit of a margin to whatever is in your code, while using container-fluid removes any margin in your code.

What are columns?

There are only 12 columns in bootstrap, and columns are used to partition pages into groups of 2,3,4 or how many you need.

In the code, we place columns under a row div so the computer recognizes that we are dividing the page into sectors.

The code below gives a summary of what has been discussed so far:

container.png

Next, we have some additions to font styling in bootstrap. They are represented in classes within a "p-tag". For example: p class="font-weight-bold"

Other examples are:

Screenshot 2021-07-16 222547.png

Also, there are other font properties that affect height and size, they are called the "display" properties.

They range from display-1 to display-6. For example: h1 class="display-1">display1/h1

Screenshot 2021-07-16 223249.png

Other font attributes include: i. code ii. kbd iii. abbr iv. mark

Screenshot 2021-07-16 223909.png

Note: You can still add styles to your bootstrap as you would to your normal HTML, but some of your stylings might override the standard bootstrap format and vice-versa.

that's all for now!! thanks for reading🥰🥰

 
Share this