Breakpoint Debug

Description

Dynamically displays the current Bootstrap breakpoint in real-time, enhancing your development workflow. Perfect for debugging and optimizing responsive layouts.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`position`	`bottom start`	`String`	Position of the component Options: `top start`, `top end`, `bottom start`, `bottom end`
`pill`		`Boolean`	Pill variant of the component
`color`	`primary`	`String`	Color of the component Options: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
`dimensions`		`Boolean`	Show screen dimensions
`dimensions_format`	`(w x h)`	`String`	Set dimensions format, only if dimensions is activated
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::BreakpointDebugComponent.new(position: "top start", color: "primary") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "top end", color: "secondary") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom start", color: "light") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom end", color: "dark") %>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

<span class="badge bg-primary position-fixed m-1 top-0 start-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-secondary position-fixed m-1 top-0 end-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-light position-fixed m-1 bottom-0 start-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-dark position-fixed m-1 bottom-0 end-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

Pills

<%= render Railsboot::BreakpointDebugComponent.new(position: "top start", color: "success", pill: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "top end", color: "danger", pill: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom start", color: "warning", pill: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom end", color: "info", pill: true) %>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

<span class="badge bg-success rounded-pill position-fixed m-1 top-0 start-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-danger rounded-pill position-fixed m-1 top-0 end-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-warning rounded-pill position-fixed m-1 bottom-0 start-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<span class="badge bg-info rounded-pill position-fixed m-1 bottom-0 end-0">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

Dimensions

<%= render Railsboot::BreakpointDebugComponent.new(position: "top start", color: "success", pill: true, dimensions: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "top end", color: "danger", dimensions: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom start", color: "warning", dimensions: true) %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom end", color: "info", pill: true, dimensions: true) %>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: "("counter(w)" x "counter(h)")";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-success rounded-pill position-fixed m-1 top-0 start-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: "("counter(w)" x "counter(h)")";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-danger position-fixed m-1 top-0 end-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: "("counter(w)" x "counter(h)")";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-warning position-fixed m-1 bottom-0 start-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: "("counter(w)" x "counter(h)")";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-info rounded-pill position-fixed m-1 bottom-0 end-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

Dimensions format

<%= render Railsboot::BreakpointDebugComponent.new(position: "top start", color: "success", pill: true, dimensions: true, dimensions_format: " - wpx") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "top end", color: "danger", dimensions: true, dimensions_format: " - wpx") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom start", color: "warning", dimensions: true, dimensions_format: " - wpx") %>
<%= render Railsboot::BreakpointDebugComponent.new(position: "bottom end", color: "info", pill: true, dimensions: true, dimensions_format: " - wpx") %>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: " - "counter(w)"px";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-success rounded-pill position-fixed m-1 top-0 start-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: " - "counter(w)"px";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-danger position-fixed m-1 top-0 end-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: " - "counter(w)"px";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-warning position-fixed m-1 bottom-0 start-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<style type="text/css">
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }
  @property --_h {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vh;
  }
  :root {
    --w: tan(atan2(var(--_w),1px));
    --h: tan(atan2(var(--_h),1px));
  }
  .railsboot-breakpoint-debug-dimensions {
    display: flex;
    gap: 0.2em;
  }
  .railsboot-breakpoint-debug-dimensions:after {
    content: " - "counter(w)"px";
    counter-reset: h var(--h) w var(--w);
  }
</style>
<span class="badge bg-info rounded-pill position-fixed m-1 bottom-0 end-0 railsboot-breakpoint-debug-dimensions">
  <span class="d-block d-sm-none">xs</span>
  <span class="d-none d-sm-block d-md-none">sm</span>
  <span class="d-none d-md-block d-lg-none">md</span>
  <span class="d-none d-lg-block d-xl-none">lg</span>
  <span class="d-none d-xl-block d-xxl-none">xl</span>
  <span class="d-none d-xxl-block">xxl</span>
</span>
<!-- just needed for the preview -->
<div class="ratio" style="--bs-aspect-ratio: 25%;"></div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/breakpoint_debug_component.rb).
A view template (app/components/railsboot/breakpoint_debug_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/breakpoint_debug_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Get access You need to purchase a professional license to download this component.

Breadcrumb Button