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>
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.
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 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>
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;