My bootstrap navbar dropdown menu is disapearing, I can see the animation when I open/close it, but then it disappears. I can't figure out why.
I'm working in a school project, my classmates used JS to add some more fields to the navbar, I don't think this causes the problem, but i'm adding it just in case, here's the full page :
Login
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../files/logoSite.png">
<link rel="stylesheet" href="../../View/CSS/navbar.css">
</head>
<body>
<?php
session_start();
include_once("../../Model/Utilisateur/User.php");
include_once("../../Model/Utilisateur/UsersModel.php");
if(isset($_POST['Deconnexion'])){
session_unset();
session_destroy();
header("Location: ../../Controller/Accueil/HomePageController.php");
}
$userLoggedIn = isset($_SESSION['user_id']);
$res = GetRole($_SESSION['user_id'])[0]["idRole"];
echo ("<p id='currentRole' type='hidden' style= 'display :none;'>".json_encode($res)."</p>");
?>
<nav class="navbar navbar-expand-sm bg-dark-subtle">
<a class="navbar-brand " id="backHome" href="../../Controller/Accueil/HomePageController.php" >
<img src="../../View/files/logoSite.png" width="200px" height="133px">
</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 id="navbar" class="navbar-nav">
<li class="nav-item">
</li>
<?php if ($userLoggedIn): ?>
<li class="nav-item mt-auto">
<a class="nav-link fw-bold" href="../../Controller/Tournoi/ControllerMatchPlayer.php">Les matchs</a>
</li>
<?php endif; ?>
</ul>
</div>
<div class="p-xl-4">
<ul class="navbar-nav">
<?php if (!$userLoggedIn): ?>
<li class="nav-item p-xl-1">
<button name="Connexion" id="Connexion" class="btn btn-primary" >Connexion</button>
</li>
<li class="nav-item p-xl-1">
<a href="../../Controller/Connexion/RegisterController.php" class="btn btn-primary">Inscription</a>
</li>
<?php else: ?>
<li class="nav-item p-xl-1">
<form method="post">
<input name="Deconnexion" type="submit" value="Deconnexion" class="btn btn-danger">
</form>
</li>
<li class="nav-item p-xl-1">
<a href="../../Controller/Connexion/RegisterController.php" class="btn btn-primary">Inscription</a>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
<script>
const backHome = document.querySelector("#backHome");
const goConn = document.querySelector("#Connexion")
backHome.addEventListener("click",function (){
window.location.replace("../../Controller/Accueil/HomepageController.php");
});
<?php if (!$userLoggedIn): ?>
goConn.addEventListener("click", function (){
window.location.replace("../../Controller/Connexion/ConnectionController.php");
});
<?php endif; ?>
function toggleButtonState() {
console.log(document.getElementById('userState').outerText);
if (document.getElementById('userState').outerText = "null") {
//gestion du bouton de connexion
goConn.setAttribute("disabled",true);
goConn.classList.remove("btn-primary");
goConn.classList.add("btn-secondary");
}
else {
//gestion du bouton de dรฉconnexion
goDeco.setAttribute("disabled", true);
goConn.classList.remove("btn-secondary");
goConn.classList.add("btn-primary");
}
}
let role = document.querySelector("#currentRole").innerText;
const navbar = document.querySelector("#navbar");
role = JSON.parse(role);
if (role == 0 ){
let li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
let menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Vรฉrifier Joueur";
menu.setAttribute("href","../../Controller/Utilisateurs/valideInscriptionController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Modifier joueur";
menu.setAttribute("href","../../Controller/Utilisateurs/ModificationController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Gรฉrer Contribution";
menu.setAttribute("href","../../Controller/Utilisateurs/ContributionConsultController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Gรฉrer Parcours";
menu.setAttribute("href","../../Controller/Parcours/ParcoursController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Mail";
menu.setAttribute("href","../../Controller/Mail/ControllerMailing.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Modifier les rencontres";
menu.setAttribute("href","../../Controller/Tournoi/ControllerMatch.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Les Equipes";
menu.setAttribute("href","../../Controller/Equipe/teamsController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Crรฉer Tournoi";
menu.setAttribute("href","../../Controller/Tournoi/tournamentController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Modifier Tournoi";
menu.setAttribute("href","../../Controller/Tournoi/tournamentModificationController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Modifier Equipes sur les tournois";
menu.setAttribute("href","../../Controller/Tournoi/verifyTeamTournamentController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Inscrire รฉquipe au tournoi";
menu.setAttribute("href","../../Controller/Tournoi/addTeamTournamentController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Classement";
menu.setAttribute("href","../../Controller/Classement/ClassementController.php");
li.appendChild(menu);
navbar.appendChild(li);
}
else if (role == "1"){
let li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
let menu = document.createElement("a");
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Modifier mes infos";
menu.setAttribute("href","../../Controller/Utilisateurs/updateDataController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Mes Equipes";
menu.setAttribute("href","../../Controller/Equipe/myTeamController.php");
li.appendChild(menu);
navbar.appendChild(li);
li = document.createElement("li");
li.setAttribute("class","nav-item mt-auto");
menu = document.createElement("a");
menu.setAttribute("class","nav-link fw-bold");
menu.innerText = "Inscrire รฉquipe au tournoi";
menu.setAttribute("href","../../Controller/Tournoi/addTeamTournamentController.php");
li.appendChild(menu);
navbar.appendChild(li);
}
</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
I tried playing around with bootstrap classes and to add a css file with #navbarNav{z-index:10} (nothing is higher than that) for it to overlap (if that's the problem).
Below is my CSS used in Angular application, menu is not hovering over all the controls in the angular component
I have custom files such as:
I want to add them locally from my assets folder inside src to my index.js.
I have tried adding them to my index.html, but the problem is I have to move my assets folder to a public folder.
When I try adding them using an import statement, it fails to compile.
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like this:
bootstrap: 'file:/path/to/your/repo' npm installHow can I display the dynamic content of PHP with bootstrap pagination.The result is displaying using ajax call in div id 'msrResult', how to relate with bootstrap pagination code. Here my code:
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master /lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
$('#page-selection').bootpag({
total: 23,
page: 1,
maxVisible: 10
}).on('page', function(event, num){
$("#content2").html("Page " + num); // or some ajax content loading...
});
</script>
</body>
</html>
<div id=msrResult></div>
I've created a Rails 7 app and have thus far, only configured it to use Bootstrap5.3.2 (Bootstrap appears to be working correctly). I've attempted to install ActionText but the textbox is not displaying. I've gotten ActionText to work in previous versions of Rails.
Here is my app/assets/javascript/application.js file...
import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"
import * as bootstrap from "./bootstrap"
import * as popper from "./popper"
Here is my package.json file...
{
"name": "app",
"private": "true",
"dependencies": {
"@popperjs/core": "^2.11.8",
"@rails/actiontext": "^7.1.2",
"autoprefixer": "^10.4.16",
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.2",
"esbuild": "^0.19.7",
"jquery": "^3.7.1",
"nodemon": "^3.0.1",
"postcss": "^8.4.31",
"postcss-cli": "^10.1.0",
"sass": "^1.69.5",
"trix": "^2.0.8"
},
"scripts": {
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
"build:css": "yarn build:css:compile && yarn build:css:prefix",
"watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"",
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets"
},
"type": "module",
"browserslist": [
"defaults"
]
}
Here is my config/importmap.rb file...
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.esm.js"
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
Here are my views/layouts/application.html.erb imports...
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true, type:"module" %>
This is what my action_text box looks like. Under "Description" is where the textbox is supposed to render...
What have I tried so far? I've tried modifying my imports, adding the "type:module" to the package.json file, and reinstalling my package.json file to no avail.
I have an existential question! I don't understand why when I want to redirect to the other page in my component I have to click the button twice for it to work! the code works fine! It's just that detail that I have to click the button twice for the redirection to work. I thank you in advance for the help provided :)!
const navigate = useNavigate();
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const getData = async () => {
try {
const response = await fetch('http://127.0.0.1:8000/api/filter', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (!response.ok) {
throw new Error('Error');
}
const d = await response.json();
setData(d);
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
const handleSubmit = (event) => {
event.preventDefault();
getData();
if (!loading) {
console.log(data);
navigate('/search', { state: { event: data } });
}
};
<Card className="text-center">
<Card.Header className='title_search'>Search Event</Card.Header>
<Card.Body>
<Form onSubmit={handleSubmit}>
<Form.Group as={Row} className="mb-3" controlId="formEventName">
<Form.Label column sm="2">Name</Form.Label>
<Col sm="10"><Form.Control name="name" type="text" placeholder="Name" value={formData.name} onChange={handleInputChange}/></Col>
</Form.Group>
<Form.Group as={Row} className="mb-3" controlId="formEventData">
<Form.Label column sm="2">Data</Form.Label>
<Col sm="10"><Form.Control name="date" type="date" placeholder="10/20/30" value={formData.date} onChange={handleInputChange}/></Col>
</Form.Group>
<Form.Group as={Row} className="mb-3" controlId="forEventLocation">
<Form.Label column sm="2">Place</Form.Label>
<Col sm="10"><Form.Control name="place" type="text" placeholder="Ex: Funchal.." value={formData.place} onChange={handleInputChange}/></Col>
</Form.Group>
<Button type="submit" variant="primary" className='search_button'>
Search
</Button>
</Form>
</Card.Body>
</Card>
I have recently started using the scss files, especially to customize Bootstrap.
To compile my scss files (and also bootstrap) i use sass from the command line.
Example :
sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none
mycustom.scss is something like that:
$theme-colors: (
"custom-primary": "...",
"custom-secondary": "..."
);
....
....
@import "bootstrap";
This way i can customize bootstrap to my pleasure, without problems.
Today, however, i realized that a graphic component (custom-select) was not rendered correctly. After some research i found that this was caused by the lack of Autoprefixer during compilation, and therefore some css properties were not added to my bootstrap.min.css.
I found this on Bootstrap documentation: https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer
But i can not find a solution to compile Bootstrap (with sass) using Autoprefixer.
I am creating a SQL where clause interface with bootstrap 4.6 where the container has 1+ rows consisting of columns: left and right operands separated by an operator dropdown. The operands are nav-tabs and let the user select between a table/attribute dropdowns, and a literal value. I have a question about how data-target is resolved when the user selects a tab. I would like to do this using data-target attributes that reference classes rather than ids so that I can create replicates without having to generate unique ids. I have a secondary (minor) issue with selectpicker initialization.
Components of the comparison are nested inside column divs along these lines:
<div class="container">
<div class="row comparison">
<div class="whereLHS col-md"> ... </div>
<div class="col-"> operator spec </div>
<div class="whereRHS col-md"> ... </div>
</div>
</div>
When the data-targets reference ids, as in the slightly simplified fragment from the left-hand side specification below, everything works. See this jsfiddle for a functioning specification with all three columns.
<div class="WhereLHS col-md">
<nav>
<div class="nav-tabs nav" role="tablist">
<button class="nav-link active" data-toggle="tab"
data-target="#lhswhereTblAttr" type="button" role="tab">
Field
</button>
<button class="nav-link" data-toggle="tab" data-target="#lhswhereVal"
type="button" role="tab">
Value
</button>
</div>
</nav>
<!-- Operand to a where clause -->
<div class="tab-content">
<!-- Table/Attribute specifiers -->
<div class="tab-pane active whereTblAttr" role="tabpanel"
id="lhswhereTblAttr" aria-label="select table attribute">
<select class="selectpicker table" data-title="table" data-live-search="true">
<option>some table</option>
<option>yea another table</option>
</select>
<select class="selectpicker attr" data-title="field" id="lhswhereVal"
data-live-search="true">
<!-- updated by JS to contain current table attriubtes -->
<option>selected attr 1</option>
</select>
</div>
<!-- Value operand -->
<div class="tab-pane whereVal" role="tabpanel">
<input class="form-control valueToCompare" type="text" />
</div>
</div>
</div>
When I change the data-targets to specify classes rather than ids (see this revised JSFiddle example), I find that whichever tab I mark as active functions properly, but the inactive tab becomes associated with the left-hand side fields, suggesting that the class search may be global, or at least at a higher level than the div which contains the <nav> and the the <div class="tab-content"/>. I removed the id attributes and changed the data-targets in the nav-link tab buttons to reference these via class selectors, e.g. "selectpicker.table". When I run a jquery to find classes rooted at the operand div, I can identify the targets appropriately. I had hoped that in the running page the target search would start with siblings of the nav element, but this does not appear to be the case. I think that it is finding elements on both the left and right-hand sides and using the first one. As can be seen in the JSfiddle, the dropdowns are no longer separate and the right tab-pane continues to show the text input box when the field (table/attr) tab is clicked. Is there a way to specify the target appropriately? I'd like to keep the left and right hand sides separate as well as create mulitple instances of these without having to generate unique ids each time (which of course can be done if that's what it takes).
minor issue: I also noticed that selectpicker was not initializing correctly. When the page loaded, the table and attribute selectors did not display even when their tab was set to active. Switching to the other tab and switching back would cause the select elements to display. I found that removing fade from the tab-pane div (no longer in the fiddles) resolved the problem, but I would be interested in understanding if this is a bug or an incorrect specifciation on my part.
Thank you all for your help.
Having problems with BS 5.0.2 tooltip show and hide delay. According to BS documentation it's possible to setup the show and hide delay in attribute as an object like below:
data-bs-delay:{show:2000, hide:1000}
or
data-bs-delay={show:2000, hide:1000}
But the tooltip is shown/hidden without any delay or the console shows "Uncaught TypeError: TOOLTIP: Option "delay" provided type "string" but expected type "(number|object)"."
While setting up only
data-bs-delay=2000
gives the delay but it's the same for show and hide.
So far I have tried all quotation marks variations in the attribute as suggested on the internet but to no joy. I have come across solutions for that but using jquery which is something I'm not interested ATM.
Is it possible to set up the different times for tooltip show and hide delay in the attributes?
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})#container {
margin: 5em;
width: 15em;
cursor: pointer;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div id="container" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-html="true" data-bs-delay='{"show":2000, "hide":1000}'
title="Delayed tooltip.">Hover here to show a tooltip after 2 seconds and to hide it after 1 second</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>I have not been able to find an example of bootstrapping correlations between two data frames. Key posts I have looked at are (1) https://stats.stackexchange.com/questions/20701/computing-p-value-using-bootstrap-with-r/ (2) How to bootstrap correlation using vectorised function applied to large matrix?
NB/ p values here need to be obtained through calculating the ratios of how many times the absolute bootstrap test statistics exceeded the theoretical ones,
Fortunately, I have also come across a recent example of using Map to apply the correlations between two data frames. How to use lapply to replace nested for loop to get correlations between two data frames?
I have large datasets that will be run in a unix based HPC and also a Windows OS option for running the calculations on smaller datasets in R.
D1 <- data.frame(matrix(runif(10*10, 0, 2), ncol=10))
D2 <- data.frame(matrix(runif(10*16, 0, 2), ncol=16))
colnames(D1) <- paste0("a", 1:ncol(D1))
colnames(D2) <- paste0("b", 1:ncol(D2))
compare <- expand.grid(colnames(D1), colnames(D2))
need_modify <- Map(function(x,y) cor.test(D1[, x], D2[, y], method="spearman"), compare$Var1, compare$Var2) %>%
lapply(`[`, c('estimate', 'statistic', 'p.value')) %>%
sapply(unlist) %>% t() %>% as.data.frame() %>% mutate(Var1=compare$Var1, Var2=compare$Var2)
boot_df <- function(x) x[sample(nrow(x), rep = T), ]
#number of bootstraps
R <- 100
I am stuck on modifying the above so that it run successfully using parallelisation for Unix based OS (mclapply or mcMap) and also a separate one for Windows (clusterMap or future_mapply).
Grateful for any pointers in the right direction or an example elsewhere.
I want to place a small div of this size col-xs-3 over a col-xs-12 background image but it keeps pushing it directly under the image rather than over it.
Here is my code...
HTML:
<div class="hero-container">
<div class="row-fluid">
<div class="span12">
<div class="image wow bounceInUp"><img class="bg-image" src="hero.jpg">
<div class="col-xs-3 pull-right contact-menu">
<ul>
<li>Phone: xxxx xxx xxx</li>
<li>Email: [email protected]</li>
</ul>
</div>
</div>
<div class="caption post-content wow bounceInUp">
<h1>UX Design & Development</h1>
</div>
</div>
</div>
</div>
CSS
.bg-image {
position: relative;
width: 100%;
opacity: 0.75;
background-size: cover;
src: url(hero.jpg);
z-index: 0;
}
.hero-container{
position:relative;
}
.post-content {
top:-10px;
left:40px;
position: absolute;
font-size: 2.5vw;
text-align: center;
}
.contact-menu {
background-color: #d6d6d6;
padding: 15px;
display: block;
z-index: 3;
}
I'm reading the documentation of Bootstrap 5.3 in order to enable the toggle between dark and light theme using JavaScript. I included the script in my page and added the data-bs-theme attribute to the html tag:
<!DOCTYPE html>
<html lang="it" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js" integrity="sha256-0H3Nuz3aug3afVbUlsu12Puxva3CP4EhJtPExqs54Vg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
...
then I put a button in my page:
<button type="button" class="btn btn-outline-secondary me-3" data-bs-toggle="button">Dark/light theme switch</button>
But I don't understand what attribute I should set in order to get the JavaScript working.
I have 3 questions on this code I am using from bootstrap 5.
How do I align the header to the center of the button?
<button class="accordion-button collapsed text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>ABC</h2><br /><p>Date Time</p>
</button>
I tried inserting text-center to accordion-header and accordion-button but still, it is not aligned.
I inspected the element and realized that it is in :: after which could not be seen in the HTML code. I like to check if I can move this by doing some CSS tweak?
<h2>ABC</h2>and the <p>Date Time</p>? i tried adding <br /> but still doesnt separate them.I have seen some examples for bootstrap 4 and it works to an extent but in bootstrap 5, certain classes changed the name and it is way more stubborn.
Thanks in advance.
