import { Meta } from "@storybook/addon-docs";

<Meta title="Documentation/Responsive Design" />

# Responsive Design

Bitwarden supports the following breakpoints:

| Breakpoint prefix | Minimum width |
| ----------------- | ------------- |
| `sm`              | 640px         |
| `md`              | 768px         |
| `lg`              | 1024px        |
| `xl`              | 1280px        |
| `2xl`             | 1536px        |

These can be used to conditionally apply other Tailwind classes at specific screen sizes. Find more
info in the [Tailwind docs](https://tailwindcss.com/docs/responsive-design).

## Example

```html
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="tw-w-16 md:tw-w-32 lg:tw-w-48" src="..." />
```

<img
  class="tw-w-16 md:tw-w-32 lg:tw-w-48"
  alt="Bitwarden logo"
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png"
/>