Last active
January 2, 2025 17:11
-
-
Save WebDevSimplified/d7deffbd6631834003ad07ca60aaf906 to your computer and use it in GitHub Desktop.
This stylesheet adds text describing the current Bootstrap Breakpoint in the top right corner of the screen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
top: 0; | |
right: 0; | |
} | |
/* This box class is purely used for explaining how the bootstrap grid system works. */ | |
.box { | |
background-color: lightblue; | |
border: 1px solid blue; | |
min-height: 50px; | |
font-size: 2rem; | |
} | |
@media (min-width: 576px) { | |
body::before { | |
content: "SM"; | |
} | |
} | |
@media (min-width: 768px) { | |
body::before { | |
content: "MD"; | |
} | |
} | |
@media (min-width: 992px) { | |
body::before { | |
content: "LG"; | |
} | |
} | |
@media (min-width: 1200px) { | |
body::before { | |
content: "XL"; | |
} | |
} | |
@media (min-width: 1400px) { | |
body::before { | |
content: "XXL"; | |
} | |
} |
Thank you
Thank you for providing this CSS file that I can use to test the Bootstrap functionality! I hope you are having a great day!
thank a lot
xiexie ni, thankyou a lot. I hope you have a great day as well!
TY for lessons, Kyle!
thanks :) 🫡
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot buddy !