I could not find any already asked questions relating to my problem.
Also, I'm new (again) to MVC structure as I took a long hiatus.
Anyhow, I created a new layout file _Layoutwithtop.cshtml. The Index.cshtml adopts the layout just fine, although About.cshtml and Contact.cshtml do not.
I will need all future View files to inherit _Layoutwithtop. Here are my attached files. Yes, I have included #Layout = "~/Views/Shared/_Layoutwithtop.cshtml"; line in the About and Contact Page.
Thanks.
_Layoutwithtop.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta charset="UTF-8">
<meta content="Great Lakes Imaging carries new and pre-owned radiology and x-ray imaging equipment for Chiropractors, Medical offices and Veterinary clinics. Offering a wide variety of top brands in the industry, we help you find the right equipment for your practice." name="description">
<meta content="Kodak POC 140, AGFA CR 30X, Bennett, HCMI, digital x-ray, film processor, x-ray parts, xray accessories, technique chart, radiation, xray equipment, xray companies" name="keywords">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/Site.css" rel="stylesheet">
<link href="Content/animate.min.css" rel="stylesheet">
<link href="Content/assets/icons/icons.css" rel="stylesheet">
<link href="Content/owl.theme.css" rel="stylesheet">
<link href="Content/owl.carousel.css" rel="stylesheet">
<link href="Content/nivo-lightbox.css" rel="stylesheet">
<link href="Content/nivo_themes/default/default.css" rel="stylesheet">
<link href="Content/styles.css" rel="stylesheet">
<link href="Content/responsive.css" rel="stylesheet">
<link href="Content/colors/blue.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
</head>
<body>
<div class="preloader">
<div class="status"></div>
</div>
<div>
#RenderBody()
</div>
<!-- footer -->
#Html.Partial("_footer")
<!-- / footer -->
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<!-- scripts -->
<script src="Scripts/jquery.min.js"></script>
<script>jQuery(window).load(function(){"use strict";jQuery(".status").fadeOut(),jQuery(".preloader").delay(1e3).fadeOut("slow")})</script>
<script src="Scripts/smoothscroll.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.nav.js"></script>
<script src="Scripts/wow.min.js"></script>
<script src="Scripts/nivo-lightbox.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>
<script src="Scripts/jquery.stellar.min.js"></script>
<script src="Scripts/jquery.ajaxchimp.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="Scripts/custom.js"></script>
<!-- / scripts -->
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page | Great Lakes Imaging, Inc.";
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
<header class="header data-stellar-background-ratio=0.5" id="home">
<div class="overlay-layer">
<div class="navbar bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
<div class="container">
<!--- nav header --->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#stamp-navigation" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-grid-2x2"></span>
</button>
Great Lakes Imaging, Inc.
</div>
</div>
</div>
<!--- main home wrapper --->
<div class="container">
<div class="only-logo">
<div class="navbar">
<div class="navbar-header">
<img alt="Great Lakes Imaging Main Logo" src="images/newGLITranswhite.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro-section">
<h1 class="white-text intro">Your #1 source for digital x-ray equipment</h1>
<h5 class="white-text">We just happen to have 100 + chiropractic tables, too</h5>
<div class="button">Browse all of our equipment</div>
</div>
</div>
</div>
</div>
<!--- /main home wrapper --->
</div>
</header>
#Html.Partial("_Menu")
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
Related
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link how to create sidebar menu in bootstrap that stays? since I want my menu to be exactly as shown in that link. But I couldn't achieve the result. Something about simple-sidebar.css is mentioned in the link but I would like to know where exactly and how it should be added to my razor pages project. What changes should I make to move my navigation menu from top to left side as shown in the link that I mentioned since it is not working for my razor pages project? A detailed explanation would be really helpful as I am new to razor pages. The code in my "_Layout.cshtml" is shown below. Please help me with this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script
src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
the simple-sidebar.css can be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .
Simply download the lib and copy thesimple-sidebar.css to wwwroot/lib/simple-sidebar/css/simple-sidebar.css .
and now you could add a link in you layout:
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.
<!-- your nav on top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- you nav on left side -->
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<!-- your main body here -->
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
and add a style to show nav button and left side :
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
At last , to toggle the sidebar , bind a function to handle the event :
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
Here's a screenshot:
Here's the complete code list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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" />
</environment>
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
<script>
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
#RenderSection("Scripts", required: false)
</body>
</html>
I am new to bootstrap and am trying to figure out why my menu on the a smaller screen overlaps my picture instead of pushing it down.
I want to have a fixed menu on all screen sizes and it is fine on the desktop sizes, and is actually fixed on 768px. But it needs to push the content down vertically on smaller sizes and right now it is going over the top of my picture.
I have seen the post that said to change to a static header, which I tried, but lost the fixed header in the desktop and still did not push the picture down when expanding the menu on a smaller screen. Something must be off with my basic structure perhaps, as opposed to my css, as I have not really styled the small sized screens yet with css since it seems like a different type of problem. I want to keep the fixed header at all times, and push content down on smaller sizes using the sandwich menu, in what I would think is a more normal process.
Bootstrap is v3.3.7
Any insight would be greatly appreciated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
<link href="css/navbar1.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<link href="css/first-picture.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header"><div class="top-header">
<div id="header-wrapper">
<div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
<div class="tele-number">530-273-1343</div>
<div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
<div class="email-address">Email CBC</div>
</div>
</div></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li>I'm New</li>
<li>Beliefs</li>
<li>Ministries</li>
<div class="menu-picture"><span class="navbar-brand" href="#"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></span></div>
<li>Missions</li>
<li>Sermons</li>
<li>News/Events</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="container-fluid test">
<div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Why am I not getting the value for dish.price, dish,description etc, what I am doing wrong here?
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row-content"
ng-init="
dish= {
name:'Uthapizza',
image: 'D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\Image\uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments:''
}">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!--<script src"./bootstrap-3.3.6-dist/js/bootstrap-3.3.6-dis/angular2.min.js"></script>-->
<!--<script src="D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\jsangular2.min.js"></script>-->
</body>
</html>
Made a few changes and used a controller now everything works great :)
The problem is, I think atleast not sure, but you used \ in your image path that's why I did this \/ then it's not a problem.
DEMO
var app = angular.module('App', []);
app.controller('MainCtrl', function($scope) {
$scope.dish = {
name: 'Uthapizza',
image: 'D:\/Ericoll\/bootstrap-3.3.6-dist\/bootstrap-3.3.6-dist\/Image\/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: ''
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>Ristorante Con Fusion: Menu</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row row-content">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The value of the dish.image is the problem - avoid using backslash or escape it
I executed your code. Problem is with image part, if you remove image from ng-init your code will work fine. For image path avoid backlash.
I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.
Relevant HTML/Javascript code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.
To set class attribute you should use className instead of class,
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
Example