I am trying to get my first Bootstrap example working. I am loading the Carousel example. I placed the css folder in the same folder as my .html file.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head co\
ntent must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesh\
eet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.j\
s"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media \
queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></s\
cript>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></scrip\
t>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<!-- NAVBAR
I'd like to know how to make the actual Carousel
Is this what you're looking for?
<!DOCTYPE html>
<html lang="">
<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>Title Page</title>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class=""></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojN2E3YTdhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
</p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNmE2YTZhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item active">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNWE1YTVhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I will share a code that i think is much more simple to understand and will help you with your Carousel example.
<!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>
Carousel Example
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
//i am not using any CSS (styling) but you can use some if you want.
</style>
</head>
<body>
<div class="container-fluid">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#myCarousel" data-slide-to="1">
</li>
<li data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
//remember to give a valid image here
<img src="Images/joker.jpg" alt="lincoln">
<div class="carousel-caption">
<p>First Slide</p>
</div>
</div>
<div class="item">
<img src="Images/joker.jpg" alt="lincoln">
<div class="carousel-caption">
<p>Second Slide</p>
</div>
</div>
<div class="item">
<img src="Images/joker.jpg" alt="lincoln">
<div class="carousel-caption">
<p>Third Slide</p>
</div>
</div>
</div>
//now we will use glyphicons to slide left and right between our pictures
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previouse</span>
</a>
<a href="#myCarousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
Related
I'm in the process of learning JS and have made a collapsable navbar. I got the menu to
open upon clicking the button, but it will not close. I've searched this site for
answers but anything I've found refers to Bootstrap. This is just pure JS. I've also
looked over my code for hours trying to spot a syntax error or anything that could be
going wrong. Any help would be greatly appreciated!
I am working on the latest version of bootstrap which 5.1 and facing this problem.
I am not able to resolve this. Navbar toggler is not closing after opening.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto ">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Help me regarding this issue.
I have included js bootstrap already.
Solution -
comment out Separate Popper and Bootstrap JS
Navbar code structure modified as per bootstrap site
Ref URLs -
https://getbootstrap.com/docs/5.1/components/navbar/#external-content
https://getbootstrap.com/docs/5.1/getting-started/introduction/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
you must remove bootstrap bundle library,then run again
The HTML spat out from a view has a lot of empty spaces and empty lines.
What and where do I need to type to make grails not to generate the empty spaces or empty lines?
Thanks!
Just for example. I have an empty domain. And then use generate-all to create all the controller and view. This is the HTML spat out from the index.gsp. If you use your mouse to highlight the HTML, you will see a lot of empty spaces.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
NewGroovyClass List
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/x-ico" href="/assets/favicon.ico"/>
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
<meta name="layout" content="main"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><img src="/assets/grails.svg" alt="Grails Logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</nav>
Skip to content…
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="/">Home</a></li>
<li>New NewGroovyClass</li>
</ul>
</div>
<div id="list-newGroovyClass" class="content scaffold-list" role="main">
<h1>NewGroovyClass List</h1>
<div class="pagination">
</div>
</div>
<div class="footer row" role="contentinfo">
<div class="col">
<a href="http://guides.grails.org" target="_blank">
<img src="/assets/advancedgrails.svg" alt="Grails Guides" class="float-left"/>
</a>
<strong class="centered">Grails Guides</strong>
<p>Building your first Grails app? Looking to add security, or create a Single-Page-App? Check out the Grails Guides for step-by-step tutorials.</p>
</div>
<div class="col">
<a href="http://docs.grails.org" target="_blank">
<img src="/assets/documentation.svg" alt="Grails Documentation" class="float-left"/>
</a>
<strong class="centered">Documentation</strong>
<p>Ready to dig in? You can find in-depth documentation for all the features of Grails in the User Guide.</p>
</div>
<div class="col">
<a href="https://grails-slack.cfapps.io" target="_blank">
<img src="/assets/slack.svg" alt="Grails Slack" class="float-left"/>
</a>
<strong class="centered">Join the Community</strong>
<p>Get feedback and share your experience with other Grails developers in the community Slack channel.</p>
</div>
</div>
<div id="spinner" class="spinner" style="display:none;">
Loading…
</div>
<script type="text/javascript" src="/assets/jquery-3.3.1.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/popper.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
</body>
</html>
I can't seem to figure out why the buttons don't work when clicked on. Both carousel items are there (confirmed by changing which is active).
I have looked on the getbootstrap website and followed the code how it explains but there is no change.
Could it be that I'm missing a link in the head that I could not find / am unaware of?
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section id="testimonials">
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="images/lady-img.jpg" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Remove the id="testimonials from this line
<section id="testimonials">
an ID should only be used once, and in this case the id testimonials is on the line that it needs to be (the buttons use this as their target data-bs-target="#testimonials")
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
I am noticing that the version number of your bootstrap CSS and JS do not match. I would swap these CDNs with the ones provided on the bootstrap 5 page this helped give the desired result.
CSS - 5.0.0-beta2
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css
JS - 5.0.0-alpha2
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<!-- A blank template with twitter bootsrap and dependencies added as external resources, to play around. Feel free to fork this and use. -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section >
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="https://picsum.photos/200/300" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="https://picsum.photos/500/300" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Change the buttons to anchors and use href. This is from bootstrap.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My header and footer menus are looking great on ios emulator all versions, but not floating on the two real devices ipad 2 or iPhone 5. What's wrong? I'm using jQuerymobile 1.4.5 and jQuery 1.9.1 with latest cordova build and platforms all updated.
I've cleaned, removed the platform, re-added it. Also looks good in browser. Any clues?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' https://www.thegatewaychurch.info/; style-src 'self' 'unsafe-inline' ; media-src * https://www.thegatewaychurch.info/; img-src 'self' https://www.thegatewaychurch.info/ data:">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width height=100%" />
<title>The Gateway Church</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" >
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul id="header-menu">
<li id="home-tab-button" class="tab-button" data-tab="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span><br/>Home</li>
<li id="address-tab-button" class="tab-button" data-tab="#address" data-tap-toggle="false"><span class="glyphicon glyphicon-book" aria-hidden="true"></span><br/>Address</li>
<li id="media-tab-button" class="tab-button" data-tab="#media" data-tap-toggle="false"><span class="glyphicon glyphicon-media" aria-hidden="true"></span><br/>Media</li>
<li id="rota-tab-button" class="tab-button" data-tab="#rota" data-tap-toggle="false"><span class="glyphicon glyphicon-rota" aria-hidden="true"></span><br/>Rotas</li>
<li id="giving-tab-button" class="tab-button" data-tab="#giving" data-tap-toggle="false"><span class=" glyphicon glyphicon-coins" aria-hidden="true"></span><br/>Giving </li>
</ul>
</div>
</div>
<div data-role="main" id="main" class="ui-content" >
<div id="rendered" >
<div id="content"><p class="center"><img src="img/thegateway-logo.png" class="responsive"/></p><h3>Join the adventure...</h3><p>The Gateway Church is a multi-cultural charismatic Church in King's Lynn, Norfolk. You'll be sure of a very warm welcome any Sunday 10am at King's Lynn Academy on Queen Mary Road.</p></div>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed" >
<div data-role="navbar" data-grid="d">
<ul id="footer-menu">
<li id="calendar-tab-button" class="tab-button" data-tab="#calendar" data-tap-toggle="false"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span><br/>Calendar</li>
<li id="news-tab-button" class="tab-button" data-tab="#news" data-tap-toggle="false"><span class="glyphicon glyphicon-newspaper" aria-hidden="true"></span><br/>News</li>
<li id="group-tab-button" class="tab-button" data-tab="#smallgroup" data-tap-toggle="false"><span class="glyphicon glyphicon-group" aria-hidden="true"></span><br/>Groups</li>
<li id="prayer-tab-button" class="tab-button" data-tab="#prayer" data-tap-toggle="false"><span id="pray" aria-hidden="true"></span><br/>Prayer</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jqueryMobile.js"></script>
<script src="js/jQueryMD5.js"></script>
<script src="js/controller.js"></script>
<script src="js/index.js"></script>
</body>
</html>
i am trying to show the Layout page content in normal razor view but it is not working. in plain html page it's working fine.
But if i want to implement this in asp.net mvc then the Layout page content is not showing
i am not sure where i am getting wrong.
This is my plain html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus / Seçkin Bütün</title>
<link href="Asset/Style/Bootstrap.css" rel="stylesheet" />
<link href="Asset/Style/Bootstrap-Theme.css" rel="stylesheet" />
<link href="Asset/Font/FontAwesome.css" rel="stylesheet" />
<link href="Asset/Style/Style.css" rel="stylesheet" />
<link href="Asset/Style/Style-Responsive.css" rel="stylesheet" />
<link href="Asset/Style/Print.css" rel="stylesheet" media="print" />
<link href="Favicon.ico" rel="shortcut icon" />
<script src="Asset/Script/jQuery.js" type="text/javascript"></script>
<script src="Asset/Script/Angular.js" type="text/javascript"></script>
<script src="Asset/Script/Bootstrap.js" type="text/javascript"></script>
<script src="Asset/Script/Spin.js" type="text/javascript"></script>
<script src="Asset/Script/Design.js" type="text/javascript"></script>
<script src="Asset/Script/Script.js" type="text/javascript"></script>
</head>
<body>
<span id="ToastBox"></span>
<section id="container">
<header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav NavMenuSide">
<li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right NavMenuRest">
<li class="dropdown NavSubMenuUser">
<span class="caret"></span> Seçkin Bütün
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-bell-o"></i> Notifications</li>
<li><i class="fa fa-cog"></i> Profile</li>
<li><i class="fa fa-key"></i> Logout</li>
</ul>
</li>
<li class="dropdown NavSubMenuNotification">
<ul class="dropdown-menu" role="menu">
<li>• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</li>
</ul>
</li>
<li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
</ul>
</div>
</div>
</header>
<aside id="SideMenu" class="SideMenu">
<div class="SideNavigation">
<ul class="Side-Accordion" id="Side-Accordion">
<li><i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class="Sub-Accordion">
<i class="fa fa-tasks"></i><span>Operation</span>
<ul class="Sub-AccordionList Active">
<li>Cost</li>
<li>Customer</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-building-o"></i><span>Definition</span>
<ul class="Sub-AccordionList">
<li>Brand</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-bar-chart-o"></i><span>Report</span>
<ul class="Sub-AccordionList">
<li>Factory</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-gears"></i><span>Administration</span>
<ul class="Sub-AccordionList">
<li>Configuration</li>
</ul>
</li>
</ul>
</div>
</aside>
<section class="container-fluid MainContent">
<div class="row">
<div class="col-sm-12">
<div class="page-header FocusHeader">
<h1>Profile</h1>
</div>
</div>
</div>
</section>
</section>
<script src="Asset/Script/Complete.js" type="text/javascript"></script>
</body>
</html>
and this is my Layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus / Seçkin Bütün</title>
<meta name="author" content="Magnifo / http://www.magnifo.com" />
#Scripts.Render("~/bundles/AssetScripts")
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Bootstrap-Theme.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Bootstrap.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Markup.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Print.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Style-Responsive.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Style.css")" />
</head>
<body>
<div>
<span id="ToastBox"></span>
<section id="container">
<header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav NavMenuSide">
<li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right NavMenuRest">
<li class="dropdown NavSubMenuUser">
<span class="caret"></span> Seçkin Bütün
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-bell-o"></i> Notifications</li>
</ul>
</li>
<li class="dropdown NavSubMenuNotification">
<ul class="dropdown-menu" role="menu">
<li>• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</li>
</ul>
</li>
<li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
</ul>
</div>
</div>
</header>
<aside id="SideMenu" class="SideMenu">
<div class="SideNavigation">
<ul class="Side-Accordion" id="Side-Accordion">
<li><i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class="Sub-Accordion">
<i class="fa fa-tasks"></i><span>Operation</span>
<ul class="Sub-AccordionList Active">
<li>Cost</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-building-o"></i><span>Definition</span>
<ul class="Sub-AccordionList">
<li>Brand</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-bar-chart-o"></i><span>Report</span>
<ul class="Sub-AccordionList">
<li>Factory</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-gears"></i><span>Administration</span>
<ul class="Sub-AccordionList">
<li>Configuration</li>
</ul>
</li>
</ul>
</div>
</aside>
<section class="container-fluid MainContent">
<div class="row">
<div class="col-sm-12">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</div>
</section>
</section>
</div>
</body>
</html>
razor view page
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test</h2>
I resolve the problem. it was the css of print.
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Print.css")" />
it will be
<link href="#Url.Content("~/Asset/Style/Print.css")" rel="stylesheet" media="print" />
There is no need to mention layout file path in Test view if you have set this path in _ViewStart.cshtml file. Please verify that, does this path exists in the _Viewstart.cshtml file or not.