Specific use of Bootstrap5 breakpoints and containers

1. Bootstrap5 breakpoints

1.1 Mobile First

When it comes to mobile first, we have to mention responsive design first. A responsive interface is to design a page that can adapt to different devices. Responsive design uses technologies such as media queries to achieve style adaptation under different devices/windows. In other words, it will display different page layouts to users based on the different devices you use.
This is achieved based on the media query technology of HTML5, which can obtain the screen width, and then use CSS to use different CSS effects at different widths.
Mobile first means first developing an interface suitable for mobile clients, and then adapting the corresponding style according to the situation on the PC side. The opposite design idea is PC first. The choice of method should be based on your habits and the proportion of users. Nowadays, mobile is generally advocated first.

1.2 Bootstrap breakpoints

The so-called breakpoint refers to the critical point.
This table and its contents must be remembered, especially the class infix, which will be used frequently.
This will be demonstrated in detail in the next layout section. Just read it a few more times here. It doesn’t matter if you can’t remember it. You can always come back to check it later.

As can be seen from the table above, the screen is divided into 6 sizes through 5 breakpoints. Readers only need to understand them here first. The grid system will be further introduced in the third section.

2. Containers

2.1 Containers are used to hold things

Containers are the most basic layout element in Bootstrap and are necessary when designing responsive websites using the default grid system. The maximum width of a container can change according to the width of the browser. The use of containers is very simple. You can directly put the container tag in the inner layer of the body. Generally speaking, a page only needs one container tag to wrap all other visual content. However, in this demonstration, in order to compare the effects of different containers, multiple containers are placed on one page.

2.2 Classification of Bootstrap containers

Bootstrap's containers are divided into three types by default:

1. .container, the default container, whose width is the maximum width of the previous breakpoint before each responsive breakpoint.
2. .container-fluid, a fluid container that always takes up 100% of the browser width.
3. .container-{breakpoint}, breakpoint container, before reaching the breakpoint, its width is always 100% of the browser width, after reaching the breakpoint, its width is always the maximum width of the breakpoint. The breakpoint values ​​correspond to the breakpoints introduced previously.

The following table shows the container width at different resolutions.

2.3 Container changes with browser width analysis

2.3.1 Simple Example

Some of you may not understand the table in 2.2 very well. Let me give you a few examples:
Taking container-md as an example, when the screen width is less than 768px, the container width accounts for 100% of the screen width. When the screen width is greater than 768px and less than 992px, the container width is always 720px. When the screen width is greater than 992px and less than 1200px, the container width is always 960px, and so on. The same is true for other breakpoint containers and default containers.

2.3.2 Several features of Bootstrap container (excluding flow container)

• The container width is jumpy, not smooth, and the width is the same between every two breakpoints.
• The container has no margins before the breakpoint and has margins after the breakpoint. For a 768px screen, the container width is 720px.
• The default container (container) and the small container (container-sm) are currently equivalent, but it is not ruled out that there will be changes in the next step.

2.4 Demonstration code for container changing with browser width

Below is the demonstration code for different browser widths, as well as the GIF effect chart. If you don’t understand, you can download the code and study it yourself. The style part is written by me to set the background color of the container and the interval between each container for easy distinction and viewing, and has nothing to do with the container itself.

2.4.1 Demonstration Animation

2.4.2 Demonstration source code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 
    <title>Container width demonstration at different widths</title>
    <style>
      div{background-color: rgba(0, 0, 255, 0.178);padding: 10px;margin: 10px;}
    </style>
  </head>
  <body>
    <div class="container">Default container</div>
    <div class="container-sm">container-sm 100% wide until small breakpoint</div>
    <div class="container-md">container-md 100% wide until medium breakpoint</div>
    <div class="container-lg">container-lg 100% wide until large breakpoint</div>
    <div class="container-xl">container-xl 100% wide until extra large breakpoint</div>
    <div class="container-xxl">container-xxl 100% wide until extra extra large breakpoint</div>
    <div class="container-fluid"> Fluid container</div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

This is the end of this article about the specific use of Bootstrap5 breakpoints and containers. For more relevant Bootstrap5 breakpoints and containers content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!