For anyone who develops using bootstrap

I use this in every product I build and I find it super helpful so I put it on Github today:


Its just some super simple markup that shows you what breakpoint you're in at all times.

UPDATE: also on PH today:


  1. 2

    This is super useful, you should provide a bookmarklet!

    1. 1


      I'm off to google what a bookmarklet is lol

      1. 2

        You will see it is not very complicated . Basically it's a browser favorite that instead of containing a link contains JavaScript. And then you can do whatever you want on the page (like: JavaScript: document.queryselector(...)) For example, inject HTML on the page.
        Usually users drag a link to their browser favorites and click on it to activate on any page.

        (Not sure if this explanation is clear 🙃)

        1. 1

          LOL yeah it does. I actually have a couple myself. Didn't know that was their name.

  2. 2

    Extremely useful. Thanks for sharing.

    1. 1

      More than welcome.

  3. 2

    Yea, i got this problem not knowing 100% on what breakpoint i am

    Good idea!

  4. 2

    This is very useful, thanks for sharing!

    1. 1

      You are super duper welcome! Thank you!

  5. 2

    I have been using Bootstrap in my upcoming project and dude, this is super helpful! Thank you.

    1. 2

      Wow thank you! just the handful of people who have said they appreciate this is already worth 10x the hour or two it took to put together (by that I mean put the site up etc.... not write the 7 lines lol)

      If you're on product hunt a wee upvote wouldn't go amiss:


  6. 2

    That's smart for Bootstrap lovers! But I'm a TailwindCSS fanboy 😛

    1. 3

      haha I want to get into tailwind... but when I sit down and say to myself "ok I'm going to learn this" I then say to myself "but why? I know bootstrap inside out and back to front".

      1. 3

        I absolutely admire the simplicity and usefulness of this snippet, thank you! 👍👍👍

        I've made the equivalent for tailwind for you to include into your site:

        <div className="fixed z-50 top-0 left-0 text-xs font-bold">
          <span class="sm:hidden inline-block rounded px-1 bg-yellow-400">XS</span>
           <span class="hidden md:hidden sm:inline-block rounded px-1 bg-yellow-400">SM</span>
          <span class="hidden lg:hidden md:inline-block rounded px-1 bg-yellow-400">MD</span>
          <span class="hidden xl:hidden lg:inline-block rounded px-1 bg-yellow-400">LG</span>
          <span class="hidden xl:inline-block rounded px-1 bg-yellow-400">XL</span>
        1. 1

          haha no way you read my mind. I was already working on this too.

          I registered tailwindbreakpoints.com last night as well.

          This is so cool thank you, and glad you like it.

          Not meant to ask but an upvote on PH would be awesome too 🤓

          1. 1

            I upvoted already

      2. 2


        But one powerful feature is that you never have to deal with SCSS.

        I was able to copy https://rider-great-1587536941.versoly.com/ and add it into our website builder with 0 work.

        I have been using only default bootstrap classes and the utility classes they give and it has been a great experience compared to messing with SCSS all the time.

        1. 1

          Yeah I feel like I need to jump in at some point. I know in my head it will be awesome to use.

          Btw I stuck this on PH if anyone fancies showing some support


  7. 1

    Just sent this link to my designer, this is super helpful!!

  8. 1

    Cool! This is sick. I just inserted the Tailwind version into my project, thanks :)

  9. 1

    I really like your meaningful commit messages :D

    1. 1

      Yes, I make an effort with them.

Trending on Indie Hackers
After many failed product attempts I bootstrapped a file uploading service to 1K MRR in 6 months - AMA! 34 comments The world's fastest startups are working on just ONE metric... 21 comments Twitter 101 for Indie Hackers 13 comments Catching up to my main competitor Veed 9 comments I built an NFT Guide site. Feedback welcome! 5 comments Landing page feedback: A local note taking app 3 comments