Unable to get Bootstrap grid to work with Kendo UI

Ranch Hand

Posts: 115

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi there. I'm trying to get Kendo UI to work with Bootstrap's grid system. Following the page below, I believe I have done everything correctly but the columns are stacked rather than horizontal. Behavior is consistent across IE7 and Chrome Version 35.0.1916.114 m.
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

Here's the actual HTML I've put together following the steps. Can someone give me some guidance on what I have done wrong? Thanks.

<!doctype html>
<html>
	<head>
		<style>
			<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.common-bootstrap.min.css">
			<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.bootstrap.min.css">
			/* reset everything to the default box model */

*,
			:before,
			:after
			{
				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
			}

/* set a border-box model only to elements that need it */

.container,
			.container-fluid,
			.row,
			.col-xs-1,
			.col-sm-1,
			.col-md-1,
			.col-lg-1,
			.col-xs-2,
			.col-sm-2,
			.col-md-2,
			.col-lg-2,
			.col-xs-3,
			.col-sm-3,
			.col-md-3,
			.col-lg-3,
			.col-xs-4,
			.col-sm-4,
			.col-md-4,
			.col-lg-4,
			.col-xs-5,
			.col-sm-5,
			.col-md-5,
			.col-lg-5,
			.col-xs-6,
			.col-sm-6,
			.col-md-6,
			.col-lg-6,
			.col-xs-7,
			.col-sm-7,
			.col-md-7,
			.col-lg-7,
			.col-xs-8,
			.col-sm-8,
			.col-md-8,
			.col-lg-8,
			.col-xs-9,
			.col-sm-9,
			.col-md-9,
			.col-lg-9,
			.col-xs-10,
			.col-sm-10,
			.col-md-10,
			.col-lg-10,
			.col-xs-11,
			.col-sm-11,
			.col-md-11,
			.col-lg-11,
			.col-xs-12,
			.col-sm-12,
			.col-md-12,
			.col-lg-12
			{
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6">First column</div>
				<div class="col-md-6">Second column</div>
			</div>
		</div>
	</body>
</html>

With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.