How to Build a Responsive Page Using Bootstrap

One of my every project challenge was to build a responsive page with media querys and a few knowledge about how it works, but after it, Bootstrap came to me...

The first thing that I did was to learn about the breakpoints that Bootstrap has and how to use it well.

Step 1

Learn bout the Bootstrap breakpoints and how it works. It uses different media query ranges or breakpoints in their source:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

You can include it in the code using the class that you want for a specific container or object, for example, col attribute create a column in Bootsrap grid structure that has different size depends on the number that you use like col-6.

Step 2

Once you know the responsive breakpoints, you need to add it to a class that you need, if we want to use a col-6 in a large device we can use col-lg-6 or if we want a bigger column for each object in a smaller device we can use col-xs-12, then it is going to be responsive deepens but you need to add more breakpoints if you want to make it looks good in all size and display so don't forget to add as much as you can to make a good page.
Here is a code example of how the breakpoints look in a section:

<div class="container-fluid">
    <div class="d-md-flex d-sm-block">
        <div class="col-md-6 col-sm-12"></div>
        <div class="col-md-6 col-sm-12"></div>
        <div class="col-md-6 col-sm-12"></div>
        <div class="col-md-6 col-sm-12"></div>
    </div>
</div>

It creat a container with one dive inside it, the other div with display flex in medium to large screen a display block for small screen or less, and two different sizes for columns col-md-6, for a div with two divs inside and each use 50% width of the container and col-sm-12 for a column that use the hole row.

You can check it my different project on my Github.