This bootstrap alert button is not closing the alert. please help.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Did you include these in your head tag?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<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>
Working fine for me...
<html>
<head>
<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>
<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 class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those
fields below.
<button
type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
</body>
</html>
Related
Do you know how I can lower the title to the same position as the button? I would like to do this with bootstrap without using css.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5 ">
<h3 class="text-center">Title </h3>
<button type="button" (click)="goBack()" class="btn btn-primary m-1">Back</button>
</div>
</div>
</body>
</html>
Add properties like
text align-self-center m-1 to h3 tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5 ">
<h3 class="text-center text align-self-center m-1">Title </h3>
<button type="button" (click)="goBack()" class="btn btn-primary m-1">Back</button>
</div>
</div>
</body>
</html>
<h3 class="text-center">Title </h3>
Give this element position relative and give some top CSS as px as you need to position on there.
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>
This question already has answers here:
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Bootstrap 5 navbar button collapse doesn't work
(1 answer)
Closed 1 year ago.
Tried several things - no errors related to script calls but nothing is collapsing. Based on every tutorial that I can find this should be working.
What am I doing incorrectly?
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-toggle="collapse" data-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
Try this:
<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.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Tester</title>
</head>
<body>
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Test Me
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Testy test test text that was collapsed.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
It should be data-bs-toggle="collapse", data-bs-target="#content.
<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.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Tester</title>
</head>
<body>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Your attributes are incorrect.
You need to add -bs- to these two:
data-bs-toggle="collapse"
and
data-bs-target="#content"
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
I have an accordion written like this
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
<div class="accordion-body">
<iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
When i click the first time on the Accordion header, the accordion won't open and the following exception will be threw
Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element. selector-engine.js:18:59
Any idea of the reason? As far as I noticed, this is the minimum code I had to wrote in order to make the bug present
TLDR: A # is missing in the data-bs-parent attribute.
According to the Bootstrap documentation, the data-bs-parent accepts a
selector | jQuery object | DOM element
When you pass in data-bs-parent="id" for the attribute, it is plain text hence belongs to none of the categories. As a result you get the Uncaught TypeError: Illegal invocation
Working example:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="#editTournamentAccordionWrapper">
<div class="accordion-body">
Card Body
<!-- <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>-->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.