search
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

Table of Contents
Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)
Home Web Front-end Bootstrap Tutorial What are the Bootstrap 5 breakpoints?

What are the Bootstrap 5 breakpoints?

Oct 08, 2025 am 01:57 AM
breakpoint

Bootstrap 5的5个响应式断点为:xs(

What are the Bootstrap 5 breakpoints?

Bootstrap 5 includes five default responsive breakpoints based on minimum viewport widths. These breakpoints are used to control layout changes across different devices and screen sizes. They are built into the framework’s grid system, utility classes, and Sass variables.

Extra small (xs)

This is the base level and doesn’t have a specific class modifier since it applies to all devices by default.
- Applies to screens less than 576px.
- Example: col-6 targets extra-small devices.

Small (sm)

- Minimum width: 576px
- Use with sm prefix (e.g., col-sm-4)
- Targets small devices like older phones and small tablets in landscape mode.

Medium (md)

- Minimum width: 768px
- Use with md prefix (e.g., col-md-8)
- Designed for medium devices like tablets (e.g., iPad).

Large (lg)

- Minimum width: 992px
- Use with lg prefix (e.g., col-lg-12)
- Targets larger tablets, laptops, and desktops.

Extra large (xl)

- Minimum width: 1200px
- Use with xl prefix (e.g., d-xl-none)
- For bigger desktop screens.

Extra extra large (xxl)

- Minimum width: 1400px
- Introduced in Bootstrap 5
- Use with xxl prefix (e.g., col-xxl-6)
- Caters to very large monitors.

These breakpoints allow you to build fully responsive layouts using grid columns and responsive utility classes. You can also customize them in Sass if needed.

Basically, just remember the key sizes: 576px, 768px, 992px, 1200px, and 1400px — each unlocks a new level of responsiveness.

The above is the detailed content of What are the Bootstrap 5 breakpoints?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

ArtGPT

ArtGPT

AI image generator for creative art from text prompts.

Stock Market GPT

Stock Market GPT

AI powered investment research for smarter decisions

Popular tool

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Fix breakpoint errors on Windows 11: 10 effective methods Fix breakpoint errors on Windows 11: 10 effective methods Apr 24, 2023 am 10:19 AM

Since Windows 11 is still relatively new and is still expected to feature a lot of improvements, users are bound to deal with a bug or two. One such error is the Breaking Point Reached error message on Windows 11. This error can be due to a number of factors, some of which are known, while others are difficult to determine. Thankfully, these solutions are usually not far-fetched and in some cases only require a system update. Regardless of the cause and complexity, we've collected ways to fix errors in this complete guide. You just need to follow the instructions and you'll be fine. What does the error message "Breakpoint reached" mean? Breakpoint reached is a common error message that Windows 11 users may encounter. This error message usually occurs in

Windows 11 Breakpoint Reached [Bug Resolved] Windows 11 Breakpoint Reached [Bug Resolved] Apr 17, 2023 pm 01:01 PM

Since Windows 11 is still relatively new and still has a lot of improvements, users are bound to encounter a bug or two. One such error is the breakpoint reached error message on Windows 11. This error can be caused by many factors, some known and some difficult to determine. Thankfully, these solutions are usually not far-fetched and in some cases only require a system update. Regardless of the cause and complexity, we've collected reliable ways to fix the error in this complete tutorial. You just need to follow the instructions and you're good to go. Reasons why the breakpoint has been reached in time on Windows 11 Many reasons can cause this error. Some popular ones are memory leaks and the presence of malware. Even if the exact shadow

How to solve the problem that the input point of the program cannot be found How to solve the problem that the input point of the program cannot be found Feb 18, 2024 pm 08:45 PM

How to solve the problem that the program input point cannot be located. When using the computer, we sometimes encounter some problems, one of which is "the program input point cannot be located". The occurrence of this problem will cause us to be unable to open or run a certain program, causing certain problems in our work and life. So, when we encounter the problem of being unable to locate the program input point, how should we solve it? First, we need to understand the reason why "the program input point cannot be located". This problem is usually caused by an error while the program is running. It may be due to the program file being damaged.

JavaScript debugging skills and method experience sharing in front-end development JavaScript debugging skills and method experience sharing in front-end development Nov 02, 2023 pm 05:54 PM

Experience sharing on JavaScript debugging skills and methods in front-end development Introduction: In front-end development, JavaScript is one of the most common and important programming languages. It is widely used to develop web pages, applications, and mobile terminals. However, due to the dynamic and loose nature of JavaScript, developers often encounter a variety of bugs and issues. In this article, I will share some JavaScript debugging tips and methods that I have learned in front-end development,

Code debugging skills in PHP development Code debugging skills in PHP development Jun 22, 2023 pm 01:41 PM

In PHP development, debugging is an inevitable step. Especially when faced with complex business logic and code architecture, problems and even bugs are common. Therefore, efficient code debugging skills are very necessary, which can help us quickly locate problems and fix bugs, and release reliable products as early as possible. This article will introduce several common code debugging techniques in PHP development. 1. Use var_dump() and print_r()Using var_dump() and print_r() is PHP development

Detailed explanation of CSS media query properties: @media and min-width/max-width Detailed explanation of CSS media query properties: @media and min-width/max-width Oct 21, 2023 am 10:04 AM

Detailed explanation of CSS media query properties: @media and min-width/max-width In modern web development, devices have a variety of screen sizes and resolutions. In order to achieve a better user experience, we often need to adjust the style and layout of web pages according to different devices. CSS media query properties are a powerful tool that can help us dynamically apply different styles based on the characteristics of the device. This article will introduce the @media rules and min-width and max-wi in detail

Sharing of common problems and solutions for PHP code testing function Sharing of common problems and solutions for PHP code testing function Aug 12, 2023 pm 03:15 PM

Common problems and solutions for PHP code testing function Sharing Introduction: In web development, code testing is a very important link. Through code testing, potential problems can be effectively discovered and repaired, and the stability and quality of the code can be improved. However, when testing PHP code, you will also encounter some common problems. This article will share these problems and give corresponding solutions. I hope it can help PHP developers better conduct code testing. 1. Question: How to set the error reporting level of PHP? Solution: in generation

Microsoft releases second preview version of Visual Studio 2022 17.6 Microsoft releases second preview version of Visual Studio 2022 17.6 Apr 16, 2023 pm 05:55 PM

Microsoft has announced the availability of Visual Studio 2022 17.6 Preview 2. In this update, Microsoft has made a number of improvements to increase your productivity, simplify game development, improve .NET mobile development, and provide better enterprise management. Release Notes Remove Integrated Edge Developer Tools for ASP.NET Web Workloads C++ In the latest version of the CMake debugger, you can now view the currently defined targets and tests and their properties

Related articles