605 reads

Teach Yourself How to Work With Bootstrap 4 in Ten Minutes or Less

by Eyüp Sercan UYGURAugust 26th, 2020

Too Long; Didn't Read

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. To understand Bootstrap, we need to investigate how an external Front-End library works in our app. We’ll discuss the two ways of installation and Bootstrap’s CSS file. The Bootstrap Grid System lay on top of Flexbox Grid, whereas Bootstrap 3 was using the float method.

Company Mentioned

featured image - Teach Yourself How to Work With Bootstrap 4 in Ten Minutes or Less

“Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.” — Wikipedia

This quote from Wikipedia defines the Bootstrap pretty well. I don’t want to add something more instead I prefer to talk about bootstrap structure and how to work with bootstrap. Before any further, I need to mention that, to understand the bootstrap it’s better to have some Flexbox knowledge. It is important because at V4 bootstrap foundation lay on top of flex instead of floats.

List of Content:

1. How Bootstrap works

2. What has changed at V4

3. Installation

4. Bootstrap Grid System

5. Customization of Bootstrap via Sass

6. Important Components to Keep in Mind

7. Summary

8. Conclusion

How Bootstrap Works

To understand bootstrap, we need to investigate how an external Front-End library works in our app. I’ll demonstrate it with an easy example. Let’s assume we create a library called ‘Example’. This library has some predefined classes.

.example {
background-color: tomato;
}

To use this library, we need to add CDN (Content Delivery Network) link to our page. When we get connected to our library and get the cached files into our browser, we can use those predefined classes. Those classes have some CSS properties that modify our overall layout and look.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://example.com/example/4.5.0/css/example.min.css"
integrity="sha384–9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="example">
Hello world!
</div>
</body>
</html>

Just to inform you, our link in the head is not a real link. We are assuming that we have a link that has some predefined classes in it. To compile and use them, we just put this link so our .example class can work on our page.

This was a wandering case, but Bootstrap uses the same logic under the hood. A lot of developers have created some style just to use it whenever it’s needed beforehand and we are just taking their styles to our page. For more detailed explanation wait for the installation part. We’ll discuss the two ways of installation and Bootstrap’s CSS file.

What Has Changed at V4

To you who knows Bootstrap for a long time, those changes make more sense. After I learned the details of them, I could say bootstrap makes itself live longer with those changes and they are quite tactical changes that are very useful. Even V5 has a greater impact on the performance, and I am leaving this discussion for a future advanced article.

- The border-box value has been changed. Before it was content-box.

- A CSS stylesheet called Reboot. The reboot is a CSS Reset and it avoids margin-top, uses rem unit mostly, uses native font stack, and embraces the CSS inherent value.

- Bootstrap 4 using Flexbox Grid, whereas Bootstrap 3 was using the float method. That’s why it is important to understand Flexbox.

- Panels, thumbnails, and wells have been dropped entirely. You can find more detailed changes in here.

Installation

To use Bootstrap whether you can use a CDN link to Bootstrap on your page or you can download it via package managers. The first of these;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Putting this link on top of your page to your <head> and done. Now, we have a pre-built CSS file that we can apply to our page via different classes. Those classes have some certain style rules and we can use them for our expedience. If you need a component that requires JavaScript, you need to add these scripts as well;

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

To understand more, you can refer here.

And here is a list of components that requires JavaScript:

- Alerts for dismissing.

- Buttons for toggling states and checkbox/radio functionality.

- Carousel for all slide behaviors, controls, and indicators.

- Collapse for toggling visibility of content.

- Dropdowns for displaying and positioning (also requires Popper.js).

- Modals for displaying, positioning, and scroll behavior.

- Navbar for extending our Collapse plugin to implement responsive behavior.

- Tooltips and popovers for displaying and positioning (also requires Popper.js).

- Scrollspy for scroll behavior and navigation updates.

To demonstrate the second approach I’ll use npm. All you need to do;

npm i bootstrap

and to get Sass compatibility;

npm i node-sass

And to check and get please refer here.

Bootstrap Grid System

Bootstrap lay on top of the 12 column flex grid system. To have a flex property, you need to have a container component. This component is either is a fluid component or just a container. I’ll discuss this fluid property later in the ‘Important Component to Keep in Mind’. This container should have a row class component and inside this row, we can use our 12 column structure. We can divide our columns proportional to 12 and will have a nice looking divisions of columns.

As you can see in that example, the container has a 12 column area, and we divided it into 2 columns which one of them has 4/12 of it and the other has 8/12 of it. They are all in the same row. Feel free to add one more row inside the container, and play with the column numbers.

To understand the media query breakpoints I am putting this in here. Bootstrap has 5 breakpoints to get a responsive character. Those are xs, sm, md, lg, xl. If you apply those prefixes in front of your classes you’ll have different characteristics for different screen sizes.

Try to shrink the page and see what happens. col-12 class is applied from 0–768 px which is the medium size for the bootstrap. And from that point to the 992 px 5 to 7 column style is applied. And then, a large screen style is applied to the page. That easy, just put a prefix and it’s responsive.

Customization of Bootstrap via Sass

In the installation part, we installed the bootstrap-sass with the

‘npm i node-sass’

command. It is time to use it. For example, we want to change the built-in color-primary. (We’ll discuss those colors at ‘Important Components to Keep in Mind’.) The only thing we need to, do create an SCSS folder and inside it create a ‘main.scss’ file. Inside this file import the bootstrap with

@import "../node_modules/bootstrap/scss/bootstrap";

In the package.json file, we need to add those two scripts to watch the changes at the scss file and put it into the CSS file directly.

"build": "node-sass scss/main.scss styles/styles.css",
"build:watch": "node-sass - watch scss/main.scss styles/styles.css"

With this set-up, we can now use our custom classes or can change a built-in class with this syntax. All the changes that we implemented, is watched by our command

‘npm run build:watch’

and is written on to our CSS file.

Default, the primary color is blue, and now we changed into the red with that simple code. Now we can use this primary color in our code and the color will be red.

$primary: red;

Important Components to Keep in Mind

I think we covered up the most important logic above. However, to use the bootstrap and make our pages look way better, we need to know a couple of essential classes.

First, colors:

We can use those colors as a background color as well. All we need to do is to put .bg prefix in front of the color name and voila!

If we want to use some flex property and just for this, we can use ‘.d-flex’ class. Either we want to use some block or inline properties in our code. Just add ‘.d-inline’ or ‘.d-block’ classes, and watch it happen. And of course, we need to mention ‘d-none’ as well to drop the component off.

I started talking about the fluid property before, but there I did not give details of it. The essence of the matter, there are not many details. The fluid property is a property that gives the max-width: 100% property to where we applied to it. So let’s see our last example with fluid.

As you can see, we gave the container a fluid property, and now it takes the full width of the page. Before it was in the middle of the page horizontally. Besides, we can use this fluid property with images as well and it will take the whole width of the container component.

There are .w-25, .w-50, .w-75, .w-100 and w-auto classes that we can apply to our page. Those are very self-explanatory. They are taking that amount of the width of their containers. And the same is true for the height property as well.

We already talked about rows and columns in the 12 grid system part. The only thing I want to mention is the card class. This class is a new feature of V4, and with that layout, we can create different cards with easily applied style. Below you can see it in action!

Summary

As a summary, bootstrap is a powerful tool, which lay on the flex property and 12 column structure. You can use built-in styles and also you can customize it however you like. It has 5 breakpoints that cover all the different sizes of devices. There are some discussions on it, that say bootstrap maybe end soon, but I don’t think it’ll happen soon. According to Wikipedia: “Bootstrap is the seventh-most-starred project on GitHub, with more than 142,000 stars, behind freeCodeCamp (almost 312,000 stars) and marginally behind Vue.js framework. According to Alexa Rank, Bootstrap is in the top-2000 in the USA while vuejs.org is in the top-7000 in the USA. “ The V5 alpha has released and it has dropped even the jQuery which is a big sensation.

Conclusion

In conclusion, I want to say that the flex and grid are rising on the Front-End community and some people think that writing their style just by themselves is an easier approach. However, bootstrap still gives solid structure and if you learn and master it, it’ll save some time and energy.

Previously published here