This week on our "Kendo UI DevChat" series on web development, we built dashboards with Angular and Bootstrap 4. If you missed it, check out the replay as we answer questions we couldn't get to live.
The fun never ends with the Kendo UI DevChat webinar series! This time we covered how to build responsive dashboards with Angular and Bootstrap 4. The session was jam-packed with content and we had a very active group of attendees! As promised during the webinar I wanted to follow-up with the recording, sample project, some helpful links, and of course an extended Q&A section!
Webinar Recording
If you were unable to join in or if you want to watch the webinar for a second, third, fourth, maybe or even fifth time () then you can find the recording on our YouTube channel.
You can also find the completed GitHub project right here.
Additional Resources
As mentioned I wanted to add in a few resources for everyone to read to understand more about the changes in Bootstrap for v4. Here's a quick list that should help you get up to speed pretty quickly.
- What's New and What's Changed in Bootstrap 4
- What's New in Boostrap 4
- Bootstrap 4: What's New (A Visual Guide)
- Bootstrap official site
Questions and Answers
Throughout the webinar we had quite a few questions come through about Bootstrap, Angular, and Kendo UI! So, I tried to organize the questions below to have them be grouped together a bit logically.
Isn't Bootstrap v4 still in alpha? How safe is it to use it in production-type projects?
Actually, as of the day after this webinar the beta of Bootstrap v4 was released! So, the team keeps on trucking with releasing new versions. Yes, Bootstrap v4 was in alpha 6 during the webinar, but with the recent switch to beta we are getting closer and closer to the actual release. According to this issue on Bootstrap's GitHub repo the team has stopped work on Bootstrap v3 in order to get Bootstrap v4 out there and this beta release continues the march towards the initial release.
Would it make sense to organise widgets/components in a subfolder of the "app" folder, or is there a preferred folder structure you've worked with?
For the sake of brevity during the webinar I was just adding in components and widgets in to the app folder, but making sub-folders are definitely a good idea. I recommend looking at the official Angular styleguide for help on how to structure applications.
What is the unit of width? Is it number of pixel?
The main CSS unit has switched from px (used in v3 and lower) to rem. So, whenever we talk about a unit of measurement we are referring to rem. If you're interested in what rem is versus em, something you may be more familiar with, then I recommend reading this blog post. Also, for more information on what is new you can refer to the Bootstrap v4 migration guide.
What is "my-3" that you add on your classes?
So, with Bootstrap the team has set up some spacing utilities that one can use on any Bootstrap element (and it should work with other elements as well). This documentation section goes into more detail, but what "my-3" specifically does is apply a margin (hence the "m") on the y-axis (adding in "y") and we're using "3" here which is tied to the $spacer variable (not "3 units" as I mentioned in the webinar - my bad!).
Is Bootstrap v4 backward compatible?
While there are many familiar aspects of Bootstrap v4 compared to other versions, due to this being a major rewrite of the project I wouldn't call it a safe backwards compatibility. There are things like browser support (IE10+ and iOS 7+ for Bootstrap v4) and other items that add to this as well, not just new conventions. So, for now I would treat this as something that needs migration and rework in your projects. Luckily this Migrating to v4 document is helpful and continues to be updated to help with this process.
Is there a built in support for breadcrumb nav?
Yes indeed! This Bootstrap component called "Breadcrumb" should help with this requirement. You may need some more advanced routing set up in Angular, but the same idea of using routerLinks and routerLinkActive should work with this component as well.
What is the main advantage to migrate from Bootstrap 3.x.x to Bootstrap v4?
I discussed this a bit during the webinar as well, but overall I think the main advantage of upgrading to Bootstrap v4 is to keep up with the latest and greatest. Under the hood you have things like dropping support for older browsers (read: getting rid of superfluous code) and using newer CSS features (generally performance and productivity enhancers), but also streamlining features like the new Card (replacing many components from Boostrap v3). You also get to start using Sass rather than Less, which is where the CSS community is trending.
Could you show the Kendo UI Charts integraded as widget?
You're in luck! The GitHub project actually has a chart added, I just didn't have time during the webinar. Download it and try it out!
Is media attribute for the Grid available with the Kendo UI Default theme?
Yes indeed it is! However, when you're not working with the Bootstrap theme (which I was using in the webinar) you have to work with the matchMedia browser API like we do in this sample. The benefit of working with our Bootstrap theme is that you can use the breakpoint conventions from Bootstrap. The good news is that if you don't want to stick with the same set of colors as we offer out-of-the-box you can use our Sass Theme Builder to customize the Bootstrap theme colors with ease!
Is Kendo UI using only Bootstrap's CSS rules or does it carry its own?
With the Bootstrap theme we tend to use Bootstrap's CSS rules, but of course one can tweak and customize this from both a Bootstrap and Kendo UI point of view. If you're using the Default theme then you could also work with the matchMedia setting like I mentioned above.
Why do you set height like [height]="410" instead of height="410"?
So, setting the height like height="410" will work just fine as well. However, when you start doing down routes like binding this to an object or anything but a static height like this you'll have to start using [height]="x", so I tend to just stay on the safe side and work with the brackets here.
Is there a "fluid" component that will allow the grid to resize vertically as the windows resizes vertically?
This is a bit trickier than dealing with the width. While I do not have a great sample of this using Angular, we do touch upon the topic and how it can be addressed in this documentation article for the jQuery and AngularJS (1.x.x) version of the Kendo UI Grid. The tl;dr is that it's not as easy as setting a height of the Grid as a percentage due to how the web requires elements to work. I recommend reading the article I just linked to get a deeper understanding of how this can be implemented.