How to create conditional values with Breakpoint ?

Undraw My Documents


A conditional value is a value that is applied only from a certain screen size (and above).

By adding the breakpoint name as a suffix, you define the minimal screen size to which the value will be applied.


The below spacing value is conditional and applies:

  • for small screen: a padding of 3 (ie p-3-xs)
  • for medium screen md and above: a padding of 5 (ie p-5-md)
<component spacing="p-3-xs p-5-md" />


<component attribute="value-breakpoint" />



  • The default breakpoint (screen size) if not specified is small.
  • For the smaller breakpoints, ComboStrap applies default values that you need to overwrite.

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...

Recommended Pages
Undraw My Documents
ComboStrap Styling - Align Attribute

align is an styling attribute of the HTML superset component It permits to align: the content of a component the component itself its children grid The align attribute values may applies: ...
Undraw My Documents
What are breakpoints ?

A breakpoint allows to created conditional styling / design

Task Runner