Bootstrap 5 Breakpoint Indicator

SizeUtil.tsx

/** Shows the current width breakpont on the screen. */
export const SizeUtil = () => {
  if (process.env.NODE_ENV === 'development') {
    return (
      <div className='fixed-top m-3'>
        <div
          className='d-inline d-sm-none p-2 fw-bold'
          style={{ background: 'red' }}
        >
          xs
        </div>
        <div
          className='d-none d-sm-inline d-md-none p-2 fw-bold'
          style={{ background: 'orange' }}
        >
          sm
        </div>
        <div
          className='d-none d-md-inline d-lg-none p-2 fw-bold'
          style={{ background: 'yellow' }}
        >
          md
        </div>
        <div
          className='d-none d-lg-inline d-xl-none p-2 fw-bold'
          style={{ background: 'green' }}
        >
          lg
        </div>
        <div
          className='d-none d-xl-inline d-xxl-none p-2 fw-bold'
          style={{ background: 'blue' }}
        >
          xl
        </div>
        <div
          className='d-none d-xxl-inline p-2 fw-bold'
          style={{ background: 'violet' }}
        >
          xxl
        </div>
      </div>
    )
  }
  return null
}