Questions tagged [bootstrap-5]
Bootstrap 5 is the fifth major version of the popular front-end component library. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps. Use in conjunction with the main [twitter-bootstrap] tag.
bootstrap-5
6,339
questions
0
votes
1
answer
33
views
InnerHtml is not display on Screen
`
I am working on a web project using HTML and Bootstrap, but my content is not displaying in the browser.Here is my code:
`
let str = ""
for (let item of r.articles) {
str = ...
0
votes
0
answers
47
views
Dropdown menu overlaps with component in Vue app
I had a Vue electron app, in which Home view component has 3 child components which are in single column one after the other, I have a b-dropdown in middle component when I scroll up the opened ...
- 19
0
votes
1
answer
38
views
Premium Fullcalendar not picking up Bootstrap5 theme
This is what i'm seeing (theme does not look to be applied)
This is how i would expect it to look
I can get the bootstrap theme to work on the standard edition of fullcalendar, just not the premium ...
- 1,126
-1
votes
0
answers
12
views
How do I make a row wrap whenever I want (Bootstrap 5)
I want to have a row that only wraps below 1200px and above 1200px I want it to not wrap.
I tried it with a media query but it just ignores my line of code (flex-wrap:nowrap) and i tried using .flex-...
-3
votes
0
answers
18
views
How can I enhance Bootstrap 5.3 responsiveness on my website hosted at for diverse devices [closed]
I'm developing a responsive web page for my newbie website using Bootstrap 5.3. I want to ensure the design is optimal across various devices. What are your suggestions for improving its ...
-1
votes
0
answers
17
views
Bootstrap modal does not trigger inside a django for loop
I want to attach a modal to all images. But for some reason the modal is not triggered and the entire page becomes un-clickable.
I have made sure that all modals triggers and modal have a unique ID ...
- 51
0
votes
1
answer
46
views
Col-* using Row full width instead of Col width [closed]
I am attempting to create cards from an array, but when the "col" divs are created they are taking up the full width of the row instead of their assigned widths as per the class.
Here is the ...
- 59
0
votes
1
answer
36
views
Disable bootstrap offcanvas closure on backdrop click in Blazor .NET app
I have been trying to create an offcanvas window form and I want to make sure the offcanvas window does not close unless the user explicitly click the close button on the offcanvas window. Due to ...
- 13
0
votes
1
answer
32
views
scss sass variable not working in file for background
$enable-grid-classes: false;
$enable-cssgrid:true;
$deepBlue: #032f3e;
body {
--bs-body-bg: orange ;
}
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&...
- 13
0
votes
3
answers
36
views
Black bars appearingwhen moving image in CSS
I started using HTML/CSS, JS about a week ago and have ran into a slight problem. Im using the bootstrap carousel and its working great however when i try to move the image more to the top, i end up ...
- 51
-2
votes
0
answers
46
views
How can I install bootstrap 5 in my angular 18 project through npm? [closed]
I am trying to install bootstrap through npm into my Angular 18 project but the bootstrap library is not showing up in neither my package.json file nor node_modules.
I tried install bootstrap in my ...
0
votes
1
answer
47
views
Django django.contrib.messages add new constant messages.NOTICE
How can I create a new constant to Django messages?
I want to add a new constant messages.NOTICE in addition to the existing six constants. That I can use to display notices using Bootstrap CSS.
# ...
- 3,116
0
votes
1
answer
24
views
React can't resolve bootstrap [closed]
While following a tutorial, I began the frontend of this React project by running the following command:
npx create-react-app frontend
The instructor of this tutorial specified that he was using ...
- 2,849
-1
votes
0
answers
15
views
issue in using bootstrap in vscode
npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct ...
-2
votes
1
answer
32
views
Bootstrap class mx-auto does not center an element
So I've been working on a website that utilizes the Bootstrap 5 navbar. I basically have 3 navbar-navs, one with me-auto, one with mx-auto and one with ms-auto. The me-auto and ms-auto navbar-navs (...
- 17
0
votes
0
answers
19
views
Internal Server Error (500) with Next.js and react-bootstrap Integration
Next.js version 14.2.4 Node version: 20.10.0
When I create a next app with "npx create-next-app@latest" and npm run dev immediately after creating it, I am getting the following error.
...
0
votes
1
answer
23
views
Getting Syntax error when bundling and minifying Bootstrap 5 CSS Template
I am using a bootstrap 5 template (I have the minified version), which looks like this. This file is generated using gulp:
I want to include this file in ASP.NET MVC 5 bundle, as it adds the cache ...
- 15.3k
0
votes
1
answer
60
views
Transition on navbar in bootstrap not working
I'm having an issue with Bootstrap transitions not working properly on my navbar. Here's what I'm experiencing:
When I click the dropdown button in the navbar, the hidden elements appear, but there's ...
-1
votes
1
answer
45
views
Cannot align button in the center using Bootstrap 5 and Flexbox
I am trying to align the Define New a tag in the center but cannot understand what am I doing wrong. I am new to this concept, so please bear with me.
Here is the code
<div class="col-xl-3 d-...
- 835
0
votes
1
answer
38
views
How do I create a transition between 2 different font awesome icons?
I have this button in HTML:
<button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas"
data-bs-...
-1
votes
0
answers
82
views
Col-auto doesn't have width equal to its content when content is a nested BS grid
I'm trying to make col-auto to have width equal to its content as described in Auto-sizing
In my code snippet you can see I have a col-auto which has a nested grid for its children. The problem is ...
- 11
-2
votes
0
answers
39
views
How to create L shape Card in a right corner [duplicate]
LShape Image
I am try creating first time for facing this issue and I am try differently but not worked, use chatGPT but not get exact answer I want.
.card-custom {
position: relative;
...
- 1
0
votes
1
answer
60
views
CSS for bootstrap accordion
So I'm pretty new to css and bootstrap, and have added an accordian into my view page. I have tried to alter the original css but with no luck!
<div class="accordion accordian-flush" id=&...
-2
votes
0
answers
32
views
How to fix a logo on hero page while dropdown works, now it scrolls under [closed]
enter image description here
like here
i don't understand what to do, please if somebody knows let me know too
How to fix a logo on hero page while dropdown works, now it scrolls under
How to fix a ...
1
vote
1
answer
117
views
PrimeVue InputNumber's width exceeds the width of its parent
I have a list of items in the cart that's presented in Bootstrap rows and cols. Each item has a PrimeVue InputNumber for changing the quantity of a specific product in the cart.
Here's a StackBlitz ...
- 39
-2
votes
0
answers
30
views
How to fix this error 'String contains an invalid character'? [closed]
I'm creating an Ecom dress site and added bootstrap cards and for each card if I clicked it I routed the site to specific page related to it, initially i can load the site but it was followed after by ...
0
votes
1
answer
76
views
Transition, border-color and :focus not working on input element
I am creating a Google-like search box for an e-commerce site. However, the border-color, transition and:focus properties are not working. I will specify the problem in 3 parts-
border-color: The hex ...
-1
votes
0
answers
28
views
How do I pass the id of a record to the edit form in a CRUD app [closed]
I have this code:
<ul>
<li>
<div class="id">1</div>
<div class="name">John Doe</div>
<button class="edit&...
- 41
-3
votes
1
answer
53
views
Bootstrap 5.3 24 Grid - 5 Columns? [closed]
Is there any easy way to create 5 columns (24 grid) with Bootstrap 5.3?
I need it for resolutions of size "lg" and above, but my brain can't figure it out ^^
"col-xs-12 col-sm-8 col-md-...
- 1
-2
votes
0
answers
27
views
Bootstrap .container-{breakpoint} not working as expected [closed]
I am currently using Bootstrap 5.3. I want to use container-md class (for container to take full width [like container fluid] for screens whose size is less than md and for those screen whose size is ...
-3
votes
3
answers
95
views
How to make bootstrap datepicker be always visible/open? [closed]
Explaination
I am successfully using an 'input type=date' as a datepicker in bootstrap 5.3, to select the date for data viewing.
The problem that i have is: i have to click on it to be visible.
For my ...
- 215
0
votes
1
answer
40
views
Bootstrap overriding table styling in custom style sheet
I currently went from bootstrap v4 to v5 and and am trying to go through and fix any changes that might have been broken. I'm coming across this one that I cant figure out.
Table is not displaying the ...
- 623
-1
votes
0
answers
45
views
Bootstrap 5 image height exceeds text column next to it
I have 2 columns, one has some text and the other has an image. The image height exceeds the height of text in the column next to it. Is it possible to make both columns the same height without ...
- 31
-2
votes
3
answers
79
views
Bootstrap 5 selectpicker change background-color [closed]
The standard in our place is that every input field should be set to color lightgoldenyellow.
I cannot set the background-color of selectpicker in Bootstrap 5.
This is my code:
I have also attached ...
- 13
0
votes
0
answers
41
views
bootstrap modal, close only if input value matches
i am new with coding, very beginner level. i want simple bootstrap 5 modal, where only have two options.
input
close button
and i want close button to work only if input has value 123.
thank you
...
- 11
-1
votes
0
answers
22
views
Sticky footer without overlap
I've been scouring the internet for days trying to find a simple solution to a sticky, fixed footer for mobile web applications where the main content doesn't overlap the footer. I even asked ChatGPT ...
- 51
1
vote
0
answers
49
views
error message using offCanvas element of bootstrap
I want to make this react component using bootstraps Offcanvas-component. It's an example from the React-bootstrap webpage.
import { useState } from 'react';
import Button from 'react-bootstrap/Button'...
- 11
-1
votes
1
answer
34
views
How should I correctly display the new section?
My problem is that when I try to create a new section or any new content after the homepage, it doesn't appear on a new page but still displays on the homepage itself. I have uploaded the project to ...
-2
votes
0
answers
28
views
How to fetch dropdown from database in the Django ? (Uncaught TypeError: Cannot read properties of null (reading 'classList'))
I am fetching a dropdown from the the database in the Django, Everything is loading while I am inspecting it, but the dropdown is not opeing up.
{% if part_data.part.has_ML_Model %}
&...
0
votes
1
answer
253
views
'Form' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element
I'm encountering an issue with my Next.js application written in TypeScript after updating react-bootstrap. Following the update, I receive the following error when trying to use the Form component ...
- 933
2
votes
1
answer
32
views
Bootstrap 5.3 Accordion ignoring data-bs-parent
I'm trying to create an accordion where the headers are in a left-side column and when expanded the content appears in a right-side column. This works perfectly except I'm having to click on a header ...
- 23
0
votes
0
answers
42
views
Issues with state tracking when using an onClick event in typescript
I'm just starting to learn React/Typescript so I'm trying to create mini projects to help with my understanding. I currently have it so I can create different bootstrap 5 button types with different ...
- 21
2
votes
0
answers
52
views
Add bootswatch in my styles.scss file with Angular 17
here is my styles.css code
/* You can add global styles to this file, and also import other style files */
/* Importing Bootstrap SCSS file. */
@import 'bootswatch/dist/cyborg/variables';
@import '...
- 21
0
votes
1
answer
34
views
Bootstrap 5 floating label overflows when inside grid
This markup contains floating selects inside a bootstrap grid:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://...
- 17.6k
0
votes
1
answer
55
views
Bootstrap 5.1 Navbar with 3 sections (left, center, right)
I'm having problems with getting the layout right for the navbar I'm working with.
I want the navbar to have 3 sections like described in the title, for the first section at the left there's an img ...
0
votes
1
answer
26
views
Two input columns in HTML table row, but only first one works
I'm building a mapping application where users can add Features to a database and then, on the mapping page, have the features listed in an HTML table. There are 3 columns in the table: Feature Name, ...
- 45
2
votes
0
answers
34
views
Why are form-control dates broken on iPhone?
For some reason on iPhone the form-control class on the date field breaks the output. This occurs on both Safari and Chrome so is clearly an iPhone issue.
<head>
<link href="https://...
- 4,151
0
votes
1
answer
36
views
min-vh-50 is not behaving as expected in Bootstrap CSS
I am making 2 rows. These rows will have buttons inside of them (10 each). I want these 2 rows to be in the middle of the page but not too close together.
I applied min-vh-50 on these 2 rows to align ...
-1
votes
0
answers
23
views
how to make wavy curv svg in html css bootstrap 5
I want to make a login page like this. So you can see the blue part how its wavy from one side. How can i make it? Can anyone please provide svg for that.
I am searching for svg and all i am getting ...
1
vote
0
answers
33
views
Bootstrap table collapse rows if data row is greater than 1
I'm doing a python Flask app that takes user input data and display them on bootstrap + html page. I'm doing perfectly fine if I want to display all input data row by row. However, I thought I'd be ...
- 9