Having a small, weird, issue in which my drop down menu works properly once on the main page of my MVC application. If I close the drop down and try to open it again it wont work, however if I go to a different page from the drop down, I can open and close it as much as I want and it will work just fine, the issue only occurs on the main Home page of the application.
Below is my _layout.cshtml code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Name Here</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: crimson">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: antiquewhite">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" #Html.ActionLink("Home", "Index", "Home")</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #Html.ActionLink("About Us", "About", "Home")</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #Html.ActionLink("Visit Us", "Visit", "Home")</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
This is my code for the main Home page:
#{
ViewBag.Title = "Home Page";
}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="~/Images/img1.jpg" class="d-block w-100" alt="1">
</div>
<div class="carousel-item">
<img src="~/Images/img2.jpg" class="d-block w-100" alt="2">
</div>
<div class="carousel-item">
<img src="~/Images/img3.jpg" class="d-block w-100" alt="3">
</div>
<div class="carousel-item">
<img src="~/Images/img4.jpg" class="d-block w-100" alt="3">
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
My About Us and Visit Us page have the default info from Visual Studio when you first create your MVC project with prebuild views.
If additional info is needed please do let me know. Thanks in advance.
Related
I am trying to build a responsive website with bootstrap 4 that shows the sidebar links as a button toggle. My current implementation, when reduce to mobile screen dimensions, shows the sidebar links at the top of the page. Appreciate any help in converting them to a toggle.
Below is my html code:
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="https://themes.getbootstrap.com/wp-content/themes/bootstrap-marketplace/style.css?ver=1590611604">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body class="page-template-default page page-id-49440 woocommerce theme-dokan woocommerce-js dokan-theme-dokan">
<main id="main" class="site-main main">
<section class="section">
<div class="container">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav123" aria-controls="nav123" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="section pt-10 mt-md-10">
<div id="the-guide" class="container-fluid">
<div class="row justify-content-between pb-0 pb-lg-2" >
<!--<div class="col-md-3 col-xl-2 d-none d-lg-block" id="inside">-->
<div class="col-md-2 col-xl-3" id="inside">
<ul id="nav123" class=" nav flex-column ">
<li class="nav-item nav-item-heading">
Theme 1
</li>
<li class="{{ 'active' if active_page == 'page1' else '' }}" >
Page 1
</li>
<li class="{{ 'active' if active_page == 'page2' else '' }}" >
Page 2
</li>
</ul>
</div>
<div class="col-lg-9 mb-4 mb-lg-0 order-lg-2">
<h2> this is a test</h2>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</main>
<style>
.pagelink{
color: hotpink;
}
.active {
font-weight: bold;
<!--background-color: lightgray;-->
}
</style>
</body>
</html>
An example implementation where a navbar was converted to a button navbar toggle is below:
<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.0">
<title>Net Ninja Pro - the Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
section{
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
<div class="container-xxl">
<!-- navbar brand / title -->
<a class="navbar-brand" href="#intro">
<span class="text-secondary fw-bold">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row g-4 justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
Buy Now
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
I want to have a footer still at the end of the page.
Teoretically, it's working, but if I shrink the width of browser, the footer will go a little bit higher from the real end of the page.
That means, that I have some free background space under the footer - I don't want that.
Fullscreen of my page - no problem with footer
Shrinked page almost to half - problem with footer
Mobile shrinked - no problem
Here is the html code:
body
{
background-color: black;
}
.navbar
{
background-color: black;
}
.nav-pills .active
{
/* FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */
background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%);
border-radius: 2%;
}
.row.first-row {
margin-top: 1em;
margin-right: 4em;
margin-left: 4em;
}
h4.white
{
color: white;
}
#tl
/* TLAČIDLÁ "What I will learn?" */
{
margin-bottom: 1em;
margin-top: 0.5em;
}
/* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */
.info
{
margin-top: 3em;
padding-top: 2em;
padding-bottom: 2em;
margin-bottom: 130px;
}
.info p
{
padding-top: 0.2em;
}
footer
{
}
#media screen and (max-width: 768px)
{
div.col-md-4
{
margin-bottom: 1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CONFT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style_index.css">
<link rel="shortcut icon" href="images/logo_tab_icon.png" type="image/x-icon">
<script>
$(function ()
{
$('[data-toggle="popover"]').popover()
})
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="popover" title="CCNA 3"
data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/gradient_bg.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-1">Welcome to CONFT</h1>
<p>Drill your knowledge on your way to get CCNA certification.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/abstract_network.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Your job is on demand</h1>
<p>Networking field still need more and more skilled people. Join them!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/programming.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Programming in networking</h1>
<p>If you know programming, you can apply a job in this field too - because of need of automation.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row first-row">
<div class="col-md-4">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 1</h1>
<h4 class="white text-center">Introduction to Networks</h4>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal1">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 1 v7.0</h4>
</div>
<div class="modal-body">
<p>The first course in the CCNA curriculum introduces the architectures, models, protocols, and networking elements that connect users,
devices, applications and data through the Internet and across modern computer networks – including IP addressing and Ethernet fundamentals.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 2</h1>
<h4 class="white text-center">Switching, Routing, and Wireless Essentials</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal2">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 2 v7.0</h4>
</div>
<div class="modal-body">
<p>The second course in the CCNA curriculum focuses on switching technologies and router operations that support small-to-medium business networks
and includes wireless local area networks (WLAN) and security concepts. Students learn key switching and routing concepts.
They can perform basic network configuration and troubleshooting, identify and mitigate LAN security threats, and configure and secure a basic WLAN.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 3</h1>
<h4 class="white text-center">Enterprise Networking and Security</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal3">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 3 v7.0</h4>
</div>
<div class="modal-body">
<p>The third course in the CCNA curriculum describes the architectures and considerations related to designing, securing, operating,
and troubleshooting enterprise networks. This course covers wide area network (WAN) technologies and quality of service (QoS) mechanisms
used for secure remote access along with the introduction of software-defined networking, virtualization, and automation concepts
that support the digitalization of networks. Students gain skills to configure and troubleshoot enterprise networks,
and learn to identify and protect against cybersecurity threats. They are introduced to network management tools
and learn key concepts of software-defined networking, including controller-based architectures and how
application programming interfaces (APIs) enable network automation.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center info" style="background-color: white;">
<p>Hi! I'm René the creator of this site. I appreciate you visit my site. If you want to know more about me, click here.</p>
</div>
<footer class="bg-primary text-white text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
© 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D
</div>
<!-- Copyright -->
</footer>
</body>
</html>
I'm currently studying Bootstrap 4 and was creating a Bootstrap 4 template for my personal study. However, the following code creates a left to right scrollbar on the website when you look at in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Practice</title>
<meta name="viewport" content="wdith-device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
.Box{padding: 60px 10px; background: #ddd}
.Box:nth-child(even){background: #eee;}
h1, h2{margin: 30px 0;}
.container-fluid, .container{max-width:1400px;}
.carousel-indicators li {width: 10px; height: 10px; border-radius: 100%;}
/* .navbar-brand{position: relative;}
.custom-nav{position: absolute;}*/
</style>
</head>
<body>
<!-- MODAL POPUP -->
<div class="modal fade" id="modalExample">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"> Modal Title </h2>
<button class="close" type="button" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div> <!-- end .modal-content -->
</div> <!-- end .modal-dialog -->
</div> <!-- end .modal -->
<!-- MODAL END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light row">
<a class="navbar-brand col-1 border border-primary" href="#">Navbar</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-11 custom-nav border border-primary" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Tab</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
<li class="nav-item"><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Tab 2</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption"><h5>Image 1</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption"><h5>Image 2</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption"><h5>Image 3</h5></div>
</div>
</div>
<a class="carousel-control-prev"href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next"href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="jumbotron jumbotron-fluid row">
<div class="offset-1 col-10">
<h1 class="display-1">Heading 1</h1>
<p class="h1">"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p class="lead">Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
</div>
<div class='container'>
<!-- ACCORDION -->
<div class="card-group" id="exampleAccordion">
<div class="card">
<div class="card-header text-white bg-primary">
<h3 class="card-title" data-target="#card-1" data-toggle="collapse">Accordion Example 1</h3>
</div>
<div class="collapse" id="card-1">
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
<!-- Accordion은 기본적으로 열리고 닫히는 dropdown과 비슷한 기능을 가진 element라고 보면 된다. -->
<!-- Accordion은 collapse를 사용하여 만든다. -->
<div class="card-deck">
<div class="card">
<div class="card-header text-white bg-primary">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p>More Info</p>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-danger">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><span data-toggle="modal" data-target="#modalExample">More Info</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(".nav li a").on("click", function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$('.carousel').carousel({
pause: false,
});
</script>
</body>
</html>
I can't find the reason why this might be... Does anybody know why this is happening? I want the web page to be just 100% on the screen, not having to scroll from left to right.
https://jsfiddle.net/8wvszpqa/
*edit: The scrollbar I'm meaning is one the picture below:
I am not sure about your issue but tryin to help. Remove those codes from your script to get rid of the bar.
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption">
<h5>Image 1</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption">
<h5>Image 2</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption">
<h5>Image 3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
I have a pretty simple website HTML, but when I run it in localhost, all the text that isn't within something such as the navbar, jumbotron, etc, automatically appears as a link (shows up blue, underlined, clickable and goes to the top of the page) and I can't see any reason for this. I'm working in Python/Flask/Bootstrap/Virtual Studio Code. Here is a screenshot showing what I mean:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></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 active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
I don't have any links I haven't closed so I can't see why it'd do this. If anyone could help it'd be great, thanks. The link issue is in the 'three column' and 'two column' sections in the code.
Seems like you forgot to close an anchor tag somewhere. On a side note,
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
Did you close the </a> tag here?
Not an html expert but i noticed on line 84
Web Hosting
you haven't closed
as i said not html expert but i hope i helped :D
There's an extra div and missing tag. Have left comments which highlight where issues are. C
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
// Missing an </a> tag in above line, also incorrect by html5 spec to include a button within an a tag but that's a separate problem.
</div>
</div>
</div> // Extra div here
I'm trying out Angular templates by inserting
<ng-include src=="'menu.html'"></ng-inlude>
directive between header and footer of an "index.html" file. The webpage shows properly in firefox but chrome doesn't show the template. It loads a file named "index.html#" that doesn't exist in my app folder. I have absolutely no idea what happens here and found no similar case in web searches. Thanks for your help!
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<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>Ristorante Con Fusion</title>
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'dishdetail.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
menu.html:
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right"
type="button">{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="{{dish.name}}">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
It may be that angular is appending a # to the end of url strings. This was an older workaround used to prevent non-html5 browsers from sending http requests and reloading the entire page content on single page apps.
But it would be helpful to see your index.html as well as your menu.html files.
If you want to call it as tag you have to add src value
<ng-include src="'menu.html'"></ng-include>
Also, you can add ng-include as attribute:
<div ng-include="'menu.html'"></div>
Good Luck !
I think it is html5mode problem. use $locationProvider.html5Mode(true); in angular config.
The problem was that Chrome etc. don't show local files. You have to either check them with a simple webserver or add --allow-file-access-from-files to the google.exe command. Firefox gives access to local files by default. That's why the templates showed in Firefox.