Bootstrap : Mobile-first CSS framework

5 min readJun 21, 2021

Bootstrap is open source front end web development framework. It was developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is mainly written in HTML,CSS and JavaScript. Bootstrap 5 was recently released on May 5,2021. It is use to build quick and responsive website.

Bootstrap basics

How to Install Bootstrap ?

There are a lot of ways to install Bootstrap. I will show you how to install it by CDN (Content Delivery Network) and pre-process CSS and JavaScript files. To install Bootstrap by preprocessed files we have to download it from here. Place CSS and JavaScript files in a project. Now in the HTML file set link to the CSS and JavaScript files. To install Bootstrap by CDN, click here and copy all the links under CDN via jsDelivr. Copy this link to the HTML files. Make sure to put CSS links to the head of HTML and JavaScript in the end. We might need jQuery and popper. So download jQuery and popper. The advantage of using CDN is that it is stored in cache when a website uses Bootstrap. So, any other website using CDN does not need to download again. There are some disadvantages to using CDN. By using CDN there is a threat to privacy and security. Sometimes it might be blocked by the internet service provider or the browser does not interpret correctly. By preprocessed files, we can work offline.

Styling with Bootstrap

Instead of using pixel (px) for the style it uses root em (rem). If we want to convert pixel to rem then 16 px = 1 rem. Container class is the most important class in Bootstrap. It will decide certain break point. There are two types of container. One is container and other is container-fluid. Container class will provide fix size container. Container-fluid class will expand to the full size of viewport. There are total five break point in Bootstrap gird system.

· Extra small and small breakpoint are generally used for mobile screen.

· Medium breakpoint is used for tablets.

· Large and extra-large breakpoint is used for laptops screen or greater than that.

Colors

Bootstrap has different color classes to change the color of text and background. We can change the text color by adding class text-primary, text-success, text-danger. For changing background color we can add class bg-primary, bg-danger, and many more. We can use the Saas variable to change the default color in Bootstrap.

Images

To make an image responsive as the size of the screen changes we can add an img-fluid class. It will adjust image size according to the screen size. Class rounded is used to specify the roundness of the image. We can specify if we want a rounded image at the top, bottom, right, and left. We can add a figure, figure-img, and figure-caption classes on the figure tag. The figure class will not make much difference but the figure-img class will give a little bit of padding to the image and the figure-caption class will make text lighter.

Text selection

We can manage if we want to manage text selection. Class user-select-auto allows the user to select any part between the selected tag. Class user-select-all will select all the content between the selected tag. Class user-select-none will not allow the user to select content between the selected tag.

Rows and Columns

Bootstrap uses 12 columns breakpoints. Rows are used to set the content of elements fixed horizontally. Row class should be placed after a container class. Rows can be divided into 12 columns. The basic structure of rows and columns is as follows.

</div></div>

Here it will display three columns. Each columns using 4 unit space, using total 12 columns. We can specify how much space each column should use by col-(1–12).We can add different breakpoint to the columns class.

</div></div>

Here, when it encounters a small breakpoint three columns will be displayed in one line, each of the columns using an equal amount of space. When the page encounters a medium breakpoint first column will take three-unit space. The second column will take 4 unit space. Total 11 out of 12 spaces are used by two columns. So, the third column will be displayed in the next line.

Nesting of row and column

By using nested row we can split columns vertically. Nested rows are spited into 12 columns by the space provided by the parent class.

Output of breakpoint small

We have specified all columns (C1, C2, C3) size 4 units each, for both small and medium breakpoints. We have nested rows and columns in each row. For nested column(C1). When we encounter medium breakpoint each column under nested row uses 12 columns space. So, R1, R2, and R3 will be displayed in a separate line. When we encounter a small breakpoint each column under nested row uses 4 columns space. So, R1, R2, and R3 will be displayed in the same line.

For column(C2), nested child column class of parent row class, R1 and R1 used 11 space out of 12. So, both R1 and R1 will be displayed in the same line and R2 will be displayed in the next line.

For column(C2), nested child column class of parent row class, using an equal amount of space so it is displayed in the same line.

Jumbotron

Jumbotron is used to get the attention of the user. We can use it to display some news information on our website or the logo of the company.

By there are two classes jumbotron and jumbotron-fluid. By using the jumbotron class there is some rounded end. So to eliminate the rounded end we use the jumbotron-fluid class.

Conclusion

In this blog we learn some basics of Bootstrap. Four things that we learn from this blog are installing Bootstrap, styling with Bootstrap, rows and columns and Jumbotron. In second blog I will show you at least how to create navbar and form.

References

Bootstrap-https://getbootstrap.com/

jQuery-https://jquery.com/download/

Popper-https://popper.js.org/

Bootstrap LinkedIn learning-https://www.linkedin.com/learning/bootstrap-4-essential-training/

Mastering Bootstrap 4 by Benjamin Jakobus, Jason Marah-https://www.packtpub.com/product/mastering-bootstrap-4/9781783981120