Ten Years of Bootstrap | Hacker News Reader

Ten Years of Bootstrap

blog.getbootstrap.com

184 pointsingve90 comments

Really loved Bootstrap when it came out, but nowadays the style and its way of doing things feel a bit dated. That said with the current (good) state of CSS in browsers you can build your own responsive designs without relying on a framework.

A negative effect of all these frameworks is that I work with more and more frontend devs that just don't know their way around (S)CSS, so if you throw them into a project that uses a framework they don't know or (gasp) hand-crafted CSS they are completely lost. Same thing with Javascript tooling btw, in a recent project a frontend dev wanted to rewrite the whole codebase because he was not familiar with Webpack and only knew vite (which is the new cool thing it seems), so he wasn't able to work with the existing code.

This. I wish more devs tried to utilize modern css and js directly instead of relying on frameworks.

I try to do this for my own projects but there's gravitational pull toward frameworks in companies.

> I wish more devs tried to utilize modern css and js directly instead of relying on frameworks.

Its all well and good saying that, as long as you do not value your time.

Personally, I would rather use a reasonably up-to-date framework such as Bootstrap 5 because Bootstrap has already taken care of the majority of those CSS hacks that are often required to make things look right on various browsers.

And frankly, why re-invent the wheel ? Most "utilize modern css and js directly instead of relying on frameworks" likely ends up looking like "a lot of boilerplate with a few customisations". So why not use Bootstrap for all the boilerplate and spend your time more productively by focusing on the customisations ?

P.S. JS is not a strict requirement for Bootstrap, it can be used CSS-only. But one added benefit of Bootstrap 5 in particular is they've removed the jQuery dependency.

> This. I wish more devs tried to utilize modern css and js directly instead of relying on frameworks.

Making any large front end application WITHOUT a framework or a view library is just a bad idea, even today. There is nothing in the DOM or spec-wise that is equivalent to the power of React or Vue, period.

When it comes to CSS, the situation is better. Flexbox, CSS grids, ... have made creating CSS layouts extremely easy. So CSS kind of successfully brought in a lot of things that were directly exploitable by front-end developers.

To this day, HTML and the DOM are JUST NOT RAD for complex UI, period. Web components have a few nice ideas but a lot of flaws (especially support on IOS). Whether you build your own framework or use someone else library, you will absolutely need something that sits on top of the DOM for large front-end applications.

So it's not by choice that most front-end devs have to rely on a framework. It's because the standards are not good enough.

> I try to do this for my own projects but there's gravitational pull toward frameworks in companies.

A simple example. you need a mechanism to manage the life cycle of event handlers on your page, if your app uses the history API. If you do so then you've already started writing your own framework.

Web components failed to address a lot of stuff developers use view libraries for. That's why it is not that popular.

Yea, I like to use a framework. But I think devs should have the basics down about css. Like margins, padding, div vs. span, etc. I remember reading a css book on vacation in Aruba like 10 years ago, and just having the basics helps considerably, especially when just trying to debug small layout changes.

Tbh if you’re not a guy whos not full time doing web dev then you shouldn’t say that. I’ve known html since 1997, and basic js since 1999. It’s exhausting as hell to keep up with all the crap the field keeps making up. I just want a page that looks simple, neat, responsive and shows what I want my users to see. Bootstrap has been the only consistent thing that has allowed me to do that. It allows me to spend a day or half designing the page so I can get back to the data and the backend which is where the magic happens for most people.

If CSS was not a hack upon a hack I'd be with you but going back to the early 2000s I must have wasted weeks trying to debug obscure CSS corner cases. Yes, we now have flexbox and css grid to replace CSS-P but that has to work with all that came before it. Anything which reduces the time sink of messing with CSS is a blessing.

Web development is not my job. I still use Bootstrap to very quickly make a passable UI for internal projects. I'm really glad not to have to spend time learning all that stuff.

I think too many people equate Bootstrap with just their grid system, and then assume "oh I can do this with CSS easily now". As a customizable baseline for styles and components it's much more than that. It's saved me and my projects from writing tons of bespoke CSS.

I start a lot of projects with JUST the grid system (included with SASS) and add anything else I need later (usually buttons and modals).

Hearing anecdotes like this are so nice because it means that maybe one day I can have one of those dev jobs where I can be bad at CSS.

The vast majority of dev jobs don't require you to be good at CSS. Unless you're going for a front end position, which is a small minority of jobs, it's not even a factor.

Yup. I've been doing various backend work for most of my career, and never once had to touch CSS for my work responsibilities.

I don't understand the reasoning of that frontend dev, was he hired to work on the toolchain or on the frontend product? Because the tooling is almost irrelevant unless he was hired to maintain the toolchain.

> you can build your own responsive designs without relying on a framework

Except you'll build a framework. You'll add a bunch of classes for frequently used elements (nav, modals, buttons, etc), SASS variables, etc

I don’t really see a problem with this. Every bootstrap project I’ve worked on has entailed lots of nasty and buggy overrides that are hard get your head around.

The problem is that the people who are onboarded 5 years into your project's development will be lost and will have to waste countless hundreds of hours learning your unmarketable framework.

They can't Google how to do something in your framework. They can't find component libraries that extend your framework. They probably can't find sandboxes that demonstrate every single one of your framework's use cases. The documentation of your framework is also likely to be worse than that of frameworks that have had tens of thousands man hours be put in their development and tens if not hundreds of thousands more battle testing them in production across a variety of projects.

It’s not a framework, it’s just css. You are making a design system, which if you use bootstrap you still have to do anyway when reach to that point of scaling your front-end.

The difference is instead of having your style in a single language (css) in a cohesive system, you have styles in both css and bootstrap and they often clash.

Disagreed, in my entire career so far i've never seen CSS being written completely separately from the components that will use it - there is always strong coupling between how something should work and look. This is done by Bootstrap, Foundation, Materialize and others, the exceptions to this (like Spectre) being the minority.

For example, in Bootstrap and other frameworks you'll always have JS components as well, for non-trivial concerns, such as providing carousels, lightbox functionality, tooltips, collapsibles, tabs and so on. Not using any of those will mean having to write your own from scratch, which will only make the aforementioned problems worse. Sure, you could probably figure things out without too many problems if it was just CSS, but it never is.

Sure, you'll need custom styling on top of all of those anyways in most cases, but i'd argue that it's harder to screw that up and therefore most teams should just stick to the already tested and established solutions out there, like building atop Bootstrap or others.

> carousels, lightbox functionality, tooltips, collapsibles, tabs and so on

I do want to reuse these, i just dont want to have to override the shitty style that comes with them that clashes with my design anyway. Also bootstrap for example doesnt do all of these so you would have to use yet another 3rd party library on top of bootstrap. Bootstrap is useless to me, but I’m not against component libraries in general.

I see! I think we just have differences of opinion/preferences here.

Bootstrap does provide most of those:

  Carousels - https://getbootstrap.com/docs/5.1/components/carousel/
  Tooltips - https://getbootstrap.com/docs/5.1/components/tooltips/
  Collapsible - https://getbootstrap.com/docs/5.1/components/collapse/
  Tabs - https://getbootstrap.com/docs/5.1/components/navs-tabs/

For lightbox functionality, you'd indeed need an external plugin (or just combine modal + responsive image), but i see the fact that such plugins are even available as a plus, since that means being able to download one and start using it, without spending days or weeks developing low level functionality.

I think that the difference here is that you seem to prefer to focus on the design part a lot more (which is valid in projects where the brand is front and center), whereas i care more about implementing functionality quickly and prioritize that. For the latter case, Bootstrap works nicely. Probably less so for the former.

Having designed several sites and products without frameworks (e.g. https://github.com/kiprotect/klaro/tree/master/src/scss) I think it's way more concise and easy than relying on a framework.

Something like Bootstrap is great when you don't need the custom design or you don't have a CSS expert available. For example, backend admin CRUD views and reports. It doesn't matter if it looks a bit staid or dated, the end users just need familiar and usable.

Easy to say now since we have more choices but bootstrap really changed the game for non designers. We still use it in production for our company and it just works.

Side note, for nostalgia, here is the HN posting on it from 10 years ago: https://news.ycombinator.com/item?id=2904355

Are you saying he didn't know JS or just Webpack? If the latter there's no shame in that considering he knew a better alternative, ie. Vite. That's like chiding someone for not knowing jQuery when they're familiar with Webpack.

Frameworks like bootstrap have one big advantage: less creative surface, more get things done surface. They are getting lost not because they don’t know css. They don’t know what was on your mind when you wrote it, and they usually have neither a clue, nor clear documentation, no comments, no common practice guide. Nothing. It is just a wall of fragile definitions already crippled by some previous maintainer to the level when any change explodes into a refactoring of a 20-page interdependent mess. Any negative effect of a framework is heavily offset by the fact that any handcrafted css is eventually fucked up (if not right away), and it is not even negative if a framework helps avoiding it.

Wait Bootstrap is only 10 years old? I'd have sworn it was 15 years old or so by now. I created Picnic CSS back in 2014 as an alternative to the big and well-established Bootstrap project, if Bootstrap was created in 2011 it means that it became the main front-end project everyone was using in just under 3 years! That's amazing, and congrats on the 10th anniversary!

The front-end web realm was really eager for some sort of standardized way of doing things. Every project prior to Bootstrap required revisiting styles and starting from scratch or creating an internal Bootstrap-like base that would be used, which meant very little of that would be carried between jobs for employees. This is also probably why the early days of Angular and React were so unstable; mass adoption through different versions which were still finding a stable approach to iterative evolution.

Your comment is spot on.

Prior to Bootstrap, the concept of a purely CSS framework was relatively foreign. Aside from jQuery UI (which of course required jQuery and had limitations on styling) the closest thing we had in the 2009-2011 period was reset.css and 960.gs. Even rudimentary things like rounded buttons were still impacted by the lack of uniform border-radius support plus an IE6/IE7 marketshare greater than 30%.

Yeah the horror show that is learning every rando dev's personal CSS methods could be really painful.

When you just want to move a button ... "oh they're using bootstrap" often saved a ton of time, for things that really shouldn't take time.

> Every project prior to Bootstrap required revisiting styles and starting from scratch or creating an internal Bootstrap-like base that would be used

I went through several projects where team leads laughed at the idea of Bootstrap in their projects. They treated Bootstrap as a bulky, unnecessary mess of a framework that only inexperienced code monkeys used in spite of it being small and modular.

The dumbest one of all was a team lead who turned out to have little to no real world experience in decision making. He had some help creating an internal CSS framework. It was responsive, modular, mobile first, and had lots of builtin classes for font/element sizes, colors, behavior, etc. Sound familiar? His column-based framework was a terrible drop in for Bootstrap. Even the class attributes were blatant rip-offs, but the lack of robustness meant lots of inline CSS to fix elements.

The Angular/React model also threw a huge wrench into the Bootstrap way of doing things. The latter relied on a smattering of ad-hoc JS for things like modals and tooltips. It dovetailed nicely with jQuery, but I remember it was wholly incompatible with Angular. There ended up being an "Angular Bootstrap" package specifically designed for that, and I remember it felt like a regression at the time that everything would get siloed under these JS frameworks.

Yeah, it got popular quick.

I think the bar was low for good design on the web, and they did a really good of making it out of the box seem like "good design".

I remember the first time I saw an open source thing was bootstrap based, without knowing what bootstrap was, I immediately asked "wait, what did you use to make it look that good, and how can I use it?" I could guess it was using some third party tool, it was just so much better than typical.

Maybe you're thinking of Blueprint, which is about 15 years old now.

I remember the first time I saw a friend's site made with Bootstrap, around 2011-2012. I was so impressed by his design skills!

...it was about 6 months later I discovered what Bootstrap was, after noticing half the websites I was visiting looked just like his.

I also remember when developers that only knew and used Bootstrap started appearing.

A university I worked at had a beautiful internal website, designed by a Design professor there and tested in students using all the famous methodologies. A few months after I left, a couple new developers were hired and decided to nuke the old design and reimplement it all using Bootstrap because they didn't know CSS/JS.

It was never the same.

> I also remember when developers that only knew and used Bootstrap started appearing.

They're called "new" developers. They don't have the same skillset of "experienced" developers. Luckily, "new" developers become "experienced" over time.

If your skillset is HTML + CSS then you're not a developer. You're more of a web designer.

Or a masochist if you're actually trying to code with it (being turning complete).

If anything, a software engineer is more likely to reach for a CSS library like Bootstrap instead of designing and implementing their own styles.

There are plenty of people who call themselves "frontend developers" whose skill set is: HTML, CSS + image editor (photoshop, indesign or whatever the current fad is).

This kind of position is still pretty common in the enterprise and enterprise-centric consulting shops. Sometimes those developers are also called "designers" or "web designers" (despite doing more development/image editing than design itself). Btw, often the job-title is given by the company. Makes it kinda hard for developers to progress their careers.

Reminds me of all the times I've seen licensed engineers gatekeep the word "engineer" from us computer people :)

I once had a "Lead Frontend Developer" who mostly did HTML and CSS (and was quite good at it) and could get by with jQuery to do various visual effects. We had a large contract to maintain a site that used AngularJS, and he convinced all the higher-ups that writing all the frontend code was my job because "Angular is more of a backend thing."

I don't think I'd consider this guy a frontend developer given that he couldn't be bothered to learn a framework that falls within his job description. But we also had a UX team to actually design the visuals, so I don't think I'd put him in the designer camp with them either. What was he? "Lead CSS Guy?"

If your skillset is HTML+CSS, I think you can still be more of a developer than a designer. Someone else gives you mockups and you implement them.

HTML+CSS can get you pretty far in a lot of cases without any JS required, though since HTML5, the spec includes interfaces to the Javascript APIs, as well as a whole bunch of stuff for accessibility. I enjoyed this post from a few months ago which helps give you a sense of the depth of HTML: https://news.ycombinator.com/item?id=27080348 . This person didn't even dive into the spec, just the MDN docs.

To contrast this, a designer is someone who does things like visual branding and consistency, creating assets like logos, background images, maybe even vector graphics, and device breakpoints.

HTML and CSS are also complex enough that you can even spend a significant time specializing in one/both.

> They're called "new" developers.

Not necessarily. There's still plenty of experienced developers with multiple years of experience that only know a very limited set of technologies. And for years before Bootstrap, inexperienced developers often knew CSS and a bit of JS. And there is nothing wrong with those developers.

My post is not a judgement on beginner developers, I think you're projecting this. It's rather a lamentation of how a certain technology ended up affecting both design and learning negatively.

Also, I find it extremely wasteful and un-pragmatic to rewrite a well designed website from scratch for no benefit other than to the devs themselves. It was a loss for not only the students and teachers of the university, but also for those developers.

> Luckily, "new" developers become "experienced" over time.

Not really if they actively avoid learning.

Negative is subjective. This is like someone shitting on the model T and Ford because now bugattis and Rolls royces aren’t being found in streets commonly.

Bootstrap democratized accessible design. It might be vanilla and bland but no one had trouble navigating a bootstrap site so “negative” is a subjective judgement here.

Nobody is shitting on anything. This is a very uncharitable reading of my comment.

Just because Bootstrap had some very good aspects, doesn't mean it also didn't have some negative ones. I find this idolatry of tools a very troubling aspect of our industry. It should be possible to reflect on the negative aspect of good tools without someone saying you're "shitting" on it.

Also notice that I never complained about Bootstrap being vanilla or bland. The issue here was that something well designed and well tested was rewritten from scratch and replaced with something that ended up being inferior for no reason other than misguided developers.

And "no one had trouble navigating a bootstrap site" is a bold claim, considering how flexible it was. In fact the main issue with the website I mentioned was the worsened navigation introduced by the developers.

> They're called "new" developers. They don't have the same skillset of "experienced" developers. Luckily, "new" developers become "experienced" over time.

In my experience, the "experienced" developers produce inaccessible messes. While Bootstrap continues to be a web leader in accessibility.

It was exactly the same with jQuery - there were a legion of people (older than me!) who could only "code" with jQuery. They'd never seen window.getElementById().

> It was exactly the same with jQuery - there were a legion of people (older than me!) who could only "code" with jQuery. They'd never seen window.getElementById().

No, they'd seen window.getElementById() but quickly realized that DOM API manipulation wasn't consistent between browsers. The whole reason jQuery was created in the first place was to abstract these browser inconsistencies away into a single API.

As someone who started writing Javascript in 1997, when it came around, I would default to jQuery unless I had a very good reason not to.

jQuery still provides an objectively superior (more expressive, concise, and compatible) API for the dom. Yes, the cut an paste "you don't need jquery" solutions work 90% of the time. But jquery works 99.99% of the time and cover more of the gnarly edge cases that exist even on modern browsers.

I know Bootstrap can get a lot of hate but it's given me the ability to create things that would never have been finished/made without it. It's a little like Electron in that way. I'm terrible at design, just awful at it, but I'm pretty good developer. Bootstrap lets me get my ideas in a working not-too-bad-looking state whereas if I was doing it from scratch I would have given up on a number of projects due to frustration and not being able to see a path forward.

Bootstrap might not be the prettiest but it gets the job done. I'm currently in the process of contracting a designer to re-skin/re-design a product I made using a bought bootstrap theme. I honestly doubt I'd have taken on this project (and executed it successfully) or be able to pay a designer to do this so that I can improve for next year's use of this project without Bootstrap.

I have a ton of respect for designers and what they do but I don't have those skills and often I either can't afford a good designer or it's not something that the general public will see, for those things Bootstrap is a godsend.

Making the jump from purely backend work to putting together a web UI for my project was a huge undertaking. Bootstrap gave me a solution that's better than I could have accomplished in any reasonable amount of time and allowed me to focus on building templates, writing my small amount of JS functionality, containerization, hosting, and the 100's of other small things that are needed.

Exactly, I use bootstrap more as a scaffolding/wireframe type tool and often it's just good enough. For the times when I want to elevate my product I can bring in a designer. Bootstrap lets me be productive and leverage the skills I DO have instead of getting bogged down in how ugly my stuff looks.

22% of all websites – what a stat! Incredible what such a small focused team was able to accomplish.

Must be 80% of intranet / admin tools.

Seeing this makes me feel old. Wow... where does the time go? Jumpin' Jehoshaphat.

In a similar vein, I only just now started watching Alias, which premiered in 2001. In one of the first season episodes, one of the characters is talking about MEMS[1] and how it's "the next generation's next generation." I was struck by that as I had no idea that MEMS was as old a technology as it is.

Seems like everything is getting old so fast here lately.

[1]: https://en.wikipedia.org/wiki/Microelectromechanical_systems

time goes to: recreating every single library in every new language. Not-invented-here syndrome. Reinventing language features. Webpack. Transpilers. 1000 leaky abstraction layers. Undocumented projects. Unresolved bugs. Trying to create applications in a document model. etc etc etc.

My first introduction to web development was in a summer of 2012 internship at HP. I used Bootstrap and... jQuery Charts I think? to make an internal dashboard that would visualize data dumped out of a SQL database (it was also my first introduction to SQL, and to ASP.NET).

The server-side code would just scrape the entire dataset and dump it directly into the client-side script as one big array, lol. And then the UI could filter and narrow the data from there. It was goofy, but it worked.

My love for the web began there, and Bootstrap honestly contributed to my experience. Aesthetics are important to me, and the fact that I could so easily make something that looked nice was really gratifying. I haven't really used Bootstrap for anything else since then - I quickly fell in love with and got comfortable with handwritten CSS - but I'm glad it was there at the start.

I wish they'd kept the original 3D look-and-feel of the 2.3.x series (the one with 3.x looked slightly different) distributed with all the major versions since (as an option).

I work on some products with a variety of bootstrap versions.

Some like 2.3.x style look really nice IMO.

Style is cyclical.

You can just theme modern Twitter Bootstrap to have the old 1.1.1 or 2.x aesthetics. It wouldn't take that much effort.

well-volunteered. Do you have a link?

    * {
        background-image: linear-gradient(a big shadow);
        border-radius: 5 million pixels;  
        box-shadow: 5 million pixels;  
        text-shadow: 5 million pixels;
    }

...that should get you most of the way

I said you. My CSS frameworks all emulate styles from long before Twitter Bootstrap was a thing, and I've always found every iteration of it to be incredibly ugly. I love writing CSS, you should also. It isn't that hard to emulate just about any style, especially when you're just theming an existing CSS framework like Twitter Bootstrap. In its case, you can get halfway there by just checking what the gradient parameters, border-radius and button sizes were.

> I love writing CSS, you should also.

No I shouldn't.

You should. It would get you what you want, in this instance.

Not sure how valuable this comment is except as a thank you! I'm once again back to bootstrap using VueStrap.

It's helped me learn(ing) vue and build fast. Just like the original CSS bootstrap helped me learn a lot about CSS.

I still use some of their patterns like css 'classes.'

I'm indebted again and great to see the dev community keeping up with new tech! For me taking templates and editing and building on them is a great way to pick something new up.

I remember the early days of CSS when Jeffrey Zeldman and Eric Meyer were pushing the boundaries of what IE would allow and web standards kicked and screamed their way into existence. Anyone remember CSS Zen Garden? The thing is, though, you had to be full-time front-end to make that stuff and that's why Bootstrap was so successful for most of us who focus on where the real business value is added.

> Anyone remember CSS Zen Garden

Yes!

Blew ours minds back at the time.

I remember finding bootstrap when I was in school and it saved me hours! And then I also found a Windows 8 "metro" theme for it [0] I thought it made my web projects so cool...

0: http://aozora.github.io/bootmetro/

wow what a ride. I discovered bootstrap a bit late, I think August of 2013. It was so nice though, not having to worry about a lot of CSS details and knowing my page looked ok on many devices.

How do the core maintainers, no longer at twitter, get paid these days? Is Bootstrap their main job, and if so how does it pay?

One of the creators works for Coinbase, and the other is at Github.

Oh wow! Do you know if their employers pay them to work on it on-the-clock (how much of their job?), or if it's actually a s spare-time/hobby project for them?

This kind of traditional way of getting paid while working on open source (a company pays you a salary to work for them, you work on open source in some of your time, you don't make money from the open source) sometimes seems like a thing of the past for big/popular projects, interesting to see it still in play here.

Bootstrap was cool. LESS was cool back then but I hated it, so (I believe so), I translated it to SCSS for the very first time around early 2012. Well, someone published just few weeks after me and I believed a lot of my codes were copied (as I could see my own errors/bugs replicated in his). I got lazy but he keep pushing updates and bug-fixes. Soon, I used his instead for a very long time.

I remember this because I was approached to write a book on Bootstrap and Sass by Packt. I believe that's when I stopped using Bootstrap!

Looked up and found the old post (now deleted/pruned) in the Archives - http://web.archive.org/web/20120207101527/https://brajeshwar...

Bootstrap is really awesome.

People complain that it has a very recognizable style, but they ignore you can use it in SCSS (instead of the compiled CSS) so you can configure it to your leisure and make it look totally different.

When using it in SCSS you can also strip modules you don't need to reduce its size too.

Bootstrap is one of the things that got me into web development in middle school!

My first project was an exam study website. I made a couple of Quizlet sets, embedded the study guide PDFs from teachers (and made my own) into one page. It was a great way to procrastinate on studying and "sort of" study myself.

I don't think I'd have done web development without it!

It’s important to give respect to jqueryui and bootstrap for defining the core ui components for the web all these years.

Curious if people have opinions on Bootstrap vs Material UI for building responsive web apps in 2021.

Nobody mentioned it, so I'm just going to say: "tailwind"

Is another viable frontend design framework to use.

My bootstrap skills probably landed me my first IT job. I stay away from front end work nowadays but I still use it from time to time.

Thanks for all the great work over the years!

Here is to another great century for bootstrap!

but only 8 years of "lol this government website is bootstrap isn't it"

Ten years of making every site look the same and as though they were all made in 2010.

Is flexbox the more popular/preferred responsive framework these days, as IE is a thing of the past?

I wouldn't call flexbox a framework, really. Bootstrap itself uses flexbox nowadays.

Flex is a CSS Layout Module - https://caniuse.com/?search=flex

Reply on news.ycombinator.com