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
I will create a landing page for your project for free. 25 comments 💰 $100k MRR and $1M raised – here’s what I learned building my startup. AMA 🔥 23 comments The Minimalist Entrepreneur is out now! 15 comments Hello IH! I cofounded Rize where we got #1 on Product Hunt in May and just reached $11,000+ in monthly sales. AMA 12 comments Launched my Webflow agency website! :) 6 comments How to do SaaS pricing? Here's a blue-print. 5 comments