My project directory structure:
myapp/
index.html
jquery-2.1.1.js
css/
bootstrap.min.css
img/
*
js/
bootstrap.min.js
My index.html page:
<!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">
<title>First Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- 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/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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When I open this in any browser I see:
But my <navbar> element was literally cut-n-pasted from W3Schools where it looks like this:
So:
Have I misconfigured Bootstrap somehow? If so, where did I go wrong?
I want to make sure that my app is responsive; have I configured bootstrap-responsive.css correctly? Here I'm confused because I don't have an assets directory anywhere in my project...
This is working fine as per the snippet below. Note that I am referencing both jQuery and Bootstrap from CDN. This is the recommended way to do it as it can make your website load a little faster.
Not sure what the bootstrap-responsive.css file is though, but it's certainly not needed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
Related
I suspect this is very simple, but I searched and didn't find and/or didn't understand. I'm working on a Razor Pages app to learn web dev, and I'm trying to put a navbar in the _Layout.cshtml, but while the default declaration of it works fine, if I change it to "navbar-inverse" bootstrap class then it doesn't work any more. I thought if it might be the version of bootstrap, and I then installed the latest (bootstrap 5) as a Nuget package. What I would need now is how to reference the new version 5 of bootstrap in my _Layout.cshtml file (<link rel="..." and <script src="...") and I want to reference from the file system (or whatever it is that works). Also I would like you to confirm if actually the problem in my code is because of the bootstrap old version. The navbar with "navbar-inverse" class doesn't work and before with a default class it did.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebAppPersonas</title>
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="~/js/bootstrap.js"> </script>
#RenderSection("Head", false)
</head>
<body>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</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">
© 2021 - WebAppPersonas - <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>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Thank you in advance
Pablo
When using bootstrap from nuget, you can use the Solution Explorer to see, where the nuget files are being located. Click on Dependencies > Packages > bootstrap > Content Files.
Under there you should see links like in the image below: any/any/wwwroot/css/bootstrap.css. Since asp.net core stores and looks for static files in the wwwroot folder as the root folder per default, your css link would look like this:
<link rel="stylesheet" href="~/css/bootstrap.css" />
Analog for the js files:
<script src="~/js/bootstrap.bundle.min.js"></script>
If you right click on the project and choose Add from the context menu, you can then choose to Add a Client Side Library.
From there you can choose the Provider and library. When installed they will be available in the wwwroot directory for the project.
I use js and css as the following showa,it can work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebAppPersonas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="~/css/site.css" />
#RenderSection("Head", false)
</head>
<body>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a></li>
<li><a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a></li>
</ul>
</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">
© 2021 - WebAppPersonas - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
result:
I need to build a website. I downloaded bootstrap all files then I linked every file properly but I don't know It's not working. I don't know why bootstrap 4.3.1 classes is not working properly. I am not see my navbar toggler icon. why? please help me out and give me some instructions for using bootstrap 4.3.1 offline.
no background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/fa/css/all.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fixed.css">
<title>Nuno Theme</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<!-- Start Home Section -->
<div id="home">
<!-- Navigation -->
<nav class="navbar navbar-expand-md bg-dark fixed-top">
<a href="#" class="navbar-brand">
<img src="images/nuno.png" alt="brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="#navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Course
</li>
<li class="nav-item">
Features
</li>
</ul>
</div>
</div><!-- End Contact Section -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I used bootstrap 4.3.1 offline. but navbar-toggler-icon is not working.
<!DOCTYPE html>
<html>
<head>
<title>GucciGang Website</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
</head>
<body>
<header>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="/">Real Python (for the web!)</a>
<ul class="nav">
<li class="active">Home</li>
<li>Welcome</li>
<li>222</li>
</ul>
</div>
</div>
</header>
<div class="container">
{% block content%}
{% endblock %}
</div>
</body>
</html>
With the template.html above with Bootstrap, I expected my page to look like
but it actually looks like
Which part of my code is wrong? Am I missing something?
Just add navbar-nav class to your unordered list tag
<ul class="nav navbar-nav">
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
I have navbar made by bootstrap, all navbar items appears after I run the project but the "dropdown list" item not work when I click on it
I have this header:
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<link href="css/Style.css" rel="stylesheet" /><meta name="viewport" content="width=device-width, initial-scale=1" />
And this the navbar code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/Style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Default.aspx">MHM CAMM</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Convert<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Currency</li>
<li>Mass Measurements</li>
</ul>
</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</nav>
When I click Convert button the dropdown list not apears
My project uses asp.net and the IDE is VS2017
How to fix this please?
The order of your libraries is wrong. jQuery must be incuded before boostrap:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Default.aspx">MHM CAMM</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Convert<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Currency</li>
<li>Mass Measurements</li>
</ul>
</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</nav>
I am newbie to bootstrap, trying to get a make a template.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Tech Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Top image is what i wanted, but, what i am getting is the below output,
As one can see in the image, the links are in the same line as the brand name, which i do not want, it should be in the next line.
Style like this.
<ul class="nav navbar-nav">
to
display:block;