This is a migrated thread and some comments may be shown as answers.

Bootstrap 4 update needed for Color Theme Sass Tool ?

1 Answer 214 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Thomas asked on 06 Dec 2018, 07:25 PM

grid.png

I using VS 2017 15.9.3 + asp.net core + mcv ( + razor )

created the project with telerik Project Asp.net core + Grid selection.and created 3 times with the sass theme generator a template and replaced in

_Layout.cshtml the stylesheet

<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <!--link rel="stylesheet" href="~/css/site.css" /-->
    <link rel="stylesheet" href="~/css/all.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <!--link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /-->
    <link rel="stylesheet" href="~/css/all.css" asp-append-version="true" />
</environment>

but anyhow the Grid looks ugly in the footer any time.

i found this blog https://www.telerik.com/blogs/getting-started-telerik-ui-for-asp-net-core-and-bootstrap-4

but i do not understand how to do the update

>>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:

where to store the references , where to reference them etc..

it´s a little bit confusing me so please is there some better help tan this how to update or maybe it´s not needed anyhow to solve the grid ui problem ?

thanks br thomas

1 Answer, 1 is accepted

answered on 11 Dec 2018, 02:13 PM

TelerikAspNetCoreAppBootstrap4.zip

Hello Thomas,

I am attaching a sample ASP.NET Core solution, where you can find the minimum setup for integrating Bootstrap 4 with the Kendo UI Sass Bootstrap theme. Basically, the required steps are to include the following references in the <head> of the application:

Include a reference to the Bootstrap 4 stylesheet.
Include a reference to the Kendo UI Sass Bootstrap theme.

The basic layout is as follows:

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>@ViewData["Title"] - TelerikAspNetCoreAppBootstrap4</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

In case you would like to include you customized theme that is generated through the Progress Sass ThemeBUilder, then the generated all.css file should replace the kendo-bootstrap-v4.min.css reference.

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.