Bootstrap is a CSS framework. Why do you have to learn this as a backend dev?
As a backend developer, it’s always panic to set the frontend layout perfectly responsive using custom CSS as you have to write many media queries but if your template/theme is using Bootstrap you can easily manage responsiveness by using special Bootstrap classes for each HTML element.
There are 5 screen sizes:
XS – Extra small < 576px
SM – Small ≥ 576px
MD – Medium ≥ 768px
LG – Large ≥ 992px
XL – Extra large ≥ 1200px
And basic media queries like:
// Small devices (landscape phones)
@media (min-width: 576px) { ... }
// Medium devices (tablets)
@media (min-width: 768px) { ... }
// Large devices (desktops)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }- Very first you have to know about Containers. 2 types of Containers are there. Fix width & fluid. The .container class provides a responsive fixed-width container. The .container-fluid class provides a full-width container, spanning the entire width of the viewport.
- Now Bootstrap grid system. There are 12 columns across the page. In simple practice, we can set column width by % if we are not using BT. But when we are using BT we can simply apply a class name to set column width like .col-sm|md|lg|xl-3/4/5/6/7/8/9/10/11/12
- Now the basic typography like text alignment, Heading, display, font-weight, text lowercase, text uppercase, etc.
- Now colors of text and background.