Getting Started with Telerik UI for ASP.NET Core and Bootstrap 4

Telerik UI for ASP.NET Core and the new Bootstrap 4 work very well together—learn about the latest features and what you should consider as you develop your applications.

After years of waiting, Bootstrap 4 is here. Bootstrap is an incredibly popular frontend framework that's used by millions of sites on the web. Bootstrap 4 has many new capabilities and features that integrate nicely with ASP.NET Core and Telerik UI for ASP.NET Core. Currently, ASP.NET developers are evaluating its features and considering an adoption strategy. This blog post provides an overview of Bootstrap 4 and how to incorporate it with Telerik UI for ASP.NET Core.

Why Bootstrap Matters

We've kept a close eye on the development of Bootstrap. We realised (early on) that it provides a great foundation for building responsive web applications. Our team cares a great deal about Bootstrap. In fact, we're fans. We use it internally and for our online demos: Kendo UI (Heart) Bootstrap. Many of us have used it for our own personal projects.

Since its arrival in August 2011 - around the same time we released Kendo UI - the popularity of Bootstrap has skyrocketed. Today, Bootstrap is one of the most popular frameworks on the web. Developers like it because its components are robust and easy to work with. It provides a super-powerful grid system that developers need to build responsive web applications. Bootstrap also works the way you want it to. Don't like the way the styles look? Change it. Bootstrap is highly-customizable and flexible to your needs.

We like frameworks that work well and are used by lots of developers. That's why we built Bootstrap themes across our web component suites like Kendo UI and Telerik UI for ASP.NET Core. Many of our customers have enjoyed using them. And with great success, too! This was evidenced by customers who were building some amazing applications very early on (like 2012).

What's New in Bootstrap 4

Bootstrap 4 is a major re-write of the framework and introduces many exciting features and improvements. Here's a condensed list of most impactful changes:

• Sass has replaced Less for defining styles
• Flexbox is used for layout
• The primary CSS unit is now rem (relative to font-size of the root element), instead of px
• Non-responsive usage is no longer supported (this is point of using Bootstrap, anyway)
• Panels, thumbnails, and wells have been replaced by cards (which are simpler to use)

There are many more changes than what's listed here. What's important to note is that Bootstrap 4 represents a significant change from its previous version and offers developers many features that are worth a deeper examination.

Getting Started

The best way to start using Telerik UI for ASP.NET Core is through the project templates we provide for Visual Studio. These templates are available through the Telerik ASP.NET Core VSExtensions package in the Visual Studio Marketplace:

Once installed, project templates are available for numerous products, including Telerik UI for ASP.NET Core:

These templates will generate a project structure for an ASP.NET application along with one of our component suites. Currently, the template for Telerik UI for ASP.NET Core includes a wizard for generating three different styles of applications: Blank, Standard, and Grid and Menu.

This will generate an ASP.NET Core application with server wrappers and a front-end implementation based on Kendo UI.

The next step is to integrate Bootstrap 4. Currently, our project templates will generate an application based on Bootstrap 3 with Bower for dependency management. You can update Bootstrap along with any other dependencies through the built-in support for Bower in Visual Studio:

It's worth noting that you also can manage dependencies like Bootstrap through package management tools like npm. These tools typically operate through a command-line interface (CLI). It may be preferable to manage these dependencies in this manner since operations through a CLI can be easily scripted (i.e. build processes). Note: Bower also provides a CLI.

No matter how you choose to manage your dependencies, the default layout (i.e _Layout.cshtml) should contain references to them. The default layout defines a top level template for views in your web application. These references include the following:

• Bootstrap 4 (CSS)
• Kendo UI Bootstrap 4 theme (CSS)
• jQuery
• Kendo UI
• Kendo UI with ASP.NET MVC
• Popper.js
• Bootstrap v4

Once you've established these dependencies in the default layout, you can implement a grid layout within the markup of your page through Bootstrap. This is accomplished through a few simple steps:

1. Add a responsive NavBar with your navigation links
2. Add a <div> with a container CSS class to define your core content – the container can be either fixed-width (class="container") or full-width (class="container-fluid")
3. Define a view's core contents inside of columns, contained in rows

At this point, you have the working baseline of an ASP.NET Core application built on MVC and Bootstrap 4 for the front-end implementation!

Considerations when Using Bootstrap 4 with Telerik UI for ASP.NET Core

The changes introduced to Bootstrap 4 will likely impact the web applications you've built with previous versions of Bootstrap and Telerik UI for ASP.NET Core. Here's a list of things to be aware of when you decide to incorporate Bootstrap 4:

• Telerik UI for ASP.NET Core ships with a Bootstrap 4 theme that is written in Sass and is part of the new structure in Kendo UI: Sass-Based Themes
• Use of the “common” CSS file that matches your theme (i.e. kendo.material.css) is NOT required
• You can customize the Kendo UI Bootstrap v4 theme through Sassy CSS (SCSS)

Finally, we strongly recommend the use of the Progress Sass ThemeBuilder. This is an online WYSIWYG tool that will generate custom styles based on pre-existing themes for products like Telerik UI for ASP.NET Core:

In the image (above), you can see the Progress Sass ThemeBuilder being used to customize the Bootstrap 4 theme we have built for Telerik UI for ASP.NET Core.

Seeing is Believing

It's been said that a picture is worth a thousand words. Well, we believe that a demo is worth a thousand pictures. That's why we've built a demo ASP.NET Core 2.0 application that makes use of many of the new features in Bootstrap 4 and Telerik UI for ASP.NET Core.

Hopefully, this application will inspire you to consider moving to Bootstrap 4 in the near future. And, if your implementation is using Telerik UI for ASP.NET Core today then you're in luck because these two frameworks work very well together. They're the peanut butter and chocolate combination of developer goodness!

Resources

The following resources should help you get started with Telerik UI for ASP.NET Core and Bootstrap 4:

• Telerik UI for ASP.NET Core
• Bootstrap
• Overview of Telerik UI for ASP.NET Core
• Getting Started (Bootstrap)
• Telerik ASP.NET Core VSExtensions package in the Visual Studio Marketplace
• Progress Sass Theme Builder for UI for ASP.NET Core