What are Bootstrap breakpoints?

 

As I mentioned in the previous post What is a Responsive Web page? , breakpoints play a very important role in making a webpage responsive. So, let's now try to understand breakpoints and see them in action.
  • X-Small: Portrait phones (less than 576 px)
  • Small: Landscape phones (576 px and up)
  • Medium: Tablets (768 px and up)
  • Large: Desktops (992 px and up)
  • Extra Large: Large Desktops (1200 px and up)
  • Extra Extra Large: Larger Desktops (1400 px and up)
By default, these are the categories into which all screen sizes are classified. Bootstrap provides different classes for these categories- sm, md, lg, xl, and xxl. These are called responsive classes.

Let's say we use lg with some other Bootstrap class "A" what it would mean is that particular class "A" will get applied for all the screen sizes >= 992px. Also, suppose we want to apply the "A" class for the 'Large' category but a different class "B" for the 'Extra Large' screen size and above, then we need to use lg with "A" as well as xl with "B".

Also, note that there is no responsive class available for the 'X-Small' category and that's why till now when we were using Bootstrap classes (like col-6, col-4, etc) the effects were getting applied for all the screen sizes ranging from 'X-Small' and all the way up.

Let's now go through an example that combines Bootstrap Grid System with Breakpoints. If you don't know what Bootstrap Grid System is, you may want to go through this first- What is Bootstrap Grid System?

Let's write this simple code snippet-

<div class="row mt-4 text-center">
    <div class="col-12 col-sm-6 col-lg-3 bg-primary py-4">
        col-12 col-sm-6 col-lg-3</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-success py-4">
        col-12 col-sm-6 col-lg-3</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-info py-4">
        col-12 col-sm-6 col-lg-3</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-danger py-4">
        col-12 col-sm-6 col-lg-3</div>
</div>


Now, let's analyze the output screen at three different screen sizes. I will be simulating variation in screen size by opening my Chrome Dev Tools (F12) and resizing the right side pane. While resizing the pane notice that the top right corner displays the current dimensions (Width X Height).

1012 X 754px


At screen width>= 992px, lg is in effect, and hence all the four div elements are taking 3/12 (due to col-3) of the total width.


794 X 754px

At screen width between 576px and 992px, sm is in effect (since we haven't used md in the code, hence sm takes over), and hence all the four div elements are taking 6/12 of the total width.
Note- The last two div elements have gone to the next line because the first two divs had already covered the whole available width (6/12 + 6/12)

408 X 754px

At screen width < 576px, the four div elements are taking 12/12 of the total width as col-12 is in effect now.


The responsive classes are not limited to the grid system, in fact, they can be used almost anywhere (such as d-flex, margin, padding, etc) where responsiveness is required.
Also, it's not necessary that the div elements contain only texts as in the above example. It may contain images, any other element, or even a nested grid but the responsive behavior will be the same.

One final thing is to note that the breakpoints are not the whole picture when it comes to a responsive webpage. It's just one piece of the puzzle (a very important piece though) and there are many other tools that make a webpage responsive.

If you want some more insights into Bootstrap breakpoints, check out this video https://youtu.be/UsQL_P1emMM

Comments

Post a Comment

Popular posts from this blog

What is Bootstrap Grid System?

Image
 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of  What is Bootstrap? Why use it?  the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System. Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen. Let's write this simple piece of code:- < div   class = "row mt-4 text-center" >      < div   class = "col-12 border bg-info py-4" >         12/12 or 100% of total width available &l
Read more

How do websites work?

Image
Whenever we hear the term "Web Development", it brings a lot of terminologies along with it- Frontend, Backend, Client, Server, Full-Stack, MEAN Stack, API, Database, HTTP, etc. Most of the people who have been working on application development (whether it's the web, Android, or iOS) for quite some time understand these terms, their interconnections, and their individual roles in making the web work. But the ones who are relatively new to this domain often are unable to see the whole picture sometimes even after having a good knowledge of the individual pieces that I mentioned above. I will attempt to draw an analogy between the working of the Web and the working of a bank. In my view, this analogy really simplifies things. Let's say Chirag has a savings account "D" with a bank (let's say S). Today, Chirag needs to withdraw some money from his account and he goes to the nearest branch of the bank for the same. One of the bank's employees Aakriti at
Read more