6,456 questions
2
votes
0
answers
36
views
Error: NG0203: inject() must be called from an injection context
In my Angular and Bootstrap project, I implementet a table according to bootstrap documentation. Since i added Pagination to the table i get the error-message following error message:
ERROR Error: ...
- 21
0
votes
1
answer
12
views
ASPX Page slides from top to current location after every post back to server using bootstrap 5
Using ASP.Net 4.8
I just upgraded from Bootstrap 3 to Bootstrap 5. I am not using carousel. Every time I do a post back to the server, the page moves to the top and then slides down to the last ...
- 301
0
votes
0
answers
17
views
Sass @use 'bootstrap/scss/bootstrap' failing with 'Can't find stylesheet to import' in minimal project
I'm encountering a persistent issue where Sass is unable to resolve the import path for Bootstrap, even in a minimal test project. I'm using gulp-sass with Dart Sass.
Here's the problem:
I'm trying to ...
- 860
0
votes
1
answer
53
views
How to left justify content displayed next to a sidebar
I am attempting to use code from a Bootstrap 5.2 sidebar example I really like, but there's a small issue with it.
When the sidebar is minimized, it displays a list of FontAwesome icons for each item ...
- 139
0
votes
1
answer
55
views
Bootstrap 5 content function only gets called once
I have the following code that creates and initializes a number of Bootstrap popovers.
I need the text to be updated each time it is shown, so I thought being able to set content to a function would ...
- 67.3k
0
votes
0
answers
23
views
Upgrade Bootstrap 5.0 to 5.3 Missing CSS Variables
I just upgraded my website from Bootstrap 5.0 to Bootstrap 5.3. It seemed like it would be straight forward, just swap out the 5.0 files for 5.3 files, but when I do so, my accordions and modals ...
1
vote
1
answer
61
views
How to dynamically change Bootstrap v5.3 primary color at runtime in Angular v17?
I am working on an Angular application that uses Bootstrap for styling. I want to allow users to select a theme color, and dynamically update the Bootstrap primary color (--bs-primary) at runtime ...
- 727
1
vote
1
answer
34
views
Bootstrap class "form-control" causes page to grow past viewport on iPhone
I have a Bootstrap 5 project. My footer contains 3 columns. The 3rd column contains a form field and submit button for MailChimp. I am not using mailchimp's css. I don't see any problems when using ...
- 31
0
votes
0
answers
19
views
carousel with text adapt to max height
I'm trying to make an automatic carousel of my last updates (short updates), but each update have a different height, causing the page to move at each slide. How to apply max item's height to my ...
- 393
0
votes
0
answers
63
views
No Output from Template
I am passing the information to my template, but when i load the local server I cannot see anything when the expected output is a list of passwords that are being stored in my database. I put in a ...
0
votes
1
answer
54
views
Laravel 101, URL to Route to Controller to View
I'm working on a Laravel project that was working fairly well until I attempted to add Bootstrap 5.3. The problems are certainly something that I introduced, but the entire project became unstable ...
0
votes
1
answer
35
views
How Can I Reliably Hide a Bootstrap 5.3 Modal on Back Navigation in a Multi‑Page App?
I'm using a Bootstrap 5.3 modal as a preloader when a user submits a form in my multi‑page application. The modal shows while waiting for the server response and then the user is taken to a new page. ...
- 3,535
-1
votes
1
answer
53
views
BooleanField form Checkboxes always empty in Django
I have a Model form that has some checkboxes.
The database has values for these records for all rows.
My form displays with empty checkboxes all the time.
I can submit values via the checkbox and the ...
- 1
0
votes
0
answers
27
views
How to tree shake unused SCSS classes in Astro
I'm using Bootstrap in Astro, importing the modules I need and customising them in SCSS. But I have noticed that the site is noticeably slow due to Bootstrap's bloat.
How can I tree shake the unused ...
0
votes
2
answers
78
views
How to add a gap between column without moving to another row in bootstrap 5?
I'm working on a testimonial section that has a structure like this :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-...
- 13
1
vote
0
answers
18
views
Wrong order of css in Bootstrap Subtheme
I work on many installations with a package of Bootstrap (Barrio) and a custom subtheme + paragraph + layout paragraph.
In the subtheme, I have the following settings for breakpoints.
info.yml:
...
- 71
0
votes
1
answer
37
views
Layer image on top of another in bootstrap studio - prevent 2nd image from moving
I want to have one image on top of another. I managed to do it using DIVs and Margins but when the page size changes, the guy with the lawnmower moves. How do I prevent that from happening?
Here is my ...
- 1
0
votes
1
answer
35
views
NextJS conditionally import bootstrap based on HTML document direction
I have multi-lingual app and i want to import bootstrap.min.css if locale is en and import rtl.min.css if locale is ar:
layout.js
if (locale === "ar") {
import("bootstrap/dist/css/...
- 218
0
votes
1
answer
52
views
Item location within a Div with Bootstrap 5.3 not displaying as I would expect
To give you a bit of background I am not new to development and have done a variety of different languages however my level of HTML knowledge while growing is still very much more towards the basic ...
0
votes
1
answer
54
views
Bootstrap5 datetime picker calendar does not appear when click calendar icon ASP.NET Core 8 MVC
I have an ASP.NET Core 8 MVC application and I implemented a bootstrap datetimepicker (v4.17.47) and it showed the calendar. I also used font-awesome (v 4.7.0). Everything worked as expected. But when ...
- 225
0
votes
1
answer
66
views
How can I implement nested dropdown menus in Bootstrap 5, ensuring that submenus open and close properly?
How can I fix a multi-level dropdown issue in Bootstrap, where submenus do not open as expected on click?
I tried making a multi-level dropdown menu in Bootstrap isn't functioning as expected. The ...
0
votes
0
answers
33
views
bootstrap autogrid computer, force grid on mobile
I'm trying to get a view for both computer & mobile :
Computer : 7 columns for each day of week
Mobile : 2 columns with the first one having 4 elements, second one having 3 elements.
Here is ...
- 393
0
votes
1
answer
33
views
My hamburger menu is stuck open and I don't know how to fix it
So I'm making a site in the newest version of Bootstrap for uni but my hamburger menu for my navigation is stuck open, and when you scroll it stays on screen and over all the other content. Please ...
0
votes
1
answer
56
views
HTML & CSS Page with bootstrap - 100% height and box-shadow
I have created an HTML page using Bootstrap and the following body in CSS:
body {
box-shadow: inset 0 0 4rem rgba(0, 0, 0, .5);
}
...to get a shadow around the entire body area. The code currently ...
- 19
0
votes
2
answers
76
views
Bootstrap 5.3.x: Why does "w-100 d-block d-md-none" not work when I try to break a column to a new line?
I am trying to create a list of images and each occupies 4 columns in medium and larger screens and occupies 12 columns on smaller screens.
However, when I try to resize the screen to smaller size (...
- 1
1
vote
1
answer
84
views
Form validation for text area inputs fails if user enters newline character only
I'm building a form using Bootstrap 5 custom form validation. The issue I'm having is that if a user clicks into a textarea input that requires a value, hits "enter" to create a new line, ...
- 321
0
votes
1
answer
47
views
Navbar toggler icon doesn't close when it is clicked
I am looking for hours to fix an issue has appeared in the navbar-toggler in bootstrap version (5.3) in viewport of mobile.It opens when it is clicked but it doesn't close when it is clicked again.
I ...
- 3
-1
votes
0
answers
30
views
On upgrade to Bootstrap 5, bs.modal data is not on element
I have some legacy code which I am trying to update from bootstrap 3.4.1 to 5.3.3. Upon upgrading, a modal in my application no longer appears and there's an error in the console. On investigating, it ...
- 4,309
-1
votes
1
answer
46
views
Tiling and row sizing in Bootstrap 5 using the grid system
I am trying to recreate the attached screenshot using Bootstrap. Unfortunately I'm struggling with the grid system, mostly with the row height and with the actual tiling of it all.
I would either like ...
2
votes
1
answer
51
views
I am trying to use the Bootstrap inverse menu used the same code but not working
I am trying to create menu with inverse i.e. with black background and white font style. I used the sample code same but its not shows the proper menu.
What I am missing here?
<!doctype html>
&...
0
votes
2
answers
46
views
Bootstrap: Navbar: How can I justify-content-end a collapsible menu?
In Bootstrap, in a Navbar, how can I justify-content-end the content of a collapsible menu?
In the minimum working example below, the line:
<div class="collapse navbar-collapse text-end" ...
- 605
1
vote
1
answer
47
views
Bootstrap 5 - text-end class is not properly aligned
I'm having an issue in properly setting my text-align to the right using Bootstrap 5. After some investigating I thought by adding class=text-end from this question would help me move the total to the ...
- 189
1
vote
1
answer
170
views
Angular 19 - Customize Bootstrap theme
I want to customize the Bootstrap theme in my application so I created this file: src/bootstrap.scss and updated the styles value in the angular.json file like this "styles": ["src/...
- 729
0
votes
1
answer
26
views
Bootstrap input-group align right inside td
I am using Bootstrap 5 to display a table with a group of buttons (input-group) on the last column. By default the entire input-group is left aligned and I am not able to align it to the right (the ...
- 87
0
votes
1
answer
58
views
Pagination Issue with Array in Livewire 3.x :Uncaught Could not find Livewire component in DOM tree
I'm working with Livewire 3 and facing an issue when paginating a user list. I’ve applied the WithPagination trait and set the pagination theme to Bootstrap, but the pagination links don’t update the ...
0
votes
0
answers
23
views
Update Bootstrap 3 to Bootstrap 5 [duplicate]
We have an application that has been running well using java spring mvc. This application uses a Bootstrap template from Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3....
-1
votes
1
answer
89
views
Wrong ID is being returned when clicking button
product cardsI need a help of solving my below issues:
I have generated dynamically cards with javascript and try to get the id when product is clicked.The results what i Have done are:
1)when click ...
- 3
0
votes
1
answer
27
views
unable to select top icon in a vertical stack using bootstrap
I'm trying to create selectable icons to initiate the sorting of a date column. I'm using Bootstrap 5 and font awesome icons. Visually, everything is fine.
<style>
.sort-wrapper {
...
- 195
0
votes
1
answer
106
views
Custom Bootstrap color theme with Rails 8
I created a new Rails 8 app with bootstrap css:
rails new my_app -c="bootstrap"
and Bootstrap worked out of the box. It created an application.bootstrap.scss file that included:
@import '...
- 400
0
votes
1
answer
38
views
How can I align my Bootstrap container to fit the full width of the webpage?
I am new to React, Bootstrap, Typescript, and web development in general, but I am working on building up my skills by building a basic webpage. Right now I am stuck on trying to get a Bootstrap ...
- 149
1
vote
0
answers
64
views
Bootstrap v5 Carousel not working in angular v19 [closed]
Currently in an angular v19.1.5 project, using latest bootstrap version v5.3.3
The js for the carousel doesn't seem to work for me. It slides to the right and then comes back right away causing a ...
- 31
0
votes
0
answers
36
views
Dealing with images that are different orientations row-cols responsiveness
I have the following HTML / Bootstrap code.
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-1">
@foreach (var image in Images.OrderByDescending(x=>x.Date))
{
...
- 334
2
votes
3
answers
64
views
Bootstrap modal not showing in React
When I click on the launch demo modal button the modal is not showing. I have already installed bootstrap in Node.js and import it in index.js. I don't know why isn't it working.
import React, { ...
0
votes
1
answer
49
views
How can I use Bootstrap's grid layout to achieve similar results as using justify-content: space-around flexbox property?
This is part of an online exercise where I need to style the webpage using only Bootstrap.
The code is working fine, but I want to apply a Bootstrap class for its Grid layout which contains the cards ...
- 45
0
votes
1
answer
26
views
Show text in 3 columns
I have large piece of text. The idea is that I want to show this text in 3 columns of col-lg-4. Like a magazine user starts reading first column and second continues next to each other.
Is there a ...
- 683
0
votes
0
answers
63
views
Bootstrap 5 Carousel: Text and Image Next to Each Other
I'm trying to create a custom carousel using Bootstrap 5, where each slide contains text and an image displayed side by side. Everything is working as expected, and the slides are positioned correctly....
- 742
0
votes
0
answers
35
views
Bootstrap 5.3 modal with background interaction
From what I can tell, specifically in anything over Bootstrap 5.0, it is very difficult to remove the modal backdrop and allow interaction with the background elements of the page. Yes, you can create ...
- 385
0
votes
0
answers
36
views
Bootstrap 5.3 Dropdown doesnt open (react, typescript)
I tried to place a simple dropdown menu in my navbar, but somehow it is not opening. I am very new to coding and webdev. With the imports it should normally work. I checked if Popper is installed.
...
2
votes
1
answer
48
views
VS 2022 ASP.Net Core MVC Simple Bootstrap Menu Not Working
I have a simple ASP.Net Core 8 site created in VS 2022. I have installed Bootstrap 5.3.3, jQuery 3.7.1 using libman and copied the simplest Menu sample from GetBootstrap. When the screen width is ...
- 37
0
votes
0
answers
27
views
Why is Yii2 Bootstrap 5 adding mb-3 and invalid-feedback div
I have a Yii2 Advanced Template setup using Bootstrap 5.
When adding a standard form field like this:
<td><?= $form->field($model, 'customer_code')->textInput([
'...
- 510