Bootstrap

What is Bootstrap? Bootstrap is a CSS framework. It is used to build websites faster without writing everything from the beginning. It already has many ready-made classes for buttons, cards, forms, grids, navigation bars and many more. We only need to add the class names in our HTML. This saves time and makes the website look good with less code. Example Click Me Enter fullscreen mode Exit fullscreen mode Here, "btn" makes it a button and "btn-primary" gives it a blue color. We did not write any CSS for it. Bootstrap Grid System Bootstrap has a grid system with 12 columns. We can divide these columns to create different layouts. For example, if we want 4 equal boxes in one row, each box should take 3 columns because "3 + 3 + 3 + 3 = 12". Example Box 1 Box 2 Box 3 Box 4 Enter fullscreen mode Exit fullscreen mode If we want 6 boxes in one row, we use "col-2" because "2 × 6 = 12". Bootstrap Utility Classes Bootstrap also gives many utility classes. These classes help us change spacing, colors, display, flex, width and many other things without writing CSS. Example Hello Bootstrap Enter fullscreen mode Exit fullscreen mode "bg-success" gives a green background. "text-white" changes the text to white. "p-3" adds padding. "rounded" makes the corners smooth. Flex in Bootstrap Bootstrap makes Flexbox very easy. We only need to use classes instead of writing CSS. Example Apple Orange Mango Enter fullscreen mode Exit fullscreen mode "d-flex" places the items in one row and "gap-3" gives space between them. If there are many items and we don't want them to shrink, we can use "flex-shrink-0" and "overflow-auto" to make them scroll.