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!
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.
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 organize 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 into the app folder, but making sub-folders are definitely a good idea. I recommend looking at the official Angular style-guide for help on how to structure applications.
What is the unit of width? Is it the number of pixels?
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 to 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 backward 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 of migrating 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 Bootstrap 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 integrated as a 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 resize 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 on 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 in order to get a deeper understanding of how this can be implemented.