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

<button class="btn btn-primary">Click Me</button>

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

<div class="row">
    <div class="col-3">Box 1</div>
    <div class="col-3">Box 2</div>
    <div class="col-3">Box 3</div>
    <div class="col-3">Box 4</div>
</div>

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

<div class="bg-success text-white p-3 rounded">
    Hello Bootstrap
</div>

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

<div class="d-flex gap-3">
    <div>Apple</div>
    <div>Orange</div>
    <div>Mango</div>
</div>

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.