Skip to content

Instantly share code, notes, and snippets.

@WebDevSimplified
WebDevSimplified / bootstrap-breakpoint.css
Last active April 3, 2026 07:00
This stylesheet adds text describing the current Bootstrap Breakpoint in the top right corner of the screen.
body {
margin-top: 40px; /* This margin just makes the text easier to read. You can remove it if you want since it can mess with your other styles. */
}
body::before {
content: "XS";
color: red;
font-size: 2rem;
font-weight: bold;
position: fixed;
W3siaWQiOiJ1bnRyYXBfb3B0aW9uc19zdGF0ZSIsInZhbHVlIjp7InVudHJhcF9jaGFubmVsX2hpZGVfYnV0dG9uX2pvaW4iOnRydWUsInVudHJhcF9jaGFubmVsX2hpZGVfYnV0dG9uX3B1cmNoYXNlIjp0cnVlLCJ1bnRyYXBfY2hhbm5lbF9oaWRlX2NoYW5uZWxfYmFubmVyIjp0cnVlLCJ1bnRyYXBfY2hhbm5lbF9oaWRlX2NoYW5uZWxfbWVudV9idXR0b25fc2hvcnRzIjp0cnVlLCJ1bnRyYXBfY2hhbm5lbF9oaWRlX2hvbWVfdGFiX3NlY3Rpb25fb3VyX21lbWJlcnMiOnRydWUsInVudHJhcF9jaGFubmVsX2hpZGVfaG9tZV90YWJfc2VjdGlvbl9zaG9ydHMiOnRydWUsInVudHJhcF9nbG9iYWxfZGlzYWJsZV92aWRlb19hdXRvcGxheSI6dHJ1ZSwidW50cmFwX2dsb2JhbF9oaWRlX2FsbF9hZHMiOnRydWUsInVudHJhcF9nbG9iYWxfaGlkZV9hbGxfc2hvcnRzIjp0cnVlLCJ1bnRyYXBfZ2xvYmFsX3ZpZGVvX3F1YWxpdHkiOiJoZDE0NDAiLCJ1bnRyYXBfaGVhZGVyX2hpZGVfY3JlYXRlX2J1dHRvbiI6dHJ1ZSwidW50cmFwX2hlYWRlcl9oaWRlX25vdGlmaWNhdGlvbnNfYmVsbCI6dHJ1ZSwidW50cmFwX2hlYWRlcl9oaWRlX3VwbG9hZF9idXR0b24iOnRydWUsInVudHJhcF9oZWFkZXJfaGlkZV92b2ljZV9zZWFyY2hfYnV0dG9uIjp0cnVlLCJ1bnRyYXBfaG9tZV9oaWRlX2Fkc19maXJzdF9zbG90Ijp0cnVlLCJ1bnRyYXBfaG9tZV9oaWRlX2Jhbm5lcnNfYWRzX3dpdGhfY2xvc2UiOnRydWUsInVudHJhcF9ob21lX2hpZGVfaGVhZGVyX3dpdGhfY2F0