A beginner-friendly guide for
Bootstrap
Bootstrap is a framework used for front-end development and based on Saas classes. It
allows the creation of modern and responsive websites that use grids and flexbox by directly
manipulating the html, without resorting to CSS. Components and so on can be modified
from the Saas files themselves that are found once downloaded with a package manager
like npm (although it can also be included with some <link> and <script> tags). Its latest
version is Bootstrap 5 and it has and on its page, in addition to the documentation, we can
find an [icon library](https://icons.getbootstrap.com/).
Layout
Bootstrap uses a 12-column system and breakpoints can be used for responsive design and
thus modify the size of the elements and the space they occupy, for this we must append
-breakpoint to the size we want, the breakpoints are:
Size Class
Less than 576px xs (default)
576px up to 767px sm
768px up to 991px md
992px up to 1199px lg
1200px up to 1399 xl
1400px and bigger xxl
To use grids we need to have a container class element: there are 3 container classes
(normal, designated to occupy x percent of space before the breakpoint and fluid, which
always occupy 100% of the space). To manipulate the grid system, a system similar to that
used to create tables in HTML is used, where the columns (col class) go inside the rows
(row class) which in turn go inside the container. To specify the size of the columns we add a
-number or a car so that they occupy the size of their content.
Bootstrap also adds spaces between columns and rows, to prevent or modify them (by
default they are 1.5rem) we can use g- (all), gx- (horizontals) and gy- (verticals). Bootstrap
also has a z-index prefix for all elements that prevents them from overlapping.
Bootstrap
Bootstrap is a framework used for front-end development and based on Saas classes. It
allows the creation of modern and responsive websites that use grids and flexbox by directly
manipulating the html, without resorting to CSS. Components and so on can be modified
from the Saas files themselves that are found once downloaded with a package manager
like npm (although it can also be included with some <link> and <script> tags). Its latest
version is Bootstrap 5 and it has and on its page, in addition to the documentation, we can
find an [icon library](https://icons.getbootstrap.com/).
Layout
Bootstrap uses a 12-column system and breakpoints can be used for responsive design and
thus modify the size of the elements and the space they occupy, for this we must append
-breakpoint to the size we want, the breakpoints are:
Size Class
Less than 576px xs (default)
576px up to 767px sm
768px up to 991px md
992px up to 1199px lg
1200px up to 1399 xl
1400px and bigger xxl
To use grids we need to have a container class element: there are 3 container classes
(normal, designated to occupy x percent of space before the breakpoint and fluid, which
always occupy 100% of the space). To manipulate the grid system, a system similar to that
used to create tables in HTML is used, where the columns (col class) go inside the rows
(row class) which in turn go inside the container. To specify the size of the columns we add a
-number or a car so that they occupy the size of their content.
Bootstrap also adds spaces between columns and rows, to prevent or modify them (by
default they are 1.5rem) we can use g- (all), gx- (horizontals) and gy- (verticals). Bootstrap
also has a z-index prefix for all elements that prevents them from overlapping.
