I'm trying to add a CardView in this template:
http://startbootstrap.com/template-overviews/clean-blog/
with this Index.html:
<!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="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</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>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 18, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on August 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on July 8, 2014</p>
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
i need it in class=site-heading but,
we have to add something like http://materializecss.com/ style in this template or what we can do for use this material into this startbootstrap-clean-blog ?
Cheers!
I wouldn't recommend using both Bootstrap and Materializecss. I think the easiest way to go about this is to start off using materializecss as the framework and then select the style you like from the clean-blog template and implement them.
Materializecss has its own grid, which is really similar to the bootstrap grid. Then you just need to add the font-families and basic styling you found in the clean-blog css file.
I hope this helps.
Related
Here is the error now showing in browser console, anyone please explain what is this?this is a screenshot of html file
I'm building a web page using Bootstrap, I have added Bootstrap CSS and my CSS into "head" tag. Here is the code-
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
Here is what I have added into my CSS-
.mybanner{
background-color: rgb(12, 8, 5);
text-align: center;
}
.mybg{
background-color: rgb(161, 86, 86);
}
.other{
width: 30px;
height: 30px;
}
Here is the whole code-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-light navbar-expand-lg mybg" style="background-color: #3be79f;">
<a class="navbar-brand" href="#" style="color: rgb(141, 7, 7); font-size: 25px; font-family: 'Permanent Marker', cursive;"> Stiffy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beauty</a>
<a class="dropdown-item" href="#">Health</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Lifestyle</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Your Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--slideshow starts-->
<div class="fluid-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Photography</h3>
<p>It is always so much fun!</p>
</div>
</div>
<div class="carousel-item">
<img src="../Image\zombie-945622.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Ghost</h3>
<p>Thank you, Mr. Demon</p>
</div>
</div>
<div class="carousel-item">
<img class="img-1" src="../Image\zombie-979358.jpg" alt="New York" style="width:100%; height: 60%;">
<div class="carousel-caption">
<h3> Oops.</h3>
<p>Ghosts are best.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--slideshow ends-->
<!-- Banner starts-->
<div class="fluid-container">
<div class="row" class="mybanner" style= "background-color: #3be79f;
text-align: center;"
>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
24*7 Services
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Cheaper in price
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Deliver ASAP
</div>
</div>
</div>
<!-- Banner ends-->
<!-- other stuff-->
<div class="other">
<img src="../Image\bride.jpg">
</div>
<!-- JQuery,JS, BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have added class properly, don't know why it's not working. Please help me.Thank you.
You are in the folder of html, you should use .. to go out of the folder and then tell to what folder to ender /CSS/ and then to select the file style.css
Use this:
<link rel="stylesheet" href="../CSS/style.css" />
Please swap this:
<link rel="stylesheet" href="CSS\style.css" >
To this:
<link rel="stylesheet" href="../CSS/style.css" >
EDIT: As #renaldo-balaj explains you're in a HTML folder so to access the CSS folder you would need to use ../ to hop up one level in your folder directory then go into CSS then grab styles.css
Also to add you used the wrong \
EDIT 29/11:
Ok I have removed the HTML not needed to show that this works properly.. You must be implementing the solution wrong. You have 2 answers that are correct and this post should be closed due to lack of context and over duplciation of 100 other posts around this relative path issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
first web page using bootstrap
</title>
<!--Our CSS-->
<link rel="stylesheet" href="../CSS/style.css" >
</head>
<body>
</body>
</html>
body {
background-color: black;
}
Folder Structure:
Project
│
│
├───CSS
│ style.css
│
└───HTML
index.html
So here I will try explain further your issue.
\ backslashes are not used in filepaths, as per #birspider's answer which shows the HTML validator state that.
You have your index.html in a HTML folder which isn't normal for a static website so becuase of this unless your CSS file is in the same directory to that HTML file then you need to use the ../ to hop up out of the HTML folder, then /CSS to go into your CSS folder and then /style.css to grab the style.css file and serve it.
Again your DevTools console would of advised you of where it was trying to look and you should be able to debug from there.
Please close this post and accept a answer.
Image from my browser showing that background-color: black; worked from the style.css file: https://ibb.co/ys1Kvvt
your html markup is invalid:
try https://validator.nu/ and you will find (among others)
Error: Bad value CSS\style.css for attribute href on
element link: Backslash ("\") used as path segment delimiter.
At line 20
<link rel="stylesheet" href="CSS\style.css" >
---
Error: Bad value ../Image\unsplash.jpg for attribute src on
element img: Backslash ("\") used as path segment delimiter.
At line 84
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">↩
---
Error: Duplicate attribute class.
At line 124
ass="row" class="mybanner" sty
Firts of all i dont want to change responsive desing. I have 3 questons and thank you for your helps.
I need 2 lines in the button. 1st line text is "XXX Pump" and 2nd line is "P01" and the lines shouldnt mix.
When i give a very long text button is going bigger then normal size (see 5th button)
The space between the buttons are so much. I created a div for each button for responsive design. But i couldnt give less space.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<title>S7-1200 WEB SERVER</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Manual Control <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heassssssssssssssting Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
For 1st question you can use .d-block class from display utilities as an alternative to <br> line break.
Example:
<a class="btn btn-primary">
<span class="d-block">Pre Heating Pump</span>
<span class="d-block">PU01</span>
</a>
I have a html page using a bootstrap theme. I have a slight problem with CSS styling. It is a problem I have never come across. The problem is that the background doesn't fill the page on page load, only when the page is resized dos it fill the page. Any suggestions?
Thanks,
James Hyland
Here is the _Layout.cshtml code;
#{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#side-navbar-footer {
position: fixed;
bottom: 0;
padding: 10px 15px;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
border-top: 1px solid black;
}
.dropdown-toggle{
color:black;
}
#page-wrapper {
background: radial-gradient(white 10%, grey );
background-size: cover;
}
</style>
<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>HBL Website</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" 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>
<div id="wrapper">
<!-- Navigation -->
<nav id="navbar-top" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Hylands Biggest Loser</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<a asp-controller="Account" asp-action="Login"><i class="fa fa-sign-out fa-fw"></i> Login</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-line-chart"></i> My Progress<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weights
</li>
<li>
Target Weight
</li>
<li>
My Summary
</li>
<li>
</ul>
</li>
<li>
<i class="fa fa-users"></i> My Group<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Members
</li>
<li>
Summary
</li>
<li>
</ul>
</li>
<li>
<a style="bottom:0" href="tables.html"><i class="fa fa-copyright"></i> Needlecast Ltd. 2017</a>
</li>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
#RenderBody()
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
#RenderSection("Layout", required: false);
#RenderSection("Scripts", required: false)
<environment names="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 names="Staging,Production">
<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"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</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"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
</body>
</html>
And here is the Index.cshtml code (which isnt causing the issue);
#{
ViewData["Title"] = "About";
}
<style>
*{
text-align:center;
}
</style>
<body >
<img src="~/img/asset 1.jpg"/>
<h1>Welcome to Hylands Biggest Loser!</h1>
<h2>Click the buttons on the side. They will allow you to view your weights, progress, and your overall weekly summary.</h2>
<h2>You can also view the other members in your group, as well as a weekly summary for all members.</h2>
</body>
Set all your main wrapper elements to have a height of 100% and your background should always take up at least 100% of the page.
Add this css style:
html, body, #wrapper, #page-wrapper { height: 100%; }
I am fairly new with Asp.net MVC and programming in general.
I am having an issue with using layout in Asp.Net MVC 4. I have a main layout page. This page has all the jquery and javascript file reference at the bottom above the body close tag, and the css files in the head section below the title. I have another layout, _UserLayout, that use the _Layout file. When I reference the _UserLayout file in view, the scripts are not render. I have to also use script.render on the view. Why didn't the script render when I use the layout?
The regular Layout Page:
#using System.Web.Optimization;
#using Microsoft.Web.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="~/Content/bootstrap-switch.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
#Styles.Render("~/Content/css")
#RenderSection("head", required: false)
#RenderSection("style", false)
</head>
<body style="padding-top: 50px;" >
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#Url.Action("Index", "Home")">Home</a>
<a class="navbar-brand" href="#Url.Action("About","Home")">About us</a>
<a class="navbar-brand" href="#Url.Action("Login","Account")">Login</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
<footer class="navbar navbar-fixed-bottom footer">
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<p id="pFooter" class="pull-left">Designed By Example, Inc.</p>
<p class="pull-right">1.0.0.0</p>
</div>
</div>
</div>
</footer>
#Scripts.Render("~/MyBundle")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-switch.min.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
The _UserLayout page
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="navbar-brand" id="editUser">Edit</button>
<button class="navbar-brand" id="addUser">Add User</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
#RenderSection("Scripts", required: false)
#Scripts.Render("~/MyBundle")
This page is supposed to use the _UserLayout page. However, I had to add the #Scripts.Render("~/MyBundle") to the page.
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_UserLayout.cshtml";
}
<h2>User View</h2>
#Scripts.Render("~/MyBundle")
<script type="text/javascript">
$('#editUser').on('click', function () {
alert('test');
});
</script>
Am I doing something wrong here? Why did I have to add #Scripts.Render("~/MyBundle") to the file even though it has the layout? Is there something that I could have done to make sure that the script references render properly?
You include ~/MyBundle multiple times and this is causing problems.
Also you should use the Scripts section to render scripts in your views not like you did. Try using the following code:
For the layout - make bundles for all of the jquery and bootstrap scripts:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("Scripts", required: false)
And then in your view you can call your bundle like that:
#section Scripts{
#Scripts.Render("~/bundles/MyBundle")
}
Your bundles should look like something like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.8.2.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-switch.min.js"));
bundles.Add(new ScriptBundle("~/bundles/MyBundle").Include("~/Scripts/yourscript.js"));
Also just a note about "bootstrap-switch.min.js" - bundles minifies the js files on publish so this won't work with the already minified file. Try to use the full version of this bootstrap component and include it in a bundle like i showed you above.
I have a metisMenu in my ASP.Net MVC app, what I am looking to do is hide some options based on the users AD Group membership.
The app is currently using windows integrated authentication (Intranet Application).
What is the best way to do this?
I am presuming I could do a viewbag option which then if true or flase either shows or hides, but that would mean I would have to code something for every action?
The menu is part of the shared layout which is below
<!DOCTYPE html>
<html>
<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>CCL Support System</title>
<link rel="shortcut icon" type="image/png" href="~/img/favicon.png" />
#*CSS Declerations*#
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Content/ccl.less" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/themify-icons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>
#*JavaScript Declerations*#
<script src="~/Scripts/less.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="~/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>
<script src="~/scripts/sb-admin-2.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/expand.js" type="text/javascript"></script>
</head>
<body class="ccl-body">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top ccl-header" role="navigation">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown navbar-profile">
<a style="z-index: 1" href="#" class="dropdown-toggle navbar-profile-icon" data-toggle="dropdown"><span class="ti-settings menu-icon"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Edit User Details</li>
</ul>
</li>
</ul>
</div>
<div class="logo-box">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="ccl-logo" href="#Url.Action("index", "Home" )"><img src="~/img/logo.png" width="75" height="73" alt="" /></a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Panel -->
<div id="page-wrapper" class="content">
#if (IsSectionDefined("title"))
{
<div id="page-block" class="page-block-header row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("title", false)
</div>
</div>
}
#if (IsSectionDefined("subtitle"))
{
<div id="page-block" class="page-block-two row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("subtitle", false)
</div>
</div>
}
#RenderBody()
</div>
</div>
<!-- Footer -->
<div class="navbar ccl-footer">
<div class="pull-right">
<p>© 2014 Computer Concepts Ltd</p>
</div>
</div>
</body>
</html>
If we look at the menu more closely (snippet below)
div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
I am looking to hide certain options within this
What would be the best way, would I need to create a custom authentication class?? if so does anyone have any good links on how to do this?
So the end result would be if user is in XYZ AD Group then show
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
Otherwise hide it.
You can use MvcSiteMapProvider's security trimming feature to do this in a few steps.
Configure the AuthorizeAttribute on your action methods (which supports roles/users/AD/forms authentication).
Install MvcSiteMapProvider via NuGet.
Create an hierarchy of your site in the Mvc.sitemap XML file and/or using .NET attributes and/or using dynamic node providers.
Add the #Html.MvcSiteMap().Menu() HTML helper to your layout page (or create your own Menu HTML helper that has similar functionality if it doesn't suit your needs).
Customize the templates in the /Views/Shared/DisplayTemplates/ folder to conform to your page layout.
Documentation Wiki: https://github.com/maartenba/MvcSiteMapProvider/wiki
Blog with Downloadable Demos: http://www.shiningtreasures.com/?tag=/MvcSiteMapProvider
MvcSiteMapProvider Questions on SO: https://stackoverflow.com/questions/tagged/mvcsitemapprovider
Full Disclosure: I am a major project contributor of MvcSiteMapProvider.
If you don't want to add a 3rd party library, this will take a bit of work to do. You would have to create your own HTML helpers that respond to the authorize attribute (or something similar). You could cannibalize the AuthorizeAttributeAclModule to determine whether to show or hide your HTML helper nodes.