laravel not getting bootstrap stylesheet

up vote
0
down vote

favorite

so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
enter image description here

and me i get this :

enter image description here

this is my code :

app.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

navbar.blade.php

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

asked Nov 10 at 11:55

ilyesmilano

209

1

have u added " bootstrap.min.js , jquery.min.js, bootstrap.min.css" cdn's?
– DPS
Nov 10 at 11:59

no i did not because in the tuto he didn't and worked fine for him.
– ilyesmilano
Nov 10 at 12:07

1

you have to use cdn's otherwise it will not work
– DPS
Nov 10 at 12:08

@DPS this should be posted as answer
– Cid
Nov 10 at 12:21

Check updated answer @ilyesmilano.
– DPS
Nov 10 at 12:23

add a comment |

up vote
0
down vote

favorite

so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
enter image description here

and me i get this :

enter image description here

this is my code :

app.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

navbar.blade.php

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

asked Nov 10 at 11:55

ilyesmilano

209

1

have u added " bootstrap.min.js , jquery.min.js, bootstrap.min.css" cdn's?
– DPS
Nov 10 at 11:59

no i did not because in the tuto he didn't and worked fine for him.
– ilyesmilano
Nov 10 at 12:07

1

you have to use cdn's otherwise it will not work
– DPS
Nov 10 at 12:08

@DPS this should be posted as answer
– Cid
Nov 10 at 12:21

Check updated answer @ilyesmilano.
– DPS
Nov 10 at 12:23

add a comment |

up vote
0
down vote

favorite

so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
enter image description here

and me i get this :

enter image description here

this is my code :

app.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

navbar.blade.php

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

asked Nov 10 at 11:55

ilyesmilano

209

so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
enter image description here

and me i get this :

enter image description here

this is my code :

app.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

navbar.blade.php

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>WebSite</title>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	@include('inc.navbar')
	@yield('content')
</body>
</html>

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

php html laravel

asked Nov 10 at 11:55

ilyesmilano

209

asked Nov 10 at 11:55

ilyesmilano

209

asked Nov 10 at 11:55

ilyesmilano

209

asked Nov 10 at 11:55

ilyesmilano

209

asked Nov 10 at 11:55

ilyesmilano

209

1

have u added " bootstrap.min.js , jquery.min.js, bootstrap.min.css" cdn's?
– DPS
Nov 10 at 11:59

no i did not because in the tuto he didn't and worked fine for him.
– ilyesmilano
Nov 10 at 12:07

1

you have to use cdn's otherwise it will not work
– DPS
Nov 10 at 12:08

@DPS this should be posted as answer
– Cid
Nov 10 at 12:21

Check updated answer @ilyesmilano.
– DPS
Nov 10 at 12:23

add a comment |

1

have u added " bootstrap.min.js , jquery.min.js, bootstrap.min.css" cdn's?
– DPS
Nov 10 at 11:59

no i did not because in the tuto he didn't and worked fine for him.
– ilyesmilano
Nov 10 at 12:07

1

you have to use cdn's otherwise it will not work
– DPS
Nov 10 at 12:08

@DPS this should be posted as answer
– Cid
Nov 10 at 12:21

Check updated answer @ilyesmilano.
– DPS
Nov 10 at 12:23

have u added " bootstrap.min.js , jquery.min.js, bootstrap.min.css" cdn's?
– DPS
Nov 10 at 11:59

no i did not because in the tuto he didn't and worked fine for him.
– ilyesmilano
Nov 10 at 12:07

you have to use cdn's otherwise it will not work
– DPS
Nov 10 at 12:08

@DPS this should be posted as answer
– Cid
Nov 10 at 12:21

Check updated answer @ilyesmilano.
– DPS
Nov 10 at 12:23

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Below are the cdn's

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use thses cdn's as like below.

<!DOCTYPE html>

<html>
<head>
 <title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>
</body>
</html>

Fiddle

answered Nov 10 at 12:21

DPS

481212

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238685%2flaravel-not-getting-bootstrap-stylesheet%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Below are the cdn's

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use thses cdn's as like below.

<!DOCTYPE html>

<html>
<head>
 <title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>
</body>
</html>

Fiddle

answered Nov 10 at 12:21

DPS

481212

add a comment |

up vote
1
down vote

accepted

Below are the cdn's

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use thses cdn's as like below.

<!DOCTYPE html>

<html>
<head>
 <title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>
</body>
</html>

Fiddle

answered Nov 10 at 12:21

DPS

481212

add a comment |

up vote
1
down vote

accepted

Below are the cdn's

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use thses cdn's as like below.

<!DOCTYPE html>

<html>
<head>
 <title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>
</body>
</html>

Fiddle

answered Nov 10 at 12:21

DPS

481212

Below are the cdn's

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use thses cdn's as like below.

<!DOCTYPE html>

<html>
<head>
 <title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>
</body>
</html>

Fiddle

answered Nov 10 at 12:21

DPS

481212

answered Nov 10 at 12:21

DPS

481212

answered Nov 10 at 12:21

DPS

481212

answered Nov 10 at 12:21

DPS

481212

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb