24
24 Comments

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:

http://bootstrapbreakpoints.com/?ref=IH

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

UPDATE: also on PH today:

https://www.producthunt.com/posts/bootstrap-breakpoints





  1. 2

    This is super useful, you should provide a bookmarklet!

    1. 1

      Cool...

      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:

      https://www.producthunt.com/posts/bootstrap-breakpoints

  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>
        </div>
        
        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 🤓
          https://www.producthunt.com/posts/bootstrap-breakpoints

          1. 1

            I upvoted already

      2. 2

        Likewise.

        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

          https://www.producthunt.com/posts/bootstrap-breakpoints

  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
What you are currently working on? 116 comments IH invite system is broken 28 comments How this Reddit marketing tool used itself to grow to $5k/MRR 24 comments Roast my 3D landing page! 13 comments I don't know what to do on indie hackers anymore. 2 comments How to write an engaging comment on Twitter 1 comment