I have read other SO questions about this but cannot find an answer to fix the problem. I have checked my code multiple times but couldn't find an error. I am new to using bootstrap, so I could be missing something obvious.
<!DOCTYPE html>
<html>
<head>
<title>asdf</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content"asdf" >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="/stylesheets/style.css" media="screen">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-muted" href="#">ASDF</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
</div>
</div>
<!-- End Navbar -->
</body>
<script></script>
<!-- ******************************* -->
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</html>
Change order of scripts:
JsFiddle
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
then
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
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'm trying to set up a local Laravel website to learn the new features and differences in Laravel 5.6. However, when trying to place a Font Awesome icon in the navbar-brand in Bootstrap 4 it won't seem to load. When I check out the element in the inspector in Chrome the elements dimensions are 0x0. I tried adding width and height of 90px just to see the icon but it still won't show. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop-code"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
fa-laptop-code is not available in the version of font-awesome you are loading.
You are loading 4.7, but if you want to use that icon you need to load FontAwesome 5
Use this CDN instead: https://use.fontawesome.com/releases/v5.2.0/css/all.css
Try this, it will work
<i class="fa fa-laptop"></i>
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I designed a website for a client, out of WordPress. But I want the design to work with WordPress because on the website they should be able to publish news. I will get the news with the functions of WordPress. I have the theme running, but I have a problem with the links of the menus, css, js, etc. I want to know where to configure so that the routes are correct.
The web structure contains the css, img, js, template, index.php, style.php folders.
I have a default-head.php file and scripts.php in the template folder that contains this.
default-head.php
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" href="css/sidr.light.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap-overwrite.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
scripts.php
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/sidr.min.js"></script>
<script src="js/bootbox.min.js"></script>
These files are included in the index. The code of my menu is.
<div class="container-fluid">
<div class="row">
<div id="header" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 id="logo" href="/"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="fa fa-home"></span>Inicio</li>
<li><span class="fa fa-newspaper-o"></span>Noticias</li>
<li><span class="fa fa-calendar"></span>Eventos</li>
<li><span class="fa fa-info"></span>Acerca</li>
<li><span class="fa fa-phone"></span>Contacto</li>
</ul>
<!-- <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<li><span class=""></span>Asociarme</li>
</li>
</ul> -->
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
I will be careful.
Regards
Have a look at
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Example
wp_enqueue_script('oxfam_js_cookie', 'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);
will add
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js'></script>
Or a Basic Method
You can just use this in your PHP files for basic linking
<img src="<?php echo get_template_directory_uri(); ?>/images/image.jpg"/>
Additional answer
Custom Modifications
<!-- CSS
==========
<link href="<?php //bloginfo('template_directory'); ?>/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php //bloginfo('template_directory'); ?>/fonts/fontstyles.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="<?php //bloginfo( 'stylesheet_url' ); ?>" media="all">-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Favicons
========== -->
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon-114x114.png">
I'm using bootstrap and have a simple menu with two items
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li>item1</li>
<li>item2</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>
1) When the browser is expanded I see buttons item1, item2 on the right side and it's working well
2) When the width of the browser is smaller, menu is collapsed
collapsed menu button
3) But, after clicking on the menu button, item1 and item2 are not shown.
Any idea what is wrong?
Did you import the jquery and the bootstrap js in the html. They are required for the navigation to work in responsive mode?
If not, try adding both of them in the html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You need to import/add first the jquery and then the bootstrap js, because bootstrap js is dependent of the jquery.
Thanks a lot
I was linking to wrong *.js files :(
I didn't see any error, so I thought path were correct.
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;