What are breakpoints ?

Undraw My Documents

What are breakpoints ?

About

breakpoints defines a set of screen size that can be used in conditional value in order to apply styling attribute based on the screen size of the user browser.

List

Breakpoint Short name Apply to browser size Device Targeted
X-Small xs <576px Mobile Phone
Small sm ≥576px Ipad
Medium md ≥768px Ipad Pro
Large (default) lg ≥992px Desktop Screen
Extra large xl ≥1200px Large Desktop Screen
Extra extra large
(new with bootstrap 5) 		xxl ≥1400px Extra Large Desktop Screen

combostrap follows the breakpoints of bootstrap (even if you have created your own custom bootstrap)



Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.



Related HowTo's
Undraw Animating
How to align a text based on screen size ?

This howto shows you how to apply a text alignment that depends on the screen size. In the text align howto, you have learned to apply one of the tree possible text alignment. In this howto, you will...
Undraw Animating
How to split the horizontal space in two with the grid component ?

This howto shows you how to split the horizontal space in two with the grid component. The grid component splits the horizontal space across its children. By default, it will do it across: 4 children...

Recommended Pages
Undraw My Documents
ComboStrap - Font Size Typographic Attribute

How to set the font-size with the font-size attribute
Strap Toolbar
ComboStrap - Railbar

The railbar is a layout element that shows a navigation rail with all devel:menusmenus actions: the page actions (Create / Edit / Show / Backlinks / Old Revisions / BackToTop) the user actions (Login...
Undraw My Documents
Search

Every Box components and even the whole main page dimension may be resized with the styling attributes: and . The width attributes support the following values: length - a length (in pixel,...
Rem Strap Conf
ComboStrap Styling - Length Scale (Size Scale)

Every length are scaled based on what's called the remrem (Root Emphemeral Unit) which is equal by default to 16px. This scale is used for font size and spacing (component spacing and line spacing) The...
Spacing Margin Padding
ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding between block component where: margin is a transparent space outside the box (not filled with the background color) padding is the space inside...
Undraw My Documents
ComboStrap UI - Collapse

collapse is a menubar component that will collapse its children on a smaller screen making them only visible by clicking on the sandwich icon. the toggle the accordion All the element that are...
Undraw My Documents
ComboStrap UI - Menu bar

A menubar is an horizontal navigational bar with links and dropdown menu that should be used in the page header. The start of the menubar. The brand. You can also put your logo icon Collapse...
Undraw My Documents
ComboStrap UI - Table

Table is a component that shows data in a list of record. The table is responsive and adapts to all screen sizes but does not wrap. If you want to use a table for layout purpose, you should use a grid....
Undraw My Documents
Float an element in ComboStrap

Float permits to print text along the side of a component
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...



Share this page:
Follow us:
Documentation:
Request an explanation if the documentation is not clear.
Edit and correct this page.



Task Runner