20 ms·

Bootstrap 5 alpha

641 points by mkurz 6y ago

throwaway888abc 6y ago
Just to express Big Thank You to Bootstrap team and contributors for everything over years of hard work. Productivity, stability, consistency and joy to work with! Thank you
- mdo 6y ago
  Thank you! <3
- VWWHFSfQ 6y ago
  Accessibility can't be stressed enough. I have worked with many big companies that want a small project/initiative for their users. They always want these things, at minimum: * Data security/compliance (GDPR, CCPA) * Accessibility (WCAG 2.1) As much as my team would love to just make every app in React or whatever. I always just say: No. They want a CMS. Just make it with Django and Bootstrap. Then we'll be done with it in a couple weeks and you can all go back to your own stuff.. Django + Bootstrap gets us an incredible amount of accessibility just right now of the box. Invaluable for small development shops!
  - raihansaputra 6y ago
    Do you use the Django apps for Bootstrap or include it on your own? How do you do the Django form <-> Bootstrap integration?
    - PascLeRasc 6y ago
      I'm not who you asked, but I've done it previously just calling the Bootstrap CDN within Django, and it was super simple. This was years ago, but I have this tutorial bookmarked from back then: https://tutorial.djangogirls.org/en/css/ https://tutorial.djangogirls.org/en/css/
      - raihansaputra 6y ago
        Yep, manually calling the CDN is the simplest way, but I remembered that sometimes a lot of adjustments needed to be made to the forms and every form would need to be manually coded, or use one of the Django app to automate that.
        deleted 6y ago
        [deleted]
  - darekkay 6y ago
    Just keep in mind that Bootstrap ist not fully accessible by default on purpose [1]. I really hope this changes in v5, because accessibility shouldn't be opt-in. [1] https://getbootstrap.com/docs/4.1/getting-started/accessibility/ https://getbootstrap.com/docs/4.1/getting-started/accessibil...
  - rs999gti 6y ago
    > Django + Bootstrap Does the language of the CMS matter? Django is Python, but we are a .NET shop. Would Django still work for us or should we look into a CMS like Orchard or Umbraco?
dang 6y ago
Please don't edit HN titles to break the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. This has been first on the list of the submission rules for over a decade: Please don't do things to make titles stand out, like using uppercase or exclamation points, or saying how great an article is. It's implicit in submitting something that you think it's important. (Submitted title was "Bootstrap 5 alpha!", which HN's software correctly changed to "Bootstrap 5 Alpha", which was then edited back to "Bootstrap 5 alpha!", which we then edited back to "Bootstrap 5 alpha".) Also, please don't post the same story within minutes (https://news.ycombinator.com/item?id=23543329 https://news.ycombinator.com/item?id=23543329).
- mkurz 6y ago
  Sorry, won't happen again.
  - noir_lord 6y ago
    Missed an opportunity for "Sorry, won't happen again!" there I think.
    - buzzerbetrayed 6y ago
      They did, but HN software correctly removed the unnecessary exclamation point.
      - noir_lord 6y ago
        It did in my comment as well but I edited it back.
- mootzville 6y ago
  Well, in their defense, it was a single exclamation point not exclamation points, so if we're getting technical you should wrap your guidelines text to read "exclamation point(s)"
fasicle 6y ago
"we’re now able to drop jQuery as a dependency", interesting
- hnarayanan 6y ago
  ... by replacing large parts with a native jquery-like implementation.
  - dgb23 6y ago
    Which results in much less js code shipped and better perf. Browsers have caught up to (almost) everything jquery does. Thanks jquery, you served us very well!
    - andybak 6y ago
      > Browsers have caught up to (almost) everything jquery does. For me jQuery is mainly about an elegant, chainable API and all the DOM tools I'm likely to need on hand. I understand there's a bit of bloat but there's also lighter jQuery-alikes. I tried vanilla js recently and the native DOM APIs are fairly ugly in comparison with none of the quality of life stuff I got used to. What am I missing?
      - inopinatus 6y ago
        The point is that one framework should not depend on another. If you like jquery, no-one is stopping you using it.
        andybak 6y ago
        I wasn't specifically talking about Bootstrap. Parent post seemed to be making a general point about jQuery. > The point is that one framework should not depend on another. It's not hard to think of counterexamples unless you have very particular definitions of "depend" and "framework.
sbuccini 6y ago
I've recently been working on a greenfield project with Bootstrap and I've been really pleased with the development velocity by the core team. They're beginning to implement a icon library too, which will complement nicely with the built-in components they already have. They're quite responsive to issues as well, giving me confidence I need to build on top of this framework for the long haul.
garysahota93 6y ago
What are some of the coolest bootstrap projects you all have seen? I haven't used Bootstrap in years, but would love to see some of the creativity.
- bredren 6y ago
  I have only used bootstrap recently through implementations of commercial web template packages. These are pretty amazing, see Color Admin and Inspinia.
cabaalis 6y ago
> we’ve dropped support for Internet Explorer. This is probably more of a mental thing for me than anything, but it's hard to separate myself as an old-school developer from the idea of supporting IE because of it's historical market share. As much of a PITA it was for so long. I suppose, though, I'm happy to see it go.
- mhd 6y ago
  On the other hand, something like Bootstrap is pretty awesome if you want to create a slightly better, standardized look for your corporate intranet web app or site. Environments where IE11 is still somewhat common and where the relatively large share of Mobile Safari hardly matters. Just recently someone mentioned to me that some SAP stuff can't be used without IE11. And as long as you get these hold-outs and enterprise IT guys avoid auditing multiple browsers, you'll get IE11 as the sole available browser in cubicles.
  - abiogenesis 6y ago
    Bootstrap 4 is not going to be EOL anytime soon according to mdo, so you are good for a few more years.
- antris 6y ago
  A huge part of the knowledge I had to acquire in the early years of my development career is now useless or even harmful... Anyone remember clear: left; ? :D
  - rudasn 6y ago
    Haha. Nothing like `zoom:1`.
    - democracy 6y ago
      What about fixed size white gifs in the tabel cells??? :)))
- bromuro 6y ago
Meekro 6y ago
I'd love to see a built-in dark mode! I develop a SaaS-type control panel and many of my users spend hours a day interacting with it. Requests for a dark mode have been increasing over the last year, but restyling every built-in Bootstrap component feels clumsy.
- Jugurtha 6y ago
  Can your users install extensions? Dark Reader[1] works well enough that I don't care if websites offer dark mode, they are dark for me. [1]: https://darkreader.org/ https://darkreader.org/
- sebazzz 6y ago
  Do you use CSS or a preprocessor like SCSS? In the later it is mostly a matter of changing a few variables.
  - Meekro 6y ago
    You can create a dark mode by changing a few variables, and all of the Bootstrap components will still look right? Can you show me how?
    - ceejayoz 6y ago
      Yes. https://bootswatch.com/darkly/ https://bootswatch.com/darkly/ It's just a matter of setting some Sass variables. https://getbootstrap.com/docs/4.1/getting-started/theming/ https://getbootstrap.com/docs/4.1/getting-started/theming/
    - deleted 6y ago
      [deleted]
- zyang 6y ago
  CSS custom properties would be a step in that direction. Although native dark mode support would be nice.
- purerandomness 6y ago
laurentdc 6y ago
Just out of curiosity, do you write HTML5/CSS inside a text editor with live reload or have you switched to builders like Bootstrap Studio, Webflow, Pingendo etc.? Asking since I'm converting a design into a template for a Symfony app and when coding with Bootstrap from scratch I'm a bit lost. Even doing basic things like sticky left sidebar and overlapping top navbar (basic admin panel layout) requires lots of StackOverflow digging. Should I give up and just buy templates?
- dgb23 6y ago
  Sass (scss) & overriding default variables/lists/maps & some custom class/mixin generation (via nested each & includes). I personally like to default to utility classes (builtin + custom) and only build components when they get apparent during development. This is for bespoke designs. YMMV
- purerandomness 6y ago
  I simply have the documentation open, which is really excellent and doesn't require any other sources. I begin with copying one basic example and building from there. Then I'll tweak the HTML+CSS live in the browser's DevTools until I feel I understand what's happening in the CSS, I switch back to IntelliJ and bake my tweaks into my own custom SCSS extending bootstrap's classes and building on them. Never bought templates as I have the feeling that template authors don't really have the time to really grasp the concepts of bootstrap, nor do they care, and simply tend to pile tons of rules until they have some effect they desire. I felt it's always easier to simply read the docs, and occasionally jump into IRC in ##bootstrap or #css or their Slack when I'm stuck.
- williamdclt 6y ago
  > inside a text editor with live reload this one > Even doing basic things [...] requires lots of StackOverflow digging It's mostly a matter of getting used to it. If you do it by hand, you tend to better understand the building blocks and it gets easier to compose them into whatever you want. Same as any language or framework, really > Should I give up and just buy templates? Give up, no. Buy templates, why not. They're usually fairly cheap and if it saves you hours of coding, that's fair enough (I'm food with frontend and I buy templates sometimes). But if it's a skill you need, it's probably a better investment to hone it than to work around it
traceroute66 6y ago
Bootstrap. The people who removed sub-menus from Bootstrap 4 because it was deemed "too difficult". Not cool.
- purerandomness 6y ago
  Sub menus are really hard to do right on a mobile device. Mobile is important at least since Bootstrap 3, when Bootstrap became "mobile first" (e.g. you define breakpoints with the smallest screen in mind by default, adding exceptions for wider screens) After all, Bootstrap is, like the name suggests, a "bootstrap" for your own project, and if you think the accesibility problems that come with nested dropdowns are worth it, you're totally free to implement that, and even create a GitHub project with your CSS clases. There's no reason your solution wouldn't be merged if you provide a truly novel approach to all the other failed approaches.
  - Eduard 6y ago
    > Sub menus are really hard to do right on a mobile device No, they are not. Bootstrap is too opinionated here by not supporting nested menus. There are plenty of use cases for them, a navigable sitemap or your common application toolbar for example. And accessibility is also a non-issue, see W3C's / WCAG's recommendations: https://www.w3.org/TR/wai-aria-practices/#menu https://www.w3.org/TR/wai-aria-practices/#menu Speaking of accessibility: I'm surprised that Bootstrap only cares little about this important topic, especially considering implementing it on websites is required by law in many countries.
    - hombre_fatal 6y ago
      I mean, submenus are difficult. Even single-element tooltips are complicated enough to warrant a dedicated library that Bootstrap uses: https://popper.js.org/ https://popper.js.org/ Nested menus are no easier to make generic. Or they can easily be too opinionated for the Bootstrap team's tastes. Also I don't think dropping something from your API makes you more opinionated. Their solution would be opinionated by definition if they had one. Nothing stops you from building your own or anybody from building a library that solves the problem. If you think it's easy, then you sound like the right person to take on the challenge.
Crazyontap 6y ago
As much as I hate AMP pages I have been forced to use it due to SEO reasons and bootstrap 4 sites aren't AMP comptabible as yet. They exceed the 50kb css limit by AMP. There have been various attemps(1) to do it but nothing more be more amazing than to have in-built support for it. Even if the AMP project is misguided mess the 50kb limit on css is still a good goal for mobile sites. (1) https://www.google.com/search?q=bootstrap+amp+github https://www.google.com/search?q=bootstrap+amp+github
- butz 6y ago
  You could use only some parts of Bootstrap, by including its SCSS files and commenting out ones you don't need. Also, you could try css-purge to remove unused classes.
dt3ft 6y ago
You can donate to Bootstrap via https://opencollective.com/bootstrap https://opencollective.com/bootstrap
- benatkin 6y ago
  In case anyone from bootstrap is reading this: The opencollective icon in the top bar on https://icons.getbootstrap.com/ https://icons.getbootstrap.com/ doesn't link to opencollective (it links to /). The same header icon on https://icons.getbootstrap.com/ https://icons.getbootstrap.com/ works fine.
  - esnard 6y ago
    Their website is also open-source, so I just submitted a pull request [0]. Thanks :) [0]: https://github.com/twbs/icons/pull/302 https://github.com/twbs/icons/pull/302
    - csaserdam 6y ago
      used this for my website too https://serabut.com https://serabut.com
- strombofulous 6y ago
  Isn't bootstrap owned by Twitter? I love what they're doing but I don't really know if they need more money
  - mdo 6y ago
    Nope! We're a small distributed team that works on Bootstrap when we can. Jacob and I created it at Twitter, but we took it with us in 2012 when we both left :).
samspenc 6y ago
First off, congrats and thanks to the Bootstrap team for a wonderful and well-made CSS and design / UI framework. I love it and I have to say it makes it so easy for a developer without design experience to build a website or web application that actually looks good :) One question about release dates though: I remember watching the Bootstrap v4 progression from alpha -> beta -> release and I remember it took much longer than I thought it would. Just curious when we can expect the stable release version of v5 to drop?
- overcast 6y ago
  As a result we now have the most homogeneous, boring looking web.
  - dgb23 6y ago
    The alternative would be an uglier web and likely worse UX. People use bootstrap defaults when bespoke designs are not an option or too expensive.
  - gjvc 6y ago
    I wish at least one browser had something like bootstrap as its default style back in 1996.
- mdo 6y ago
  Thanks! <3 Who knows how long this will take with the pandemic (and I work full-time at GitHub, and most of the team has full-time jobs), so all that does slow us down. That said, this should be faster than v4's development, and with fewer and smaller breaking changes by comparison. I wouldn't start getting into the weeds with it in any kind of production environment until the beta though honestly. Release date for stable v5 is hopefully months away.
dgb23 6y ago
The shift towards atomic/utility classes is what keeps this framework alive in my eyes. The productivity boost is quite massive.
cryptozeus 6y ago
Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer.
- vagab0nd 6y ago
  I just recently picked up front end dev and I'm curious how professional teams handle IE these days. Is it completely ignored? Or do sites still try to support it?
  - Domenic_S 6y ago
    Mostly ignored now. Reddit's broken in IE11 (at least the simulated IE11)
  - deleted 6y ago
    [deleted]
  - antris 6y ago
    It is very rare to have to support Internet Explorer anymore for new applications. Most software that requires IE support is legacy enterprise stuff. Microsoft has been promoting Edge for 5 years already over IE.
  - LocalPCGuy 6y ago
    Depends on your customers. Can't just look at the stat counter usage sites and determine based on that. You have to look at who uses your site, and then decide what the financial impact of not supporting IE is going to be. Where I work, we sell into large companies, where IE may be a default browser without the ability to install an alternative. Therefore, we support IE11 (only version of IE still officially supported). Financially, it would be irresponsible not to, as it could kill 6 or 7 figure contracts if the CEO tries to use our software and it doesn't load or just shows them a "upgrade your browser" page. But even then, we do make allowances for IE. It is slower. In fact, some of the speed issues come from adding polyfills for things we deemed necessary for efficient development. It may not have exactly the same layout (for instance, we use an accordion to reduce the number of elements on a screen for IE on one page, but a list of carousels in browsers that are capable of handling the extra complexity). We actually attempted to use CSS Grid, and it mostly worked. We've since stripped most of that out except some of the base page structures - just too many edge cases. And flex actually works fairly well as long as you stay away from some of the well-defined known issues. Anyways, to the main point - has to be a site by site decision based on your site's visitor base, their browsers, and whether it makes the financial sense to spend the time supporting IE compared to the return you may get.
diegoperini 6y ago
Here is a question for people who are more knowledgeable than me. I remember reading somewhere that a library is a bunch of functions you call in your software whereas a framework is a software that calls your functions. I'm obviously paraphrasing but you get the idea. Bootstrap is called a CSS "framework" but as far as I can tell, the user calls the predefined classes if putting them in an html element's attribute can be considered a "call". Or maybe CSS with its selectors is the one calling the HTML by, dunno, crawling it. Can you help me? I'm confused. :)
- elcomet 6y ago
  You're right, but bootstrap forces your html to have a certain structure (everything should go in a container div, in columns or lines, ...) So it is more a framework in that aspect in my opinion. But it had also "components" which are more library-like (buttons, bars, cards, tooltips...). So I'd say it's both.
- bobthepanda 6y ago
  I don't agree with this definition. To me a library is a bunch of functions that you can drop in, whereas a framework is an opinionated implementation of functionality that requires you to adapt to it.
- leddt 6y ago
  That's one definition. Another valid definition of a framework would be something that is a fundamental part of your project, or something you build upon, whereas a library would be something that you use to enhance a particular part of a project. Bootstrap would seem to fit that definition in most cases.
- deleted 6y ago
  [deleted]
- ogre_codes 6y ago
  I don't think there is a really solid standardization on what makes something a library versus a framework. Particularly not with regards to CSS. The two terms certainly don't offer much more than a suggestion of what's inside the shrink wrap.
alpb 6y ago
... CTRL+F, 'compat', no results. Oh crap. I run my blog on Bootstrap 4, and I don't have much skills for frotend/scss stuff. So I use bootstrap 4 out of the box with few customizations. I never understand the backwards compatibility model of Bootstrap. It broke significantly when I moved from some late-stage BS4 alpha to the stable version. I can probably assume it'll significantly break again? Maybe that's the beauty of BS, you just choose a version and stay there until it's impossible anymore?
- deleted 6y ago
  [deleted]
- purerandomness 6y ago
  I had the same issues with major breaks between Bootstrap 4.x alphas and betas, but to be honest, their migration changelog [1] was truly helpful and you could simply search and replace most changes. It's the price of choosing the bleeding edge I guess. [1] https://getbootstrap.com/docs/4.5/migration/ https://getbootstrap.com/docs/4.5/migration/
- williamdclt 6y ago
  Well you can't really expect much about breakages or backward compatibility when you use an alpha, that's kind of the deal. Just wait for the stable release to upgrade? Or don't upgrade at all, it's not the sort of thing that you absolutely need to keep up to date anyway.
- mdo 6y ago
  With how the web has evolved over the years, we've been caught on the side of being too far behind and being too far ahead. We want to move faster and find the right balance. v4 was a bit of a nightmare scenario, and upgrading from v3 was nuts. v4 to v5 _should_ be much simpler by comparison. Still some breaking changes, but nothing like before. And yes! Definitely something that you can theoretically run forever without issue. Browsers basically have to keep supporting the historical properties, quirks, etc, so once you've built it, you're largely good to go :).
  - 6y ago
minimaxir 6y ago
The argument against Bootstrap was the jQuery dependency, but that's now gone. So what is the difference between all these front-end frameworks if they are all dropping down to base HTML + CSS?
- marpstar 6y ago
  from what I've gathered: look, feel, and `class` naming conventions...
- rlayton2 6y ago
  Bootstrap is more than the layout. Its good having good looking buttons by default and cards and toasts and so on with less mucking around. I find if I dont use a framework like this then I invariably end up creating my own with all these features and wishing I had used bootstrap from the start. Its not for everyone but for myself (very small teams or just myself and sometimes one other person), its invaluable for getting things done.
  - minimaxir 6y ago
    That's what most of these frameworks also do. (e.g. Bulma, which specifically bills itself as a no-JS framework: https://bulma.io/ https://bulma.io/ )
    - KerryJones 6y ago
      Bulma is great but hasn't had significant updates in years it seems -- I would love to get some updates (I use it in multiple side projects)
      - paulnechifor 6y ago
        Isn't that a good thing? runs away
      - amanzi 6y ago
        What do you mean by 'significant' update? Version 0.90 was released just recently, and there are continual slow and steady updates that come through. For a CSS framework, that seems quite appropriate.
axegon_ 6y ago
I'm currently working on a personal project and I was planning on using angulardart + tailwind (the css part only) but I will definitely check if the css side of bootstrap 5 might not be a more productive option. Good work regardless and thanks for all the effort.
tobyhinloopen 6y ago
The end of jquery is here
jkaptur 6y ago
In case folks from the team are reading, I think you mean "our logo evokes the feeling of a rule set" (rather than "eschews").
liminal 6y ago
I'm surprised/disappointed they didn't embrace CSS grids. I've found them to be so much better to work with than Bootstrap grids
- jfkebwjsbx 6y ago
  I guess browser support is not good enough. They just dropped IE11, after all. Probably that will be the change for Bootstrap 6.
irrational 6y ago
Now that we have CSS Grid and Flexbox, what is the rationale for using Bootstrap? Or, what is the benefit of using Bootstrap that I don't get using CSS Grid and Flexbox?
- recursive 6y ago
  Decent looking typography and presentation.
- hombre_fatal 6y ago
  Unless you are going to write bespoke grid/flexbox logic every time you want to position anything or having to sync up a bunch of grid-template-area definitions, you may find yourself building a more dynamic generic grid system that abstracts the details away. Well, that's something that Bootstrap's Row/Col system does.
- sevilo 6y ago
  why is this downvoted, I have the same genuine question
  - Ralfp 6y ago
    Bootstrap is so much more than grid. It has plenty of useful components too.
  - irrational 6y ago
    I am surprised I was downvoted too. I’ve never used bootstrap so I thought my question was a simple request for information. Apparently all the bootstrap users took it as a personal attack.
- rtsil 6y ago
  Here's my answer: after several years going bootstrap-free and doing everything by hand, I realized I just ended up writing my own bootstrap equivalent, so now I just use Bootstrap or TailwindCSS. I don't use Bootstrap for the design or the components, I use it for the layout and utilities instead of building my own, and I code the design on top of it.
brandoncordell 6y ago
So happy jQuery is gone! I'm also glad they're moving towards including more utility classes (this started in v4) but I've spent the last year with TailwindCSS and man is it nice. I just bought TailwindUI as well for the component aspect. I think it's going to take some convincing to move back to Bootstrap. I'll definitely give it a shot on a small project though.
- haberman 6y ago
  When I first heard that jQuery is gone, it made me hope that Bootstrap could work directly with Vue without needing to use BootstrapVue. But then I realized that it's probably still doing direct DOM manipulation, which is what makes it incompatible with Vue I think?
  - brandoncordell 6y ago
    It's definitely going to make it a lot easier than it is now. It's really not bad working with external libraries in Vue. I imagine the way that Bootstrap does it's Javascript will leave you doing a lot inside of Vue's lifecycle hooks (beforeMount, mount, etc).
  - tracker1 6y ago
    You're probably better off with BootstrapVue (or one of the React equivalents) because they're doing dom manipulation... The libraries based on bootstrap should just be rendering components with matching classnames etc.
  - Rapzid 6y ago
    Direct DOM manipulations are not necessarily incompatible with Vue or React. I'm not sure in this specific case, but I'm saying this in general because there seems to be a common misconception. People jump through the craziest, smallest, highest, flaming-ist hoops to get everything to render through Vue/React. Using virtual scrollers that aren't fit for purpose. Trying to get d3/plotly running on the VDOM. Etc etc. You can always just pop a DOM ref out and let something else take control of it; easy peasy.
pansa2 6y ago
So this will replace Bootstrap 4, which was released in early 2018 and will reach end-of-life before the end of this year. [0] Could someone explain the target audience for a framework with this rate of churn? Are people really creating websites that are expected to live for less than three years? Or are people working on longer-term products and expecting to do a major rewrite every few years? [0] https://github.com/twbs/release https://github.com/twbs/release
- geerlingguy 6y ago
  I still have a ton of sites on Bootstrap 3 and know of a large number of “rebuild every decade” sites on 3. The nice thing is at least with older versions, they tend to work okay for years with no maintenance. That’s probably changing as the web incorporates more SPA type stuff.
  - nogabebop23 6y ago
    I think you're right. I know lots of products built on 3 that have "migrate to 4" in their backlog but it's an easy one to push out... for years. Part of this churn fatigue is that we depend on community support for a lot of these technologies. Support for something like .net or Java used to be rudiculously long, but as they've switched to OS-friendly development practices the pace of releases has increased and lifetimes diminished. Coupled with building on more and more shaky and temporal abstractions and a web app written today won't compile in 6 months.
- luxurytent 6y ago
  > Are people really creating websites that are expected to live for less than three years? Or are people working on longer-term products and expecting to do a major rewrite every few years? "Yes". I imagine it's a bit of both. Would shops doing client work worry about the long term maintenance about the work they are doing? Using Bootstrap, knowing it will be end of life in 1-2 years is probably in their favour. They get to use a shiny new framework to impress the client and can sign a rewrite/tech debt contract in 4-6 years! My personal experience with Bootstrap is that the upgrade story is fairly reasonable and we also have software on Bootstrap 2 still running just fine. It was the style of the time and the app shows it, but there's been no need to rewrite that portion.
oknoorap 6y ago
I've been using tailwindcss, it's pretty impressive.
- nimchimpsky 6y ago
  I went with bulma. No js at all. I prefer it to bootstrap, haven't tried tailwind
node-bayarea 6y ago
I LOVE BOOTSTRAP!! Keep it up you'all!
_0d6j 6y ago
I think we need to get to the point where regardless of the build script, Bootstrap will make the perfect foundation for a design system. I defecated to ZURB long before this was a deal-breaker, but now I almost prefer to reinvent the wheel. Getting on board is quite a commitment, compared to just wrapping react-select, or something alike.
- tesin 6y ago
  I really hope you meant defected!
  - utku_karatas2 6y ago
    Well frontend devs love marking their territory you know.
- mdo 6y ago
  Reinventing the wheel is awesome! More people, myself included, need to build from scratch and learn ourselves every now and then. Definitely interested in more tooling around helping folks getting started, too. Spent a lot of time on the customizing side for this release.
buss 6y ago
It really can't be said enough: bootstrap is phenomenal and the creators, maintainers, and contributors deserve immense praise. They've collectively saved our industry millions of hours of frustration and helped us achieve good-looking, accessible, and responsive websites.
- mdo 6y ago
  Thank you! <3
- deleted 6y ago
  [deleted]
- darekkay 6y ago
  > accessible I agree with all the points except that one. The last time I've checked [1] it was "above avarage" but definitely not fully accessible. [1] https://darekkay.com/blog/accessible-ui-frameworks/ https://darekkay.com/blog/accessible-ui-frameworks/
julianu 6y ago
When is the right time to upgrade to a new bootstrap version? Anyone had bad experiences upgrading to version 4 too soon?
kaushikt 6y ago
I have been using Bootstrap for 8 years now and I am very thankful for your work. Removing jQuery dependency is a big move, one that is welcome too.
adamzapasnik 6y ago
Funny thing that footer is broken. I like bootstrap, but after playing with tailwindcss I prefer it.
AnonC 6y ago
I guess this is a pertinent question in the context of such announcement posts. What are the current alternatives for Bootstrap that provide: * a good set of defaults with a sensible/easy grid system * a modern look with readable typography and color choices * a good enough set of controls * support accessibility out of the box * are leaner in size * reduce/avoid the use of JavaScript (preferring CSS where possible) * and lastly, very easy to get started with (and have great documentation)?
- mikeburrelljr 6y ago
  Bulma is a great alternative: https://bulma.io/ https://bulma.io/
- fish45 6y ago
  I'm not really sure about accessibility, but I've been having a good time with boba.css. It's on the smaller size and is CSS only, but, at least for me, it has every feature I want.
dmix 6y ago
It's too bad they didn't rewrite the JS in Typescript. That would have been neat. But congrats on improving performance and code quality nonetheless. Looks to be ES6 class driven: https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.js https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.... Going for simple JS might make more sense for simple websites with broad deployment, so I can see the arguments against TS here. Like choosing CSS over SCSS for simple portability. Still, it would be a fun/simple type driven project to browse through, had they chosen it.
- douchescript 6y ago
  Why? Less accessible that way. I would have liked it to be in clojurescript myself but thats even worse!
  - hnarn 6y ago
    Can you elaborate on why TS would be "less accessible"? It was my impression (not a js dev) that TS is pretty close to JS in syntax, just with some additional sugar to ensure types and what not -- meaning that someone that knows JS shouldn't have a problem understanding what's written, and should need only a small amount of effort to contribute.
    - douchescript 6y ago
      It’s javascript in the end so why complicate it more? Less people know typescript, making source less accessible, i.e you first need to understand typescript to understand the code. Also you’ll have several more layers of indirection: compiling, transpiling, bigger toolchain. In the end - why should not the latest javascript be enough? In the old times javascript was apparently not good enough without jquery - but why add another dependency of similar ilk now that jquery is removed? I am averse to complicated javascript franken toolchains because they don’t age well. Better to stay vanilla.
      - hnarn 6y ago
        I don't mean to question your abilities here, especially since I don't write JS myself, but I don't recognize your view of TypeScript. > why should not the latest javascript be enough? The fact that TypeScript exists in the first place and is extremely widely used by large organizations would seem to indicate that the latest javascript is not "enough". > In the old times javascript was apparently not good enough without jquery - but why add another dependency of similar ilk now that jquery is removed? Again, I'm not a JS dev, but it seems very dubious to equalize jQuery with TypeScript. They have completely different objectives and achieve completely different things. > I am averse to complicated javascript franken toolchains because they don’t age well. Better to stay vanilla. I can understand and appreciate the sentiment, but since most people seem to agree that the lack of static typing in JavaScript is something that can introduce bugs and unexpected behavior, and the user base of TS is quite large (made by MS, used by many large organizations[1]), I would agree with what most users of it probably would say, that the trade-off is by far worth it. [1]: https://stackshare.io/typescript https://stackshare.io/typescript
kindly_fo 6y ago
Add dark mode
jangid 6y ago
Some work for theme creators now.
mrath 6y ago
This is good work by the team. For CSS beginners like me it helped to start with a nice looking website. Thanks. I would have loved if they kept the CSS classes same between different versions. I feel there are always some unnecessary renaming of classes with major version changes. I have close to zero knowledge on CSS, I might be missing the point. Two years feels a bit too quick for the release, I wish they slowdown and not release another major before 5 years.
- hnarn 6y ago
  > I would have loved if they kept the CSS classes same between different versions. I'm not great with CSS either but I recently had to implement some very basic Bootstrap functionality in an environment that required Bootstrap 2 (sorry everyone), and FWIW I thought it actually helped that class names were different because it made it very obvious that I was working with a completely different release than most guides were written for, so I expected breaking changes, and any searches I did do for the "old" names gave me correct results. So in that sense, different class names as a type of "version locking" does make sense I guess -- and it perhaps also stops people from lazily just installing a breaking version of Bootstrap and expect it to work.
AbuAssar 6y ago
for me the best thing about v5.0 is the official RTL support!
coding_lobster 6y ago
> CSS’s grid layout is increasingly ready for prime time, and while we haven’t made use of it here yet, we’re continuing to experiment and learn from it. Look to future releases of v5 to embrace it in more ways. I was actually expecting that the next major Bootstrap version would come out way later and fully embrace the CSS grid. But I suppose they are choosing a more gradual adoption and testing of waters to stay compatible with B4 websites.
- toastal 6y ago
  There's some grid bugs out there, but dropping Internet Explorer is probably more 'drastic' than CSS grids.
sudoaza 6y ago
145Kb ouch!
ux-app 6y ago
Can anyone explain the code in the Utilities API section? What language is it? I don't recognise it and this line $utilities: () !default; And the rest of it are unfamiliar to me.
- hombre_fatal 6y ago
  It's Sass. Compiles to CSS. It !defaults a $utilities variable to an empty map (if it's not already set to something) and then merges some things into it. If I had to guess, the snippet is showing you how to declaratively control how width and margin will change for a give class as it's resized.
- tylershuster 6y ago
  It's SCSS, a language that compiles to CSS. That whole section has almost nothing to do with CSS, though. That's array syntax for holding a set of utilities to be used later in the code.
mark_l_watson 6y ago
I use a very old version of Bootstrap on almost all of my web sites. As part of my COVID-19 lockdown decision to clean up things, I am going to do a small test with the new alpha, and update. I have also been taking my old eBooks, one at a time, and updating those. It feels good, sort of like spring cleaning, organizing my garage, etc.
blockchainman 6y ago
You guys are the best! Thank you ! You have helped me so much in my career!
felixfbecker 6y ago
I hope with the support for custom properties (aka CSS variables) for everything we can implement dynamic light/dark themes without custom CSS overrides. v4 required this because some colors were manipulated at compile time in Sass and therefor you couldn't set them to a CSS var
andrei_says_ 6y ago
Makes me wonder about the jquery based interactive components like select2/chosen etc.
gjvc 6y ago
I miss the 3D look and feel from 2.x

641 points by mkurz 6y ago

Just to express Big Thank You to Bootstrap team and contributors for everything over years of hard work. Productivity, stability, consistency and joy to work with! Thank you

mdo 6y ago
Thank you! <3
VWWHFSfQ 6y ago
Accessibility can't be stressed enough. I have worked with many big companies that want a small project/initiative for their users. They always want these things, at minimum: * Data security/compliance (GDPR, CCPA) * Accessibility (WCAG 2.1) As much as my team would love to just make every app in React or whatever. I always just say: No. They want a CMS. Just make it with Django and Bootstrap. Then we'll be done with it in a couple weeks and you can all go back to your own stuff.. Django + Bootstrap gets us an incredible amount of accessibility just right now of the box. Invaluable for small development shops!
- raihansaputra 6y ago
  Do you use the Django apps for Bootstrap or include it on your own? How do you do the Django form <-> Bootstrap integration?
  - PascLeRasc 6y ago
    I'm not who you asked, but I've done it previously just calling the Bootstrap CDN within Django, and it was super simple. This was years ago, but I have this tutorial bookmarked from back then: https://tutorial.djangogirls.org/en/css/ https://tutorial.djangogirls.org/en/css/
    - raihansaputra 6y ago
      Yep, manually calling the CDN is the simplest way, but I remembered that sometimes a lot of adjustments needed to be made to the forms and every form would need to be manually coded, or use one of the Django app to automate that.
      - deleted 6y ago
        [deleted]
- darekkay 6y ago
  Just keep in mind that Bootstrap ist not fully accessible by default on purpose [1]. I really hope this changes in v5, because accessibility shouldn't be opt-in. [1] https://getbootstrap.com/docs/4.1/getting-started/accessibility/ https://getbootstrap.com/docs/4.1/getting-started/accessibil...
- rs999gti 6y ago
  > Django + Bootstrap Does the language of the CMS matter? Django is Python, but we are a .NET shop. Would Django still work for us or should we look into a CMS like Orchard or Umbraco?

dang 6y ago

Please don't edit HN titles to break the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. This has been first on the list of the submission rules for over a decade: Please don't do things to make titles stand out, like using uppercase or exclamation points, or saying how great an article is. It's implicit in submitting something that you think it's important. (Submitted title was "Bootstrap 5 alpha!", which HN's software correctly changed to "Bootstrap 5 Alpha", which was then edited back to "Bootstrap 5 alpha!", which we then edited back to "Bootstrap 5 alpha".) Also, please don't post the same story within minutes (https://news.ycombinator.com/item?id=23543329 https://news.ycombinator.com/item?id=23543329).

mkurz 6y ago
Sorry, won't happen again.
- noir_lord 6y ago
  Missed an opportunity for "Sorry, won't happen again!" there I think.
  - buzzerbetrayed 6y ago
    They did, but HN software correctly removed the unnecessary exclamation point.
    - noir_lord 6y ago
      It did in my comment as well but I edited it back.
mootzville 6y ago
Well, in their defense, it was a single exclamation point not exclamation points, so if we're getting technical you should wrap your guidelines text to read "exclamation point(s)"

fasicle 6y ago

"we’re now able to drop jQuery as a dependency", interesting

hnarayanan 6y ago
... by replacing large parts with a native jquery-like implementation.
- dgb23 6y ago
  Which results in much less js code shipped and better perf. Browsers have caught up to (almost) everything jquery does. Thanks jquery, you served us very well!
  - andybak 6y ago
    > Browsers have caught up to (almost) everything jquery does. For me jQuery is mainly about an elegant, chainable API and all the DOM tools I'm likely to need on hand. I understand there's a bit of bloat but there's also lighter jQuery-alikes. I tried vanilla js recently and the native DOM APIs are fairly ugly in comparison with none of the quality of life stuff I got used to. What am I missing?
    - inopinatus 6y ago
      The point is that one framework should not depend on another. If you like jquery, no-one is stopping you using it.
      - andybak 6y ago
        I wasn't specifically talking about Bootstrap. Parent post seemed to be making a general point about jQuery. > The point is that one framework should not depend on another. It's not hard to think of counterexamples unless you have very particular definitions of "depend" and "framework.

sbuccini 6y ago

I've recently been working on a greenfield project with Bootstrap and I've been really pleased with the development velocity by the core team. They're beginning to implement a icon library too, which will complement nicely with the built-in components they already have. They're quite responsive to issues as well, giving me confidence I need to build on top of this framework for the long haul.

garysahota93 6y ago

What are some of the coolest bootstrap projects you all have seen? I haven't used Bootstrap in years, but would love to see some of the creativity.

bredren 6y ago
I have only used bootstrap recently through implementations of commercial web template packages. These are pretty amazing, see Color Admin and Inspinia.

cabaalis 6y ago

> we’ve dropped support for Internet Explorer. This is probably more of a mental thing for me than anything, but it's hard to separate myself as an old-school developer from the idea of supporting IE because of it's historical market share. As much of a PITA it was for so long. I suppose, though, I'm happy to see it go.

mhd 6y ago
On the other hand, something like Bootstrap is pretty awesome if you want to create a slightly better, standardized look for your corporate intranet web app or site. Environments where IE11 is still somewhat common and where the relatively large share of Mobile Safari hardly matters. Just recently someone mentioned to me that some SAP stuff can't be used without IE11. And as long as you get these hold-outs and enterprise IT guys avoid auditing multiple browsers, you'll get IE11 as the sole available browser in cubicles.
- abiogenesis 6y ago
  Bootstrap 4 is not going to be EOL anytime soon according to mdo, so you are good for a few more years.
antris 6y ago
A huge part of the knowledge I had to acquire in the early years of my development career is now useless or even harmful... Anyone remember clear: left; ? :D
- rudasn 6y ago
  Haha. Nothing like `zoom:1`.
  - democracy 6y ago
    What about fixed size white gifs in the tabel cells??? :)))
bromuro 6y ago

Meekro 6y ago

I'd love to see a built-in dark mode! I develop a SaaS-type control panel and many of my users spend hours a day interacting with it. Requests for a dark mode have been increasing over the last year, but restyling every built-in Bootstrap component feels clumsy.

Jugurtha 6y ago
Can your users install extensions? Dark Reader[1] works well enough that I don't care if websites offer dark mode, they are dark for me. [1]: https://darkreader.org/ https://darkreader.org/
sebazzz 6y ago
Do you use CSS or a preprocessor like SCSS? In the later it is mostly a matter of changing a few variables.
- Meekro 6y ago
  You can create a dark mode by changing a few variables, and all of the Bootstrap components will still look right? Can you show me how?
  - ceejayoz 6y ago
    Yes. https://bootswatch.com/darkly/ https://bootswatch.com/darkly/ It's just a matter of setting some Sass variables. https://getbootstrap.com/docs/4.1/getting-started/theming/ https://getbootstrap.com/docs/4.1/getting-started/theming/
  - deleted 6y ago
    [deleted]
zyang 6y ago
CSS custom properties would be a step in that direction. Although native dark mode support would be nice.
purerandomness 6y ago

laurentdc 6y ago

Just out of curiosity, do you write HTML5/CSS inside a text editor with live reload or have you switched to builders like Bootstrap Studio, Webflow, Pingendo etc.? Asking since I'm converting a design into a template for a Symfony app and when coding with Bootstrap from scratch I'm a bit lost. Even doing basic things like sticky left sidebar and overlapping top navbar (basic admin panel layout) requires lots of StackOverflow digging. Should I give up and just buy templates?

dgb23 6y ago
Sass (scss) & overriding default variables/lists/maps & some custom class/mixin generation (via nested each & includes). I personally like to default to utility classes (builtin + custom) and only build components when they get apparent during development. This is for bespoke designs. YMMV
purerandomness 6y ago
I simply have the documentation open, which is really excellent and doesn't require any other sources. I begin with copying one basic example and building from there. Then I'll tweak the HTML+CSS live in the browser's DevTools until I feel I understand what's happening in the CSS, I switch back to IntelliJ and bake my tweaks into my own custom SCSS extending bootstrap's classes and building on them. Never bought templates as I have the feeling that template authors don't really have the time to really grasp the concepts of bootstrap, nor do they care, and simply tend to pile tons of rules until they have some effect they desire. I felt it's always easier to simply read the docs, and occasionally jump into IRC in ##bootstrap or #css or their Slack when I'm stuck.
williamdclt 6y ago
> inside a text editor with live reload this one > Even doing basic things [...] requires lots of StackOverflow digging It's mostly a matter of getting used to it. If you do it by hand, you tend to better understand the building blocks and it gets easier to compose them into whatever you want. Same as any language or framework, really > Should I give up and just buy templates? Give up, no. Buy templates, why not. They're usually fairly cheap and if it saves you hours of coding, that's fair enough (I'm food with frontend and I buy templates sometimes). But if it's a skill you need, it's probably a better investment to hone it than to work around it

traceroute66 6y ago

Bootstrap. The people who removed sub-menus from Bootstrap 4 because it was deemed "too difficult". Not cool.

purerandomness 6y ago
Sub menus are really hard to do right on a mobile device. Mobile is important at least since Bootstrap 3, when Bootstrap became "mobile first" (e.g. you define breakpoints with the smallest screen in mind by default, adding exceptions for wider screens) After all, Bootstrap is, like the name suggests, a "bootstrap" for your own project, and if you think the accesibility problems that come with nested dropdowns are worth it, you're totally free to implement that, and even create a GitHub project with your CSS clases. There's no reason your solution wouldn't be merged if you provide a truly novel approach to all the other failed approaches.
- Eduard 6y ago
  > Sub menus are really hard to do right on a mobile device No, they are not. Bootstrap is too opinionated here by not supporting nested menus. There are plenty of use cases for them, a navigable sitemap or your common application toolbar for example. And accessibility is also a non-issue, see W3C's / WCAG's recommendations: https://www.w3.org/TR/wai-aria-practices/#menu https://www.w3.org/TR/wai-aria-practices/#menu Speaking of accessibility: I'm surprised that Bootstrap only cares little about this important topic, especially considering implementing it on websites is required by law in many countries.
  - hombre_fatal 6y ago
    I mean, submenus are difficult. Even single-element tooltips are complicated enough to warrant a dedicated library that Bootstrap uses: https://popper.js.org/ https://popper.js.org/ Nested menus are no easier to make generic. Or they can easily be too opinionated for the Bootstrap team's tastes. Also I don't think dropping something from your API makes you more opinionated. Their solution would be opinionated by definition if they had one. Nothing stops you from building your own or anybody from building a library that solves the problem. If you think it's easy, then you sound like the right person to take on the challenge.

Crazyontap 6y ago

As much as I hate AMP pages I have been forced to use it due to SEO reasons and bootstrap 4 sites aren't AMP comptabible as yet. They exceed the 50kb css limit by AMP. There have been various attemps(1) to do it but nothing more be more amazing than to have in-built support for it. Even if the AMP project is misguided mess the 50kb limit on css is still a good goal for mobile sites. (1) https://www.google.com/search?q=bootstrap+amp+github https://www.google.com/search?q=bootstrap+amp+github

butz 6y ago
You could use only some parts of Bootstrap, by including its SCSS files and commenting out ones you don't need. Also, you could try css-purge to remove unused classes.

dt3ft 6y ago

You can donate to Bootstrap via https://opencollective.com/bootstrap https://opencollective.com/bootstrap

benatkin 6y ago
In case anyone from bootstrap is reading this: The opencollective icon in the top bar on https://icons.getbootstrap.com/ https://icons.getbootstrap.com/ doesn't link to opencollective (it links to /). The same header icon on https://icons.getbootstrap.com/ https://icons.getbootstrap.com/ works fine.
- esnard 6y ago
  Their website is also open-source, so I just submitted a pull request [0]. Thanks :) [0]: https://github.com/twbs/icons/pull/302 https://github.com/twbs/icons/pull/302
  - csaserdam 6y ago
    used this for my website too https://serabut.com https://serabut.com
strombofulous 6y ago
Isn't bootstrap owned by Twitter? I love what they're doing but I don't really know if they need more money
- mdo 6y ago
  Nope! We're a small distributed team that works on Bootstrap when we can. Jacob and I created it at Twitter, but we took it with us in 2012 when we both left :).

samspenc 6y ago

First off, congrats and thanks to the Bootstrap team for a wonderful and well-made CSS and design / UI framework. I love it and I have to say it makes it so easy for a developer without design experience to build a website or web application that actually looks good :) One question about release dates though: I remember watching the Bootstrap v4 progression from alpha -> beta -> release and I remember it took much longer than I thought it would. Just curious when we can expect the stable release version of v5 to drop?

overcast 6y ago
As a result we now have the most homogeneous, boring looking web.
- dgb23 6y ago
  The alternative would be an uglier web and likely worse UX. People use bootstrap defaults when bespoke designs are not an option or too expensive.
- gjvc 6y ago
  I wish at least one browser had something like bootstrap as its default style back in 1996.
mdo 6y ago
Thanks! <3 Who knows how long this will take with the pandemic (and I work full-time at GitHub, and most of the team has full-time jobs), so all that does slow us down. That said, this should be faster than v4's development, and with fewer and smaller breaking changes by comparison. I wouldn't start getting into the weeds with it in any kind of production environment until the beta though honestly. Release date for stable v5 is hopefully months away.

dgb23 6y ago

The shift towards atomic/utility classes is what keeps this framework alive in my eyes. The productivity boost is quite massive.

cryptozeus 6y ago

Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer.

vagab0nd 6y ago
I just recently picked up front end dev and I'm curious how professional teams handle IE these days. Is it completely ignored? Or do sites still try to support it?
- Domenic_S 6y ago
  Mostly ignored now. Reddit's broken in IE11 (at least the simulated IE11)
- deleted 6y ago
  [deleted]
- antris 6y ago
  It is very rare to have to support Internet Explorer anymore for new applications. Most software that requires IE support is legacy enterprise stuff. Microsoft has been promoting Edge for 5 years already over IE.
- LocalPCGuy 6y ago
  Depends on your customers. Can't just look at the stat counter usage sites and determine based on that. You have to look at who uses your site, and then decide what the financial impact of not supporting IE is going to be. Where I work, we sell into large companies, where IE may be a default browser without the ability to install an alternative. Therefore, we support IE11 (only version of IE still officially supported). Financially, it would be irresponsible not to, as it could kill 6 or 7 figure contracts if the CEO tries to use our software and it doesn't load or just shows them a "upgrade your browser" page. But even then, we do make allowances for IE. It is slower. In fact, some of the speed issues come from adding polyfills for things we deemed necessary for efficient development. It may not have exactly the same layout (for instance, we use an accordion to reduce the number of elements on a screen for IE on one page, but a list of carousels in browsers that are capable of handling the extra complexity). We actually attempted to use CSS Grid, and it mostly worked. We've since stripped most of that out except some of the base page structures - just too many edge cases. And flex actually works fairly well as long as you stay away from some of the well-defined known issues. Anyways, to the main point - has to be a site by site decision based on your site's visitor base, their browsers, and whether it makes the financial sense to spend the time supporting IE compared to the return you may get.

diegoperini 6y ago

Here is a question for people who are more knowledgeable than me. I remember reading somewhere that a library is a bunch of functions you call in your software whereas a framework is a software that calls your functions. I'm obviously paraphrasing but you get the idea. Bootstrap is called a CSS "framework" but as far as I can tell, the user calls the predefined classes if putting them in an html element's attribute can be considered a "call". Or maybe CSS with its selectors is the one calling the HTML by, dunno, crawling it. Can you help me? I'm confused. :)

elcomet 6y ago
You're right, but bootstrap forces your html to have a certain structure (everything should go in a container div, in columns or lines, ...) So it is more a framework in that aspect in my opinion. But it had also "components" which are more library-like (buttons, bars, cards, tooltips...). So I'd say it's both.
bobthepanda 6y ago
I don't agree with this definition. To me a library is a bunch of functions that you can drop in, whereas a framework is an opinionated implementation of functionality that requires you to adapt to it.
leddt 6y ago
That's one definition. Another valid definition of a framework would be something that is a fundamental part of your project, or something you build upon, whereas a library would be something that you use to enhance a particular part of a project. Bootstrap would seem to fit that definition in most cases.
deleted 6y ago
[deleted]
ogre_codes 6y ago
I don't think there is a really solid standardization on what makes something a library versus a framework. Particularly not with regards to CSS. The two terms certainly don't offer much more than a suggestion of what's inside the shrink wrap.

alpb 6y ago

... CTRL+F, 'compat', no results. Oh crap. I run my blog on Bootstrap 4, and I don't have much skills for frotend/scss stuff. So I use bootstrap 4 out of the box with few customizations. I never understand the backwards compatibility model of Bootstrap. It broke significantly when I moved from some late-stage BS4 alpha to the stable version. I can probably assume it'll significantly break again? Maybe that's the beauty of BS, you just choose a version and stay there until it's impossible anymore?

deleted 6y ago
[deleted]
purerandomness 6y ago
I had the same issues with major breaks between Bootstrap 4.x alphas and betas, but to be honest, their migration changelog [1] was truly helpful and you could simply search and replace most changes. It's the price of choosing the bleeding edge I guess. [1] https://getbootstrap.com/docs/4.5/migration/ https://getbootstrap.com/docs/4.5/migration/
williamdclt 6y ago
Well you can't really expect much about breakages or backward compatibility when you use an alpha, that's kind of the deal. Just wait for the stable release to upgrade? Or don't upgrade at all, it's not the sort of thing that you absolutely need to keep up to date anyway.
mdo 6y ago
With how the web has evolved over the years, we've been caught on the side of being too far behind and being too far ahead. We want to move faster and find the right balance. v4 was a bit of a nightmare scenario, and upgrading from v3 was nuts. v4 to v5 _should_ be much simpler by comparison. Still some breaking changes, but nothing like before. And yes! Definitely something that you can theoretically run forever without issue. Browsers basically have to keep supporting the historical properties, quirks, etc, so once you've built it, you're largely good to go :).
- 6y ago

minimaxir 6y ago

The argument against Bootstrap was the jQuery dependency, but that's now gone. So what is the difference between all these front-end frameworks if they are all dropping down to base HTML + CSS?

marpstar 6y ago
from what I've gathered: look, feel, and `class` naming conventions...
rlayton2 6y ago
Bootstrap is more than the layout. Its good having good looking buttons by default and cards and toasts and so on with less mucking around. I find if I dont use a framework like this then I invariably end up creating my own with all these features and wishing I had used bootstrap from the start. Its not for everyone but for myself (very small teams or just myself and sometimes one other person), its invaluable for getting things done.
- minimaxir 6y ago
  That's what most of these frameworks also do. (e.g. Bulma, which specifically bills itself as a no-JS framework: https://bulma.io/ https://bulma.io/ )
  - KerryJones 6y ago
    Bulma is great but hasn't had significant updates in years it seems -- I would love to get some updates (I use it in multiple side projects)
    - paulnechifor 6y ago
      Isn't that a good thing? runs away
    - amanzi 6y ago
      What do you mean by 'significant' update? Version 0.90 was released just recently, and there are continual slow and steady updates that come through. For a CSS framework, that seems quite appropriate.

axegon_ 6y ago

I'm currently working on a personal project and I was planning on using angulardart + tailwind (the css part only) but I will definitely check if the css side of bootstrap 5 might not be a more productive option. Good work regardless and thanks for all the effort.

tobyhinloopen 6y ago

The end of jquery is here

jkaptur 6y ago

In case folks from the team are reading, I think you mean "our logo evokes the feeling of a rule set" (rather than "eschews").

liminal 6y ago

I'm surprised/disappointed they didn't embrace CSS grids. I've found them to be so much better to work with than Bootstrap grids

jfkebwjsbx 6y ago
I guess browser support is not good enough. They just dropped IE11, after all. Probably that will be the change for Bootstrap 6.

irrational 6y ago

Now that we have CSS Grid and Flexbox, what is the rationale for using Bootstrap? Or, what is the benefit of using Bootstrap that I don't get using CSS Grid and Flexbox?

recursive 6y ago
Decent looking typography and presentation.
hombre_fatal 6y ago
Unless you are going to write bespoke grid/flexbox logic every time you want to position anything or having to sync up a bunch of grid-template-area definitions, you may find yourself building a more dynamic generic grid system that abstracts the details away. Well, that's something that Bootstrap's Row/Col system does.
sevilo 6y ago
why is this downvoted, I have the same genuine question
- Ralfp 6y ago
  Bootstrap is so much more than grid. It has plenty of useful components too.
- irrational 6y ago
  I am surprised I was downvoted too. I’ve never used bootstrap so I thought my question was a simple request for information. Apparently all the bootstrap users took it as a personal attack.
rtsil 6y ago
Here's my answer: after several years going bootstrap-free and doing everything by hand, I realized I just ended up writing my own bootstrap equivalent, so now I just use Bootstrap or TailwindCSS. I don't use Bootstrap for the design or the components, I use it for the layout and utilities instead of building my own, and I code the design on top of it.

brandoncordell 6y ago

So happy jQuery is gone! I'm also glad they're moving towards including more utility classes (this started in v4) but I've spent the last year with TailwindCSS and man is it nice. I just bought TailwindUI as well for the component aspect. I think it's going to take some convincing to move back to Bootstrap. I'll definitely give it a shot on a small project though.

haberman 6y ago
When I first heard that jQuery is gone, it made me hope that Bootstrap could work directly with Vue without needing to use BootstrapVue. But then I realized that it's probably still doing direct DOM manipulation, which is what makes it incompatible with Vue I think?
- brandoncordell 6y ago
  It's definitely going to make it a lot easier than it is now. It's really not bad working with external libraries in Vue. I imagine the way that Bootstrap does it's Javascript will leave you doing a lot inside of Vue's lifecycle hooks (beforeMount, mount, etc).
- tracker1 6y ago
  You're probably better off with BootstrapVue (or one of the React equivalents) because they're doing dom manipulation... The libraries based on bootstrap should just be rendering components with matching classnames etc.
- Rapzid 6y ago
  Direct DOM manipulations are not necessarily incompatible with Vue or React. I'm not sure in this specific case, but I'm saying this in general because there seems to be a common misconception. People jump through the craziest, smallest, highest, flaming-ist hoops to get everything to render through Vue/React. Using virtual scrollers that aren't fit for purpose. Trying to get d3/plotly running on the VDOM. Etc etc. You can always just pop a DOM ref out and let something else take control of it; easy peasy.

pansa2 6y ago

So this will replace Bootstrap 4, which was released in early 2018 and will reach end-of-life before the end of this year. [0] Could someone explain the target audience for a framework with this rate of churn? Are people really creating websites that are expected to live for less than three years? Or are people working on longer-term products and expecting to do a major rewrite every few years? [0] https://github.com/twbs/release https://github.com/twbs/release

geerlingguy 6y ago
I still have a ton of sites on Bootstrap 3 and know of a large number of “rebuild every decade” sites on 3. The nice thing is at least with older versions, they tend to work okay for years with no maintenance. That’s probably changing as the web incorporates more SPA type stuff.
- nogabebop23 6y ago
  I think you're right. I know lots of products built on 3 that have "migrate to 4" in their backlog but it's an easy one to push out... for years. Part of this churn fatigue is that we depend on community support for a lot of these technologies. Support for something like .net or Java used to be rudiculously long, but as they've switched to OS-friendly development practices the pace of releases has increased and lifetimes diminished. Coupled with building on more and more shaky and temporal abstractions and a web app written today won't compile in 6 months.
luxurytent 6y ago
> Are people really creating websites that are expected to live for less than three years? Or are people working on longer-term products and expecting to do a major rewrite every few years? "Yes". I imagine it's a bit of both. Would shops doing client work worry about the long term maintenance about the work they are doing? Using Bootstrap, knowing it will be end of life in 1-2 years is probably in their favour. They get to use a shiny new framework to impress the client and can sign a rewrite/tech debt contract in 4-6 years! My personal experience with Bootstrap is that the upgrade story is fairly reasonable and we also have software on Bootstrap 2 still running just fine. It was the style of the time and the app shows it, but there's been no need to rewrite that portion.

oknoorap 6y ago

I've been using tailwindcss, it's pretty impressive.

nimchimpsky 6y ago
I went with bulma. No js at all. I prefer it to bootstrap, haven't tried tailwind

node-bayarea 6y ago

I LOVE BOOTSTRAP!! Keep it up you'all!

_0d6j 6y ago

I think we need to get to the point where regardless of the build script, Bootstrap will make the perfect foundation for a design system. I defecated to ZURB long before this was a deal-breaker, but now I almost prefer to reinvent the wheel. Getting on board is quite a commitment, compared to just wrapping react-select, or something alike.

tesin 6y ago
I really hope you meant defected!
- utku_karatas2 6y ago
  Well frontend devs love marking their territory you know.
mdo 6y ago
Reinventing the wheel is awesome! More people, myself included, need to build from scratch and learn ourselves every now and then. Definitely interested in more tooling around helping folks getting started, too. Spent a lot of time on the customizing side for this release.

buss 6y ago

It really can't be said enough: bootstrap is phenomenal and the creators, maintainers, and contributors deserve immense praise. They've collectively saved our industry millions of hours of frustration and helped us achieve good-looking, accessible, and responsive websites.

mdo 6y ago
Thank you! <3
deleted 6y ago
[deleted]
darekkay 6y ago
> accessible I agree with all the points except that one. The last time I've checked [1] it was "above avarage" but definitely not fully accessible. [1] https://darekkay.com/blog/accessible-ui-frameworks/ https://darekkay.com/blog/accessible-ui-frameworks/

julianu 6y ago

When is the right time to upgrade to a new bootstrap version? Anyone had bad experiences upgrading to version 4 too soon?

kaushikt 6y ago

I have been using Bootstrap for 8 years now and I am very thankful for your work. Removing jQuery dependency is a big move, one that is welcome too.

adamzapasnik 6y ago

Funny thing that footer is broken. I like bootstrap, but after playing with tailwindcss I prefer it.

AnonC 6y ago

I guess this is a pertinent question in the context of such announcement posts. What are the current alternatives for Bootstrap that provide: * a good set of defaults with a sensible/easy grid system * a modern look with readable typography and color choices * a good enough set of controls * support accessibility out of the box * are leaner in size * reduce/avoid the use of JavaScript (preferring CSS where possible) * and lastly, very easy to get started with (and have great documentation)?

mikeburrelljr 6y ago
Bulma is a great alternative: https://bulma.io/ https://bulma.io/
fish45 6y ago
I'm not really sure about accessibility, but I've been having a good time with boba.css. It's on the smaller size and is CSS only, but, at least for me, it has every feature I want.

dmix 6y ago

It's too bad they didn't rewrite the JS in Typescript. That would have been neat. But congrats on improving performance and code quality nonetheless. Looks to be ES6 class driven: https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.js https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.... Going for simple JS might make more sense for simple websites with broad deployment, so I can see the arguments against TS here. Like choosing CSS over SCSS for simple portability. Still, it would be a fun/simple type driven project to browse through, had they chosen it.

douchescript 6y ago
Why? Less accessible that way. I would have liked it to be in clojurescript myself but thats even worse!
- hnarn 6y ago
  Can you elaborate on why TS would be "less accessible"? It was my impression (not a js dev) that TS is pretty close to JS in syntax, just with some additional sugar to ensure types and what not -- meaning that someone that knows JS shouldn't have a problem understanding what's written, and should need only a small amount of effort to contribute.
  - douchescript 6y ago
    It’s javascript in the end so why complicate it more? Less people know typescript, making source less accessible, i.e you first need to understand typescript to understand the code. Also you’ll have several more layers of indirection: compiling, transpiling, bigger toolchain. In the end - why should not the latest javascript be enough? In the old times javascript was apparently not good enough without jquery - but why add another dependency of similar ilk now that jquery is removed? I am averse to complicated javascript franken toolchains because they don’t age well. Better to stay vanilla.
    - hnarn 6y ago
      I don't mean to question your abilities here, especially since I don't write JS myself, but I don't recognize your view of TypeScript. > why should not the latest javascript be enough? The fact that TypeScript exists in the first place and is extremely widely used by large organizations would seem to indicate that the latest javascript is not "enough". > In the old times javascript was apparently not good enough without jquery - but why add another dependency of similar ilk now that jquery is removed? Again, I'm not a JS dev, but it seems very dubious to equalize jQuery with TypeScript. They have completely different objectives and achieve completely different things. > I am averse to complicated javascript franken toolchains because they don’t age well. Better to stay vanilla. I can understand and appreciate the sentiment, but since most people seem to agree that the lack of static typing in JavaScript is something that can introduce bugs and unexpected behavior, and the user base of TS is quite large (made by MS, used by many large organizations[1]), I would agree with what most users of it probably would say, that the trade-off is by far worth it. [1]: https://stackshare.io/typescript https://stackshare.io/typescript

kindly_fo 6y ago

Add dark mode

jangid 6y ago

Some work for theme creators now.

mrath 6y ago

This is good work by the team. For CSS beginners like me it helped to start with a nice looking website. Thanks. I would have loved if they kept the CSS classes same between different versions. I feel there are always some unnecessary renaming of classes with major version changes. I have close to zero knowledge on CSS, I might be missing the point. Two years feels a bit too quick for the release, I wish they slowdown and not release another major before 5 years.

hnarn 6y ago
> I would have loved if they kept the CSS classes same between different versions. I'm not great with CSS either but I recently had to implement some very basic Bootstrap functionality in an environment that required Bootstrap 2 (sorry everyone), and FWIW I thought it actually helped that class names were different because it made it very obvious that I was working with a completely different release than most guides were written for, so I expected breaking changes, and any searches I did do for the "old" names gave me correct results. So in that sense, different class names as a type of "version locking" does make sense I guess -- and it perhaps also stops people from lazily just installing a breaking version of Bootstrap and expect it to work.

AbuAssar 6y ago

for me the best thing about v5.0 is the official RTL support!

coding_lobster 6y ago

> CSS’s grid layout is increasingly ready for prime time, and while we haven’t made use of it here yet, we’re continuing to experiment and learn from it. Look to future releases of v5 to embrace it in more ways. I was actually expecting that the next major Bootstrap version would come out way later and fully embrace the CSS grid. But I suppose they are choosing a more gradual adoption and testing of waters to stay compatible with B4 websites.

toastal 6y ago
There's some grid bugs out there, but dropping Internet Explorer is probably more 'drastic' than CSS grids.

sudoaza 6y ago

145Kb ouch!

ux-app 6y ago

Can anyone explain the code in the Utilities API section? What language is it? I don't recognise it and this line $utilities: () !default; And the rest of it are unfamiliar to me.

hombre_fatal 6y ago
It's Sass. Compiles to CSS. It !defaults a $utilities variable to an empty map (if it's not already set to something) and then merges some things into it. If I had to guess, the snippet is showing you how to declaratively control how width and margin will change for a give class as it's resized.
tylershuster 6y ago
It's SCSS, a language that compiles to CSS. That whole section has almost nothing to do with CSS, though. That's array syntax for holding a set of utilities to be used later in the code.

mark_l_watson 6y ago

I use a very old version of Bootstrap on almost all of my web sites. As part of my COVID-19 lockdown decision to clean up things, I am going to do a small test with the new alpha, and update. I have also been taking my old eBooks, one at a time, and updating those. It feels good, sort of like spring cleaning, organizing my garage, etc.

blockchainman 6y ago

You guys are the best! Thank you ! You have helped me so much in my career!

felixfbecker 6y ago

I hope with the support for custom properties (aka CSS variables) for everything we can implement dynamic light/dark themes without custom CSS overrides. v4 required this because some colors were manipulated at compile time in Sass and therefor you couldn't set them to a CSS var

andrei_says_ 6y ago

Makes me wonder about the jquery based interactive components like select2/chosen etc.

gjvc 6y ago

I miss the 3D look and feel from 2.x