Desired result
Result I'm getting
Header.vue code
<template>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<router-link to="/" class="navbar-brand">Stock Trader</router-link>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<router-link to="/portfolio" activeClass="active" tag="li"><a>Portfolio</a></router-link>
<router-link to="/stocks" activeClass="active" tag="li"><a>Stocks</a></router-link>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>End day </li>
<li class="dropdown">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">Save & Load <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Load Data</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template>
Advise me if anything else is required.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stock Trader</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> -->
</head>
<body>
<div id="app">
</div>
<script src="/dist/build.js"></script>
</body>
</html>
enter image description here
Please advise: Problem while loading a Vue app on local machine, not getting the result as desired. I'm getting a warning however there is no CORS error once checking by pressing f12.
I've attached the third screenshot that shows warning
Please find the following code.
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<router-link class="nav-link" to="/">Stock Trader</router-link>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<router-link class="nav-link" to="/portfolio"
>Portfolio <span class="sr-only">(current)</span></router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/stocks">Stocks</router-link>
</li>
</ul>
</div>
</nav>
</div>
</template>
Make sure that bootstrap is properly installed.
npm install --save bootstrap // install bootstrap
import in main.js file of vue by using the below import
import "bootstrap/dist/css/bootstrap.min.css"
Related
I am using Bootstrap 4 to toggle the collapse of dropdown menu for small screens (sm) in my navbar. But the toggling doesn't work, nothing happens when I click on the toggle button.
I made sure to import all the assets/links in correct order. Can any one see what's wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action="index" asp-action="home">
<img src="~/images/leon.jpg" height="30" width="30" />
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" datatarget="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action="index" asp-action="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-action="home" class="nav-link">Create</a>
</li>
</ul>
</div>
</nav>
<div>
#RenderBody()
</div>
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Script", required: false)
}
</body>
</html>
You have a wrong syntax on datatarget, it should be data-target.
Change this:
datatarget="#collapsibleNavbar"
To this:
data-target="#collapsibleNavbar"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
For some reason or another, the navbar doesn't expand, it remains in the collapsed state. I can't find any mistakes in the code though. What might be the problem?
This is what I have included in my page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="https://use.fontawesome.com/4f2cdffc79.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<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 style="font-weight: normal;" href="#" class="navbar-brand"> LANDING PAGE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> INDUSTRIES </li>
<li> OUR TEAM </li>
<li> CONTACT </li>
<li> BLOG </li>
<li> LOGIN </li>
<li> PLANS & PRICING </li>
</ul>
</div>
</div>
I am building a Bootstap navbar that has 2 social media icons on the left, and a phone number on the right. My social icons are ending up stacked vertically, instead of positioned horizontally. Here is my code:
<nav class="navbar navbar-static-top navbar-inverse">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar social">
<li class="nav-item active">
<a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="nav-item active">
<a class=""nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</nav>
What am I doing wrong?
.fa-stack-1x, .fa-stack-2x {
line-height: inherit !important;
}
<!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">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item ">
<a class="nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
I need a nav-bar that has two tiers. So Level one might have three entries "Dogs" "Cats" "Birds". Selected "Dogs" would show the 2nd tier menu which might have "Collie" "Terrier" "Yorkie" and so on.
I can't get this to work nor can I find an example on the web. I am not wedded to nav-bars, anything that works would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Responsive Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</nav>
<div id="page1" class="page-header">
<h1>Page 1 Nav</h1>
</div>
</div>
</body>
</html>
um developing a website and that should has few tabs according to my dream,
but thing is when I click a tab it shows only contents which is between heading tag,not P tags,
Here's my code.please help me to fulfill my dream :-D
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text</p>
</div>
</div>
</div>
</div>
I think you were missing the jQuery link.
The code works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text in p</p>
</div>
</div>
</div>
</div>
Output :
You need to Enable tabbable tabs via JavaScript
<script>
$('.nav-pills a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>