I am developing my first .net core web application. I am trying to put my company logo in _layout.cshtml page, but it seems that the style sheet site.css is not recognized by the _layout page. Below is my code for _layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VitalRecords</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and my site.css has the following defined:
.headerDiv {
background-color: white;
}
.headerTopBanner {
background-color: $header-top-banner-color;
height: 5px;
width: 100%;
}
.headerLogo {
padding: 5px;
padding-left: 10px;
vertical-align: middle;
}
.logo {
background: url(../../images/LogoWithDesc) 0 0;
min-height: 70px;
vertical-align: middle;
}
$header-top-banner-color: #FD810A;
the screen shot of the output looks like so:
I have the similar code in Index.cshtml:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
Thats is why the welcome is coming twice on my page, but logo and some other colors are not coming. It seems that site.css is not recognized at all.
any help will be highly appreciated,
Try importing your css link like this
<link href="#Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
Related
I've been learning Bootstrap 5 for sometime now and tried to combine Bootstrap with flex-box to create a navbar that collapses.
But for some reason the flex-box I used for the navbar links is displaying a white line that I cant get rid of. I've tried changing the background-color of the flexbox but it still didn't work,
I think it may be something with the bootstrap but cant find a way to fix it for 2 hours. If someone can tell me how to fix this with the bootstrap or just tell me what I did wrong I would appreciate. Many thanks!
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.0">
<link rel="stylesheet" href="scrap.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>scrap</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md bg-dark confusing">
<div class="container">
<div class="navbar-brand col-md-2 col-3">
<h2>Protocole</h2>
</div>
<div class="collapse navbar-collapse">
<div class="navbar-nav nav-tabs col">
<div class="nav-item">
Home
</div>
<div class="nav-item">
pages
</div>
<div class="nav-item">
about
</div>
</div>
</div>
<div class="col-2">
<div class="btn btn-light col-md-8 col">Login</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
CSS
.confusing{
height: 10vh;
}
.nav-tabs{
display: flex;
justify-content: space-evenly;
text-align: center;
}
.nav-item{
width: 100%;
}
Add this line for .nav-tabs css class: border:none;
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
How to center the contents inside this container without sacrificing the width. I could decrease width and do margin: 0 auto but thats not what I want.
Currently the form doesn't look in the middle it looks aligned left. From the first character to the end of the image the form should appear to be at the center of the page that is what I am trying to do.
https://jsfiddle.net/yj4zh297/
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Print Form</title>
<style type="text/css">
.line{
border-bottom: 1px solid black;
}
.clear {
clear: both;
}
.row {
margin: 0;
}
.container-fluid div {
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background: grey;">
<div class="col-sm-6 float-right">
<!--.img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent elemen-->
<figure style="max-width: 200px; max-height: 200px;">
<img src="https://i.imgur.com/rC8Btb0.jpg" class="img-fluid" alt="image">
</figure>
</div>
<div class="col-sm-6 float-left">
Form Number: <span class="line">21129012</span><br>
</div>
<div class="col-sm-12">
Hostel: <span class="line">(Yes / No)</span><br>
</div>
<div class="col-sm-12">
Course Applying For: <span class="line"> BSC Informatics and robotics</span><br>
</div>
<div class="col-sm-12">
Full Name (IN BLOCK LETTERS): <span class="line"> DLKLKDJ LKDJDKDJD</span><br>
</div>
<div class="col-sm-12">
Gender: <span class="line"> Male</span><br>
</div>
<div class="col-sm-12">
Phone Number: <span class="line"> 3838443322</span><br>
</div>
<div class="col-sm-12">
Email: <span class="line"> 3838443322</span><br>
</div>
</div> <!--end of container-->
<!-- 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You can set a width:100%; max-width: 800px; to the container-fluid.
And add margin-left:auto; margin-right:auto;
The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot
I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the "!doctype html" tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?
<!doctype html> <!-- scrolling only works without the doctype -->
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br >menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br> Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br >Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</ br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content< /br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content </br>Content</br>Content</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
correct the many, many </br> </br > etc tags
<html xmlns="http://www.w3.org/1999/html"> should be <html xmlns="http://www.w3.org/1999/xhtml">
add a <title>
remove the stray </div> at the bottom
Now you have a html5 doc that validates. To get the scrollables to work, you must give either body or .scrollable a height. You cannot have a scrollable defined as 100% of 100%.
if you set
.scrollable {
height: 500px;
overflow: auto;
}
it works, OR - set the height dynamically in javascript :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
note : the code just simulates the 100%->100%, top of the scrollables is still behind the navbar, and you must implement some code to take care of window resizing.
cleaned markup :
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 500px;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
<!-- or :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu <br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content <br>Content<br>Content<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>