I'm having an issue with the responsiveness of a website I've created. I'm using Bootstrap 5. In the desktop view, everything is well aligned, but in the mobile view, the text isn't aligning with the logo properly. I've attached screenshots…
I have the following codes not working correctly except Mozilla Firefox browser. I'm using Bootstrap 5.3. Anyone can help me for a working tablist with select option? Here is my codes not working in google chrome and other browser except…
TLDR: I want to change Bootstrap SASS variable value depending on a CSS selector PS. I know I can manually assign the color directly but I'm trying to understand how to override Bootstrap CSS properties by using the SASS variables…
so i want to add and remove active class from tag i created with bootstrap, i have try with javascript method but it still not works. can anyone help my problem? here is my html code, <div class="container-fluid"> <div class="row…
I have Bootstrap 5 website template and I need to add text with white background on the center image. And in this case, I see a white color instead image but I want to white rectangle with a title and…
I am using a Bootstrap dropdown like this: <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#" (click)="getMyValue('myvalue')">My Value</a> </li> <li> <a class="dropdown-item" href="#" (click)="getMyValue('someothervalue')">Some Other Label</a> </li> </ul> and the function looks like this: getMyValue(todo: string) { console.log("selected value is:", todo); console.log("selected…
I tried to change the color of the letters when the cursor is on them, but I can't do it. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: #ffc107; } <link rel="stylesheet"…
I would like to have two columns in bootstrap that both use a different container's max-width. The problem with absolute position in this case is that the container doesn't know what the height of the content would be. So that…
I have a page with a Bootstrap 4 toast where I set the toast's postion as postion: fixed. The whole toast part looks like this: <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw;…
I want to display dynamic list of cards horizontally. The large will be 3 by 3 for each row then in small screens it will be full column 12. <ul class="list-group list-group-horizontal"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li…