Hey everyone, I’m back again to tell you about this time about the world’s most popular front-end component Library bootstrap. Currently in version 4.5 bootstrap is a CSS framework. Bootstrap can be implemented easily, works with SASS and CSS, and can be employed to enhance the layout of your website. Bootstrap is designed to let Developers build websites quickly and effectively. We can get started by installing bootstrap either with npm or yarn.
npm install bootstrapor
yarn add bootstrap@4.5.0One of the most powerful things that bootstraps offers us is a grid system referred to as flex-box. A flex-box system is used to position components based on containers, columns, and rows. I will explain each of these. On the top level of the flex-box grid is the container. Containers are required when building Flex boxes. under containers we would have rows and columns. A container is considered to be the parent element of the grid and all other rows and columns must be inside of a container element.
<div class="container"><div class='element'>contained element</div></div>
A row is considered to be a horizontal element in the grid system, Rows can consistent columns. A column represents a vertical element in the grid system.
<div class="container"><div class="row"><div class="element 1 col">Column 1</div><div class="element 2 col">Column 2</div><div class="element 3 col">Column 3</div></div></div>
A row is 12 columns long this means when making our column we can use a number from 1 to 12 to indicate how many columns of the row the element will encapsulate. We can divide the row among the twelve columns. Columns can contain rows and rows can also contain columns.
<div class="container"><div class="row"><div class="element 1 col-2">1</div><div class="element 2 col-6">2</div><div class="element 3 col-4">3</div></div></div>
We can combine all of these elements in way we see fit to create our desired layout.
<div class="container"><div class="row"><div class="element 1 col-2">1</div><div class="element 2 col-8">2</div><div class="element 3 col-2">3</div><div class="row"></div><div class="element 4 col-3">4</div><div class="element 5 col-3">5</div><div class="element 6 col-3">6</div><div class="element7 col-3">7</div></div>
Bootstrap is a very easy way to layout your website. Implementation is easy and the documentation is simple to follow. There are many many more benefits to Bootstrap that I will get into next time. Happy Coding!
