15 ms·

Bootstrap 4 Beta

306 points by jdorfman 9y ago

_Codemonkeyism 9y ago
Switched from Bootstrap to Semantic some time ago. I like it more, but development seems to be very very slow. Took a look at Foundation, and the new XY Grid is really really nice and much better than the current Semantic grid. https://www.youtube.com/watch?v=Xl5DjEzKn1g https://www.youtube.com/watch?v=Xl5DjEzKn1g I especially love 1. It also works for Y 2. how you specify responsive, "small-4 medium-6 large-2" means on small devices 4 wide, on medium 6 and on large 2 wide. This makes layouting responsive much easier.
- SippinLean 9y ago
  That would be "col-sm-4 col-md-6 col-lg-2" on Bootstrap with similar results.
  - _Codemonkeyism 9y ago
    Didn't know, was that also in bootstrap 2? Perhaps it's time to come back.
rawoke083600 9y ago
Nice :)
aaronbrethorst 9y ago
awesome, congrats to everyone who's worked on this. It's been a long time coming, but I imagine it will be very well worth it.
DigitalSea 9y ago
For anyone wondering, the beta is comprised of 392 Github issues: https://github.com/twbs/bootstrap/milestone/41?closed=1 https://github.com/twbs/bootstrap/milestone/41?closed=1 with some more interesting tidbits in this issue here: https://github.com/twbs/bootstrap/issues/21568 https://github.com/twbs/bootstrap/issues/21568 - good to see Bootstrap finally leave alpha after so many years, the grid system is fantastic. Congratulations to everyone who contributed to Bootstrap to make this happen, solid work.
pan69 9y ago
Love the new revamped form layout and possibilities. Can't wait to start using BS4. Congrats and a massive thanks to anyone who has been working on this fantastic project.
tannhaeuser 9y ago
A big thumbs up and thank you to the Bootstrap team. Building Bootstrap 4 from source (which is what you want to do for your own themes and customizing) requires a somewhat hefty npm install due to babel, autoprefixer/postcss and clean-css, and in particular due to node-sass which is using libsass/node bindings, thus requiring gyp and Python. I'd imagine a leaner setup based on a precompiled sassc binary for SCSS processing could be useful.
- STRiDEX 9y ago
  node-sass uses precompiled binary unless you're on a version of node that hasn't had a published binary or one of the few other reasons.
Kiro 9y ago
Is it safe to start using in production?
- tannhaeuser 9y ago
  It being a beta release, I guess it's for collecting feedback on github from a larger community. That said, I think the Bootstrap team really does a great job of ensuring their stated target devices/browsers are covered (more so than other CSS frameworks I know).
- petetnt 9y ago
  FWIW we have been using Bootstrap 4 in production since early days of rolling out the v4-dev and we have had minimal troubles of upgrading it in various tons of projects.
eCa 9y ago
The blog post: https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/ https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Matheus28 9y ago
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> The css given in their docs has an invalid integrity hash This is the correct hash: sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M Edit: someone has already filled an issue, beating me by 3 minutes: https://github.com/twbs/bootstrap/issues/23284 https://github.com/twbs/bootstrap/issues/23284
- mdo 9y ago
  Fixed! Sorry about that :).
shubhamjain 9y ago
I highly recommend UIKit [1] for anyone looking to pick a front-end framework. It solved tons of design problems that I faced with Bootstrap. Here are a few — 1) Every class name is prefixed with "uk-": a wise decision to avoid conflicts and make it easy recognise the framework classes. 2) Useful generic classes: UIKit has many helper classes to avoid adding another rule—for removing padding, introducing a small margin, rounding the borders, adding a box shadow. 3) Clean theme: The default UIKit theme looks an order of magnitude better than Bootstrap's. 4) Additional helpful components: Loading spinner, Cards, Notifications, Sortable list. Shipping them by default saves a lot of time in searching and integrating them in your application. 5) Default Icons Support: The icons look clean and beautiful and because they are SVG, they don't require a font file. (Although, requiring Javascript can be turning off for some) 6) Much better components: Try creating an input box with an icon in bootstrap; with UIKit it only takes a little markup. Whenever I develop with Bootstrap, I have to spend half the time muting the existing styles and introducing new ones. With UIKit, it never felt like a problem. [1]: https://getuikit.com/docs/ https://getuikit.com/docs/
- zcoyle 9y ago
  What an irresponsibly named package...
  - hak8or 9y ago
    Been staring at it for like 20 seconds and I don't see it. Looks like a normal name to me?
    - ggreer 9y ago
      The name conflicts with https://developer.apple.com/documentation/uikit https://developer.apple.com/documentation/uikit Though IIRC, Apple's UIKit came out a year after the web UIkit.
      - zcoyle 9y ago
        This seems to have been released in 2013 (correct me if I'm wrong), long after Apple's.
inertial 9y ago
I've been using bootstrap 3 for most of my public projects for a few years and bootstrap 4 for some internal projects. I make it a point to try new & popular CSS frameworks every few months and ultimately thank God for bootstrap. It has stood the test of time for all these years. Things that I like about bootstrap are : stability, performance, easy custom builds, community support (almost every problem has been addressed on Stackoverflow), ecosystem (themes, extensions, tools). The design out of the box might look cookie cutter, but if you know basic CSS, it is very easy to customize it with minimal effort. Just lookup examples on codepen/stackoverflow. Some people complain about bloat but this is amazing : https://getbootstrap.com/docs/3.3/customize/ https://getbootstrap.com/docs/3.3/customize/ . I have public facing websites with thousands of visitors per day. The performance rating is better than 90% of the websites. Truly want to thank @mdo @fat @cvrebert and the rest of the team for this amazing project.
- mdo 9y ago
  <3
- puranjay 9y ago
  I'm not a programmer nor have I ever taken any HTML/CSS classes. The last time I learned HTML/CSS was back in 2000 when WebMonkey was still popular. Thanks to Bootstrap, I've managed to build some very professional looking websites, coded entirely from scratch, all with my existing HTML/CSS knowledge. Just a phenomenally useful framework for non-coders like myself.
  - CM30 9y ago
    It's also phenomenally useful for non designers too. I mean okay, is it the most pretty framework? Of course not. But it's got a consistent look and feel to all components, and that look is a mile above anything I could design from scratch. So in the same way you use it to build professional looking websites with limited HTML/CSS knowledge, I use it to build sites with very limited design knowledge and no sense of aesthetics.
    - 9y ago
tannhaeuser 9y ago
It's probably not the right time and place to ask, but have there been considerations for post-Bootstrap 4 yet? I could imagine CSS grid and CSS variables will reduce the need for sass/less in the future. So it might make sense to look into whether the CSS abstractions build into BS 4 will hold up well in the presence of CSS grid/vars, or have their design informed by/aligned with these upcoming features.
- inopinatus 9y ago
  I think getting bootstrap 4 to this stage will have been quite the task already, the maintainers may want to rest awhile on their laurels once it is released! If I was going to offer a contribution myself, it might be to work on removing the jQuery dependency.
  - mdo 9y ago
    Yup, Johann is going to slowly tackle rewriting plugins in vanilla JS. That’s a big task, but we’ll do it in time.
    - merb 9y ago
      it would be cool to have them written in typescript.
- mdo 9y ago
  Probably gonna stick with some Sass stuff for awhile, tackling components and JS behaviors we haven’t done in the past. There’s some major stuff we’re missing even before CSS grid layout (which doesn’t have super great support today).
  - technojunkie 9y ago
    To the contrary, CSS Grid Layout has excellent support. All modern browsers aside from Edge. For Edge, IE11, and IE10, you can use the original Grid spec since it's frozen in time and can replicate most of what Grid can do today, albeit it's more complicated and explicit. Considering Bootstrap does not support the same browsers that CSS Grid does not work in, this argument doesn't stand. http://caniuse.com/#search=grid http://caniuse.com/#search=grid If you look through the stats of every unsupported browser in the list above, almost all of them are %0.x. Adding them all up still gives you single digits. And with Flexbox as a fallback, you're covering virtually all modern browsers. I really hope you consider adding this last feature to Bootstrap 4 as I truly believe it will be worth the effort.
jaequery 9y ago
does bs4 now have an easy way to add spinning icons to a button? in bs3, there was no easy way, you had to basically use javascript to achieve it. <button class="btn btn-default btn-spin">Click Me</button> I been waiting for something like this to be achievable for some time now. Bulma has this perfected and it really is handy.
- throwaway899 9y ago
  You could use Font Awesome with bootstrap, it includes classes for some neat icons and also classes to make them spin; http://fontawesome.io/examples/ http://fontawesome.io/examples/ see "Animated Icons" Implementing that .btn-spin yourself wouldn't be too hard either, couple lines of CSS...
- mdo 9y ago
  Spinners are coming in 4.1: https://github.com/twbs/bootstrap/pull/22960 https://github.com/twbs/bootstrap/pull/22960
  - jaequery 9y ago
    Sweet, thank you. Hopefully it is out sooner rather than later.
mdo 9y ago
It’s past midnight by me and I’m heading to bed, but I’ll pop back here tomorrow to answer questions and follow up with folks. Thanks for the kind words so far, and any and all feedback coming our way :). Huge thanks to the contributors and our team for pushing so hard recently. Feels amazing to have a beta out finally.
- jameskegel 9y ago
  Hey there, thanks for your project. I look forward to the release.
davidgatti 9y ago
Nice redesign! :)
microkernel 9y ago
Frequently prototyping sites and always amazed how much value bootstrap adds. Thank you for all the work done!
matude 9y ago
Personally prefer Foundation but glad to see Bootstrap maturing from the eternal alpha version. :)
ak39 9y ago
Many folks use Bootstrap for its awesome grid system. But now that CSS Grids are finally here and are way way cleaner to use, Bootstrap's days are numbered.
- harrygeez 9y ago
  You're too optimistic. It'll take forever for the browsers to catch up, then the users.
- SippinLean 9y ago
  You know that BS is much, much more than a grid right?
ShirsenduK 9y ago
Have been using Bootstrap 4 on production at https://www.maplenest.com https://www.maplenest.com for almost a year now. It has Flexbox!!! Although our team has added additional classes to get some of the UI done, I am sure, we could have done it using only Bootstrap. We get lazy :P. The primary reason I like Bootstrap is because of the semantics. Columns are col, Tables are table, Cards are etc. Primary is main action, Danger is error etc. etc. As they say in UX, "Don't make me think!"
harel 9y ago
I cannot recommend Semantic UI enough, and in particular the React port of Semantic. Its a very complete, themable and quality piece of toolkit. After using it I could not understand why I've been using bootstrap before. http://semantic-ui.com http://semantic-ui.com http://react.semantic-ui.com http://react.semantic-ui.com
- matt4077 9y ago
  I'd recommend neither. CSS has caught up, and the two large problems that these frameworks solved no longer exists: grids, and differences between browser implementations. Additionally, semantic UI deserves the scorn of a thousand linguists for the most misleading (unsemantic? or even antisemtitic?) product name ever: there is nothing semantic about class="col-xs-12 col-m-3 col-x-1"
  - UK-AL 9y ago
    For a backend developer, I find bootstrap and Semantic UI brilliant. I mean I can write CSS from scratch and make it responsive, but it generally looks awful without having a designer. But using bootstrap I can use a default layout, and the default components and it looks respectable.
  - harel 9y ago
    semantics aside (hehe), you described the grid class of bootstrap, not semantic ui. In semantic its something like "ten wide column" or "four wide column" etc. I rarely use semantic for its grid though. Those are now easy problems to solve. I use it because it gets me a clean and pretty UI I can theme later to adjust the specifics (or get someone who is better at design than me to do it).
- subsection1h 9y ago
  Semantic UI is not very complete because it still seems to lack good support for keyboard navigation. This has been a long-term issue[1]. [1] https://news.ycombinator.com/item?id=12545727 https://news.ycombinator.com/item?id=12545727
- harrygeez 9y ago
cunningfatalist 9y ago
I like how minimal Bootstrap 4 is. I also like the SCSS core itself. It's very well written and I learned a lot from reading it. I worked with Foundation 5 + 6, Semantic UI, Spectre, Bulma and Bootstrap 2 + 3 (and some more lesser known Frameworks) and I must say that the Bootstrap 4 team really nailed it. All the other frameworks are good, but this is just great to work with.
huskyr 9y ago
I heavily used Bootstrap 2/3 in projects before, but the last two years or so i really don't need such a large CSS framework anymore. Especially with all major browser supporting Flexbox grid-like layouts have become so much easier. Nowadays i just use SASS and a really small mixin library (1) and i'm perfectly happy. 1: http://hay.github.io/valenski/ http://hay.github.io/valenski/
- mdo 9y ago
  Hey, that's awesome! Reminds me that Bootstrap started over six years ago from a Less variable and mixin library (http://getpreboot.com http://getpreboot.com).
  - huskyr 9y ago
    Interesting, i didn't know that! I guess my little library will probably will be a large framework six years from now then ;)
lewisl9029 9y ago
A few questions for those who might be using component-oriented CSS-in-JS libraries like styled-components [0] or glamorous [1]: 1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling? 2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components? It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library. Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs. I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with? [0] https://github.com/styled-components/styled-components https://github.com/styled-components/styled-components [1] https://github.com/paypal/glamorous https://github.com/paypal/glamorous
- SirHound 9y ago
  1. No frameworks, but there's an `injectGlobal` escape hatch with styled-components that I use for a CSS reset. We're transitioning from a class-based approach and the two are working together quite neatly. 2. This hasn't been a problem. Most of the global styles are based on tags, and classes are already more specific. The legacy class-based stuff is all hash-based too, so there's been no conflicts. So far I'm enjoying the component-based approach. Render functions look much cleaner and you abstract logic that might have previously looked like classnames(styles.btn, { [styles.active]: isActive }) to ({ isActive }) => `background: red` Which lives in a totally different file. On one hand I don't think I've done enough to reuse styles across components but on the other hand I know I'm never loading styles that aren't used specifically for the current render.
- 9y ago
k__ 9y ago
With Flexbox and Grid I found less and less reasons to use Bootstrap.
- littlecranky67 9y ago
  Same for me. CSS grid really eliminates the use for the Bootstrap v3 grid (can speak about the v4 as I do not know it), and since everyone used Bootstrap with any known themes, adjusting the UI parts manually in SASS was always required to not look like "any of those standard bootstrap apps".
- SippinLean 9y ago
  You'll be happy to learn, as mentioned on the linked page, that BS4 is rewritten from the ground up with Flexbox, then. I personally don't work on any sites small enough to ignore all the browsers without Grid support yet.
  - k__ 9y ago
    at the moment I'm luckily doing React-Native stuff. Feels like doing web/phone-gap stuff but without the need of (old) safari webviews, he he.
jbob2000 9y ago
I love how you have ads in the documentation! So helpful! What's next, ads in the source code?
reificator 9y ago
I think Web Reflection covers my concerns with Bootstrap more elegantly than I can myself. It's 2017, the browser targets are very modern, so why does it need jQuery at all? https://www.webreflection.co.uk/blog/2016/04/22/about-jquery https://www.webreflection.co.uk/blog/2016/04/22/about-jquery
- SippinLean 9y ago
  The browser targets for BS3 were IE8+ and iOS+. BS4 is IE10+ and iOS 7+. IE10 is 5 years old. If by some miracle you were able to find a website visitor that didn't already have jQuery in their cache, loading it from a CDN is pretty light. The article answers your question: >the most plausible answer is that jQuery is very good at plugins integration, and Bootstrap has few of them Their solution? A 50-line JS snippet paired with a polyfill (the the user is less-likely to have cached than jQ). Er, ok, but I'm using a framework so I don't have to write this stuff. Another example: >OK, OK … I got it, you also want the chained $(element).on(type, handler) one And then another snippet. Sure, I could rewrite more verbose, less-tested versions of all the things jQuery gets me OOTB, but why? To save downloading one file from a CDN once?
  - Sir_Cmpwn 9y ago
    Their "solution" is for the holdouts that insist on using a shitty library forever. It's only in your cache because of this stupid argument people like you make. The time for jQuery is long past and it's time to move on.
    - SippinLean 9y ago
      "holdouts" that want to use plugins? Such luddites! It's in your cache because it's useful; at least your concede that it is likely to be in a user's cache, in which case the added page weight is 0. Seeing as my argument was so terrible, I'd think you'd have an easier time forming a substantive reply, vs the struggle we see here. I don't really understand the value added in your personal attacks.
fzaninotto 9y ago
The advent of utility classes signs the doom of Bootstrap. Going down this road leads directly to universal.css (https://github.com/marmelab/universal.css https://github.com/marmelab/universal.css).
tmaly 9y ago
I originally used bootstrap 3 for my food side project. I did have some issues with customizing and sheer size. I eventually moved over to bourbon.io with the help of one of the core contributors.
zspitzer 9y ago
Anyone got a working requirejs example? does it need a special shim I'm getting a "Bootstrap dropdown require Popper.js" error
yuchi 9y ago
That version dropdown in the navbar will change my life: I give lessons for a framework which in the previous version still used v2.3.2, now I’m sure my students will not look at the wrong documentation.
champagnepapi 9y ago
I haven't used bootstrap 4, I've actually kinda moved away from Bootstrap (which I've used in a couple production products) for Semantic-UI.
calgaryeng 9y ago
Bootstrap is great and I used it on a couple projects. Unfortunately I gave up waiting on a V4 release and started using Semantic UI. This has been a long time coming!
- manigandham 9y ago
  +1 to semantic UI, very well designed and more customizable, although their build process is more complicated.
danvoell 9y ago
Can anyone comment on what is new? What to try in 4?
- cwackerfuss 9y ago
  https://blog.templatetoaster.com/bootstrap-4/ https://blog.templatetoaster.com/bootstrap-4/ The thing I'm most excited about is the flexbox grid.
sadlion 9y ago
What does HN think about zurb foundation?
dgut 9y ago
I've been using BS 4 Alpha for a while now, this is great news. A million thanks to mdo and the rest of the team.
knodi 9y ago
$99 for such simple themes is overpriced
paradite 9y ago
I am shocked to see that font awesome isn't even mentioned as a choice for icons considering its popularity: https://getbootstrap.com/docs/4.0/extend/icons/ https://getbootstrap.com/docs/4.0/extend/icons/ Then again I am equally shocked that there are so many competing icon sets that look promising.
- mkempe 9y ago
  Font Awesome is mentioned in the migration notes.
- SippinLean 9y ago
  I don't think they are offering SVG versions of their icons until the next version, and BS4 is moving away from font (non-SVG) icons, thus their exclusion.
batmansmk 9y ago
We love the alternative http://tachyons.io/ http://tachyons.io/ Functional CSS helps us maintaining large scale component-based project fairly easily. You have to know CSS though.
- swlkr 9y ago
  I also love tachyons, it's unfortunate that I didn't "get it" until I had gone through quite a few long !important stylesheets in various web apps, most of them using bootstrap too :(
- SippinLean 9y ago
  I wouldn't really consider it an alternative. It's essentially inline styles. Useful for marketers or authors without coding experience to build pages within a restricted CMS (they can't edit all the code, but they can add classes to components). Most of it is not components, though; most classes are just a single CSS property and value. This easily bloats into a maintenance nightmare: <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10"> ...it's the reason we moved to modular CSS instead of having a style attr on every element. It has its place, but something like Foundation is more appropriately considered an alternative to Bootstrap.
hbcondo714 9y ago
Is the new 'tooltip with HTML' feature SEO-friendly? Wouldn't the HTML markup obscure the text? <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button> https://getbootstrap.com/docs/4.0/components/tooltips/ https://getbootstrap.com/docs/4.0/components/tooltips/
braeckmansj 9y ago
Do you know that you can hack any ATM machine !!! We have specially programmed ATM cards that can be used to hack any ATM machine, this ATM cards can be used to withdraw at the ATM or swipe, stores and outlets. We sell this cards to all our customers and interested buyers worldwide, the cards has a daily withdrawal limit of $5000 in ATM and up to $50,000 spending limit in stores. and also if you in need of any other cyber hacking services, we are here for you at any time any day. Here is our price list for ATM cards: BALANCE PRICE $5,000----------------$300 $10,000 ------------- $650 $20,000 ------------- $1,200 $35,000 --------------$1,900 $50,000 ------------- $2,700 $100,000------------- $5,200 The price include shipping fees,order now: via email...braeckmansj@outlook.com

306 points by jdorfman 9y ago

Switched from Bootstrap to Semantic some time ago. I like it more, but development seems to be very very slow. Took a look at Foundation, and the new XY Grid is really really nice and much better than the current Semantic grid. https://www.youtube.com/watch?v=Xl5DjEzKn1g https://www.youtube.com/watch?v=Xl5DjEzKn1g I especially love 1. It also works for Y 2. how you specify responsive, "small-4 medium-6 large-2" means on small devices 4 wide, on medium 6 and on large 2 wide. This makes layouting responsive much easier.

SippinLean 9y ago
That would be "col-sm-4 col-md-6 col-lg-2" on Bootstrap with similar results.
- _Codemonkeyism 9y ago
  Didn't know, was that also in bootstrap 2? Perhaps it's time to come back.

rawoke083600 9y ago

Nice :)

aaronbrethorst 9y ago

awesome, congrats to everyone who's worked on this. It's been a long time coming, but I imagine it will be very well worth it.

DigitalSea 9y ago

For anyone wondering, the beta is comprised of 392 Github issues: https://github.com/twbs/bootstrap/milestone/41?closed=1 https://github.com/twbs/bootstrap/milestone/41?closed=1 with some more interesting tidbits in this issue here: https://github.com/twbs/bootstrap/issues/21568 https://github.com/twbs/bootstrap/issues/21568 - good to see Bootstrap finally leave alpha after so many years, the grid system is fantastic. Congratulations to everyone who contributed to Bootstrap to make this happen, solid work.

pan69 9y ago

Love the new revamped form layout and possibilities. Can't wait to start using BS4. Congrats and a massive thanks to anyone who has been working on this fantastic project.

tannhaeuser 9y ago

A big thumbs up and thank you to the Bootstrap team. Building Bootstrap 4 from source (which is what you want to do for your own themes and customizing) requires a somewhat hefty npm install due to babel, autoprefixer/postcss and clean-css, and in particular due to node-sass which is using libsass/node bindings, thus requiring gyp and Python. I'd imagine a leaner setup based on a precompiled sassc binary for SCSS processing could be useful.

STRiDEX 9y ago
node-sass uses precompiled binary unless you're on a version of node that hasn't had a published binary or one of the few other reasons.

Kiro 9y ago

Is it safe to start using in production?

tannhaeuser 9y ago
It being a beta release, I guess it's for collecting feedback on github from a larger community. That said, I think the Bootstrap team really does a great job of ensuring their stated target devices/browsers are covered (more so than other CSS frameworks I know).
petetnt 9y ago
FWIW we have been using Bootstrap 4 in production since early days of rolling out the v4-dev and we have had minimal troubles of upgrading it in various tons of projects.

eCa 9y ago

The blog post: https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/ https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/

Matheus28 9y ago

mdo 9y ago
Fixed! Sorry about that :).

shubhamjain 9y ago

I highly recommend UIKit [1] for anyone looking to pick a front-end framework. It solved tons of design problems that I faced with Bootstrap. Here are a few — 1) Every class name is prefixed with "uk-": a wise decision to avoid conflicts and make it easy recognise the framework classes. 2) Useful generic classes: UIKit has many helper classes to avoid adding another rule—for removing padding, introducing a small margin, rounding the borders, adding a box shadow. 3) Clean theme: The default UIKit theme looks an order of magnitude better than Bootstrap's. 4) Additional helpful components: Loading spinner, Cards, Notifications, Sortable list. Shipping them by default saves a lot of time in searching and integrating them in your application. 5) Default Icons Support: The icons look clean and beautiful and because they are SVG, they don't require a font file. (Although, requiring Javascript can be turning off for some) 6) Much better components: Try creating an input box with an icon in bootstrap; with UIKit it only takes a little markup. Whenever I develop with Bootstrap, I have to spend half the time muting the existing styles and introducing new ones. With UIKit, it never felt like a problem. [1]: https://getuikit.com/docs/ https://getuikit.com/docs/

zcoyle 9y ago
What an irresponsibly named package...
- hak8or 9y ago
  Been staring at it for like 20 seconds and I don't see it. Looks like a normal name to me?
  - ggreer 9y ago
    The name conflicts with https://developer.apple.com/documentation/uikit https://developer.apple.com/documentation/uikit Though IIRC, Apple's UIKit came out a year after the web UIkit.
    - zcoyle 9y ago
      This seems to have been released in 2013 (correct me if I'm wrong), long after Apple's.

inertial 9y ago

I've been using bootstrap 3 for most of my public projects for a few years and bootstrap 4 for some internal projects. I make it a point to try new & popular CSS frameworks every few months and ultimately thank God for bootstrap. It has stood the test of time for all these years. Things that I like about bootstrap are : stability, performance, easy custom builds, community support (almost every problem has been addressed on Stackoverflow), ecosystem (themes, extensions, tools). The design out of the box might look cookie cutter, but if you know basic CSS, it is very easy to customize it with minimal effort. Just lookup examples on codepen/stackoverflow. Some people complain about bloat but this is amazing : https://getbootstrap.com/docs/3.3/customize/ https://getbootstrap.com/docs/3.3/customize/ . I have public facing websites with thousands of visitors per day. The performance rating is better than 90% of the websites. Truly want to thank @mdo @fat @cvrebert and the rest of the team for this amazing project.

mdo 9y ago
<3
puranjay 9y ago
I'm not a programmer nor have I ever taken any HTML/CSS classes. The last time I learned HTML/CSS was back in 2000 when WebMonkey was still popular. Thanks to Bootstrap, I've managed to build some very professional looking websites, coded entirely from scratch, all with my existing HTML/CSS knowledge. Just a phenomenally useful framework for non-coders like myself.
- CM30 9y ago
  It's also phenomenally useful for non designers too. I mean okay, is it the most pretty framework? Of course not. But it's got a consistent look and feel to all components, and that look is a mile above anything I could design from scratch. So in the same way you use it to build professional looking websites with limited HTML/CSS knowledge, I use it to build sites with very limited design knowledge and no sense of aesthetics.
  - 9y ago

tannhaeuser 9y ago

It's probably not the right time and place to ask, but have there been considerations for post-Bootstrap 4 yet? I could imagine CSS grid and CSS variables will reduce the need for sass/less in the future. So it might make sense to look into whether the CSS abstractions build into BS 4 will hold up well in the presence of CSS grid/vars, or have their design informed by/aligned with these upcoming features.

inopinatus 9y ago
I think getting bootstrap 4 to this stage will have been quite the task already, the maintainers may want to rest awhile on their laurels once it is released! If I was going to offer a contribution myself, it might be to work on removing the jQuery dependency.
- mdo 9y ago
  Yup, Johann is going to slowly tackle rewriting plugins in vanilla JS. That’s a big task, but we’ll do it in time.
  - merb 9y ago
    it would be cool to have them written in typescript.
mdo 9y ago
Probably gonna stick with some Sass stuff for awhile, tackling components and JS behaviors we haven’t done in the past. There’s some major stuff we’re missing even before CSS grid layout (which doesn’t have super great support today).
- technojunkie 9y ago
  To the contrary, CSS Grid Layout has excellent support. All modern browsers aside from Edge. For Edge, IE11, and IE10, you can use the original Grid spec since it's frozen in time and can replicate most of what Grid can do today, albeit it's more complicated and explicit. Considering Bootstrap does not support the same browsers that CSS Grid does not work in, this argument doesn't stand. http://caniuse.com/#search=grid http://caniuse.com/#search=grid If you look through the stats of every unsupported browser in the list above, almost all of them are %0.x. Adding them all up still gives you single digits. And with Flexbox as a fallback, you're covering virtually all modern browsers. I really hope you consider adding this last feature to Bootstrap 4 as I truly believe it will be worth the effort.

jaequery 9y ago

does bs4 now have an easy way to add spinning icons to a button? in bs3, there was no easy way, you had to basically use javascript to achieve it. <button class="btn btn-default btn-spin">Click Me</button> I been waiting for something like this to be achievable for some time now. Bulma has this perfected and it really is handy.

throwaway899 9y ago
You could use Font Awesome with bootstrap, it includes classes for some neat icons and also classes to make them spin; http://fontawesome.io/examples/ http://fontawesome.io/examples/ see "Animated Icons" Implementing that .btn-spin yourself wouldn't be too hard either, couple lines of CSS...
mdo 9y ago
Spinners are coming in 4.1: https://github.com/twbs/bootstrap/pull/22960 https://github.com/twbs/bootstrap/pull/22960
- jaequery 9y ago
  Sweet, thank you. Hopefully it is out sooner rather than later.

mdo 9y ago

It’s past midnight by me and I’m heading to bed, but I’ll pop back here tomorrow to answer questions and follow up with folks. Thanks for the kind words so far, and any and all feedback coming our way :). Huge thanks to the contributors and our team for pushing so hard recently. Feels amazing to have a beta out finally.

jameskegel 9y ago
Hey there, thanks for your project. I look forward to the release.

davidgatti 9y ago

Nice redesign! :)

microkernel 9y ago

Frequently prototyping sites and always amazed how much value bootstrap adds. Thank you for all the work done!

matude 9y ago

Personally prefer Foundation but glad to see Bootstrap maturing from the eternal alpha version. :)

ak39 9y ago

Many folks use Bootstrap for its awesome grid system. But now that CSS Grids are finally here and are way way cleaner to use, Bootstrap's days are numbered.

harrygeez 9y ago
You're too optimistic. It'll take forever for the browsers to catch up, then the users.
SippinLean 9y ago
You know that BS is much, much more than a grid right?

ShirsenduK 9y ago

Have been using Bootstrap 4 on production at https://www.maplenest.com https://www.maplenest.com for almost a year now. It has Flexbox!!! Although our team has added additional classes to get some of the UI done, I am sure, we could have done it using only Bootstrap. We get lazy :P. The primary reason I like Bootstrap is because of the semantics. Columns are col, Tables are table, Cards are etc. Primary is main action, Danger is error etc. etc. As they say in UX, "Don't make me think!"

harel 9y ago

I cannot recommend Semantic UI enough, and in particular the React port of Semantic. Its a very complete, themable and quality piece of toolkit. After using it I could not understand why I've been using bootstrap before. http://semantic-ui.com http://semantic-ui.com http://react.semantic-ui.com http://react.semantic-ui.com

matt4077 9y ago
I'd recommend neither. CSS has caught up, and the two large problems that these frameworks solved no longer exists: grids, and differences between browser implementations. Additionally, semantic UI deserves the scorn of a thousand linguists for the most misleading (unsemantic? or even antisemtitic?) product name ever: there is nothing semantic about class="col-xs-12 col-m-3 col-x-1"
- UK-AL 9y ago
  For a backend developer, I find bootstrap and Semantic UI brilliant. I mean I can write CSS from scratch and make it responsive, but it generally looks awful without having a designer. But using bootstrap I can use a default layout, and the default components and it looks respectable.
- harel 9y ago
  semantics aside (hehe), you described the grid class of bootstrap, not semantic ui. In semantic its something like "ten wide column" or "four wide column" etc. I rarely use semantic for its grid though. Those are now easy problems to solve. I use it because it gets me a clean and pretty UI I can theme later to adjust the specifics (or get someone who is better at design than me to do it).
subsection1h 9y ago
Semantic UI is not very complete because it still seems to lack good support for keyboard navigation. This has been a long-term issue[1]. [1] https://news.ycombinator.com/item?id=12545727 https://news.ycombinator.com/item?id=12545727
harrygeez 9y ago

cunningfatalist 9y ago

I like how minimal Bootstrap 4 is. I also like the SCSS core itself. It's very well written and I learned a lot from reading it. I worked with Foundation 5 + 6, Semantic UI, Spectre, Bulma and Bootstrap 2 + 3 (and some more lesser known Frameworks) and I must say that the Bootstrap 4 team really nailed it. All the other frameworks are good, but this is just great to work with.

huskyr 9y ago

I heavily used Bootstrap 2/3 in projects before, but the last two years or so i really don't need such a large CSS framework anymore. Especially with all major browser supporting Flexbox grid-like layouts have become so much easier. Nowadays i just use SASS and a really small mixin library (1) and i'm perfectly happy. 1: http://hay.github.io/valenski/ http://hay.github.io/valenski/

mdo 9y ago
Hey, that's awesome! Reminds me that Bootstrap started over six years ago from a Less variable and mixin library (http://getpreboot.com http://getpreboot.com).
- huskyr 9y ago
  Interesting, i didn't know that! I guess my little library will probably will be a large framework six years from now then ;)

lewisl9029 9y ago

A few questions for those who might be using component-oriented CSS-in-JS libraries like styled-components [0] or glamorous [1]: 1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling? 2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components? It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library. Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs. I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with? [0] https://github.com/styled-components/styled-components https://github.com/styled-components/styled-components [1] https://github.com/paypal/glamorous https://github.com/paypal/glamorous

SirHound 9y ago
1. No frameworks, but there's an `injectGlobal` escape hatch with styled-components that I use for a CSS reset. We're transitioning from a class-based approach and the two are working together quite neatly. 2. This hasn't been a problem. Most of the global styles are based on tags, and classes are already more specific. The legacy class-based stuff is all hash-based too, so there's been no conflicts. So far I'm enjoying the component-based approach. Render functions look much cleaner and you abstract logic that might have previously looked like classnames(styles.btn, { [styles.active]: isActive }) to ({ isActive }) => `background: red` Which lives in a totally different file. On one hand I don't think I've done enough to reuse styles across components but on the other hand I know I'm never loading styles that aren't used specifically for the current render.
9y ago

k__ 9y ago

With Flexbox and Grid I found less and less reasons to use Bootstrap.

littlecranky67 9y ago
Same for me. CSS grid really eliminates the use for the Bootstrap v3 grid (can speak about the v4 as I do not know it), and since everyone used Bootstrap with any known themes, adjusting the UI parts manually in SASS was always required to not look like "any of those standard bootstrap apps".
SippinLean 9y ago
You'll be happy to learn, as mentioned on the linked page, that BS4 is rewritten from the ground up with Flexbox, then. I personally don't work on any sites small enough to ignore all the browsers without Grid support yet.
- k__ 9y ago
  at the moment I'm luckily doing React-Native stuff. Feels like doing web/phone-gap stuff but without the need of (old) safari webviews, he he.

jbob2000 9y ago

I love how you have ads in the documentation! So helpful! What's next, ads in the source code?

reificator 9y ago

I think Web Reflection covers my concerns with Bootstrap more elegantly than I can myself. It's 2017, the browser targets are very modern, so why does it need jQuery at all? https://www.webreflection.co.uk/blog/2016/04/22/about-jquery https://www.webreflection.co.uk/blog/2016/04/22/about-jquery

SippinLean 9y ago
The browser targets for BS3 were IE8+ and iOS+. BS4 is IE10+ and iOS 7+. IE10 is 5 years old. If by some miracle you were able to find a website visitor that didn't already have jQuery in their cache, loading it from a CDN is pretty light. The article answers your question: >the most plausible answer is that jQuery is very good at plugins integration, and Bootstrap has few of them Their solution? A 50-line JS snippet paired with a polyfill (the the user is less-likely to have cached than jQ). Er, ok, but I'm using a framework so I don't have to write this stuff. Another example: >OK, OK … I got it, you also want the chained $(element).on(type, handler) one And then another snippet. Sure, I could rewrite more verbose, less-tested versions of all the things jQuery gets me OOTB, but why? To save downloading one file from a CDN once?
- Sir_Cmpwn 9y ago
  Their "solution" is for the holdouts that insist on using a shitty library forever. It's only in your cache because of this stupid argument people like you make. The time for jQuery is long past and it's time to move on.
  - SippinLean 9y ago
    "holdouts" that want to use plugins? Such luddites! It's in your cache because it's useful; at least your concede that it is likely to be in a user's cache, in which case the added page weight is 0. Seeing as my argument was so terrible, I'd think you'd have an easier time forming a substantive reply, vs the struggle we see here. I don't really understand the value added in your personal attacks.

fzaninotto 9y ago

The advent of utility classes signs the doom of Bootstrap. Going down this road leads directly to universal.css (https://github.com/marmelab/universal.css https://github.com/marmelab/universal.css).

tmaly 9y ago

I originally used bootstrap 3 for my food side project. I did have some issues with customizing and sheer size. I eventually moved over to bourbon.io with the help of one of the core contributors.

zspitzer 9y ago

Anyone got a working requirejs example? does it need a special shim I'm getting a "Bootstrap dropdown require Popper.js" error

yuchi 9y ago

That version dropdown in the navbar will change my life: I give lessons for a framework which in the previous version still used v2.3.2, now I’m sure my students will not look at the wrong documentation.

champagnepapi 9y ago

I haven't used bootstrap 4, I've actually kinda moved away from Bootstrap (which I've used in a couple production products) for Semantic-UI.

calgaryeng 9y ago

Bootstrap is great and I used it on a couple projects. Unfortunately I gave up waiting on a V4 release and started using Semantic UI. This has been a long time coming!

manigandham 9y ago
+1 to semantic UI, very well designed and more customizable, although their build process is more complicated.

danvoell 9y ago

Can anyone comment on what is new? What to try in 4?

cwackerfuss 9y ago
https://blog.templatetoaster.com/bootstrap-4/ https://blog.templatetoaster.com/bootstrap-4/ The thing I'm most excited about is the flexbox grid.

sadlion 9y ago

What does HN think about zurb foundation?

dgut 9y ago

I've been using BS 4 Alpha for a while now, this is great news. A million thanks to mdo and the rest of the team.

knodi 9y ago

$99 for such simple themes is overpriced

paradite 9y ago

I am shocked to see that font awesome isn't even mentioned as a choice for icons considering its popularity: https://getbootstrap.com/docs/4.0/extend/icons/ https://getbootstrap.com/docs/4.0/extend/icons/ Then again I am equally shocked that there are so many competing icon sets that look promising.

mkempe 9y ago
Font Awesome is mentioned in the migration notes.
SippinLean 9y ago
I don't think they are offering SVG versions of their icons until the next version, and BS4 is moving away from font (non-SVG) icons, thus their exclusion.

batmansmk 9y ago

We love the alternative http://tachyons.io/ http://tachyons.io/ Functional CSS helps us maintaining large scale component-based project fairly easily. You have to know CSS though.

swlkr 9y ago
I also love tachyons, it's unfortunate that I didn't "get it" until I had gone through quite a few long !important stylesheets in various web apps, most of them using bootstrap too :(
SippinLean 9y ago
I wouldn't really consider it an alternative. It's essentially inline styles. Useful for marketers or authors without coding experience to build pages within a restricted CMS (they can't edit all the code, but they can add classes to components). Most of it is not components, though; most classes are just a single CSS property and value. This easily bloats into a maintenance nightmare: <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10"> ...it's the reason we moved to modular CSS instead of having a style attr on every element. It has its place, but something like Foundation is more appropriately considered an alternative to Bootstrap.

hbcondo714 9y ago

Is the new 'tooltip with HTML' feature SEO-friendly? Wouldn't the HTML markup obscure the text? <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button> https://getbootstrap.com/docs/4.0/components/tooltips/ https://getbootstrap.com/docs/4.0/components/tooltips/

braeckmansj 9y ago

Do you know that you can hack any ATM machine !!! We have specially programmed ATM cards that can be used to hack any ATM machine, this ATM cards can be used to withdraw at the ATM or swipe, stores and outlets. We sell this cards to all our customers and interested buyers worldwide, the cards has a daily withdrawal limit of $5000 in ATM and up to $50,000 spending limit in stores. and also if you in need of any other cyber hacking services, we are here for you at any time any day. Here is our price list for ATM cards: BALANCE PRICE $5,000----------------$300 $10,000 ------------- $650 $20,000 ------------- $1,200 $35,000 --------------$1,900 $50,000 ------------- $2,700 $100,000------------- $5,200 The price include shipping fees,order now: via email...braeckmansj@outlook.com