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>
Related
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"
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>
I'm having a trouble with no scroll bar showing up on my page when I resized the web page. this page was built up with bootstrap and used CDN as an option to install, so i have nothing to do with the css, any help would be highly appreciated, thank you so much
the code--
<!DOCTYPE HTML>
<html lang="id">
<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>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You had few mark-up error in your code--you forgot to close the nav and head tag.
now working fine
<!DOCTYPE HTML>
<html lang="id">
<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>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
height: 1000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
</body>
</html>
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
I'm using a Bootstrap 3 navbar static top with nav pills. And that it works.
I cannot make data toggles working when the navbar is fixed to top.
This is the snippet with the navbar static top:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<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><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
And here it does not work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
The data toggle is working, it's just that your content is overlaid by the navbar. Take a look at the docs:
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Example here: http://www.bootply.com/pGzO62Dp9L
When the navbar is fixed, the next div starts at the same spot. So the pills are working, but the navbar is covering the content. You need to add padding to the top of your container.