Questions tagged [bootstrap-5]
Bootstrap 5 is the fifth major version of the popular frontend component library. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps.
5,786
questions
0
votes
1
answer
11
views
Bootstrap-5 custom validation issue
I'm using bootstrap 5 for form validation. I'm adding the 'is-invalid/is-valid' class to the date field 'dob' in a custom date validation method validate_dob().
I tried doing the date validation ...
-3
votes
0
answers
23
views
Bootstrap 5 footer modal button not working outside form [closed]
Below is the form(copied from page source, it was in Symfony framework)
Although I tried solution that found in other stackoverflow. I could not resolve it.
document.getElementById("btnDownload")....
0
votes
0
answers
35
views
Additional space at end of page on tablet/mobile version
I have to design a web-shop for university and I am having troubles and I cannot find the problem. On certain pages when I look at the tablet or mobile version there is so much space after the HTML ...
0
votes
0
answers
8
views
how to make invalid-feedback works with btn-group using Bootstrap 5?
I'm having problem to show error on a radio button group when using Bootstrap's btn-group,
I wanted to have the error display under the button group, but I can't get it work (error not showing on ...
-1
votes
0
answers
14
views
These Bootstrap accordions won't close when I click the accordion button/header
So I've been working on this website and I want to use a Bootstrap accordion to show some information. I'm using bootstrap 5.3.2 and the type of accordion is a "flush" one.
This is the .html ...
-2
votes
1
answer
27
views
Scrollbar of bootstrap dropdown menu problem with border radius property
Scroll bar of bootstrap dropdown menu is stay outs the box when using border radius property. How to fix?
Example code and preview:
https://www.codeply.com/p/7P8MsVnOG7
<div class="container ...
0
votes
0
answers
10
views
How to properly load nested JSON as a nested table, using React + typescript and bootstrap@5.3.2
I am trying to load the nested json properly on the Orders.tsx page. I am trying to display all past orders. My Api returns me a correct list of all cart objects in json format. Each cart has 3 fields,...
0
votes
1
answer
19
views
Can I use Bootstrap 5 with Vue v2 and Bootstrap-vue Components?
The project that I work on is created with Nuxt v2 (Vue v2, Bootstrap v4, Bootstrap-vue). The project uses bootstrap-vue components like:
<b-navbar toggleable="md" type="dark" ...
1
vote
1
answer
34
views
vertical center table in a div
I want to place a table in the center vertically but I can't do it. I have seen that it can be achieved with vertical-aligning but it doesn't work for me. Place it at the beginning of the div. Any ...
-1
votes
1
answer
43
views
How to make responsive UI using css?
How can I make the following UI responsive using css.
<Text className="w-100 mt-0 align-self-center">
Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span>
&...
0
votes
1
answer
38
views
selected value from the dropdown using HTMX framework
In my HTMX page, I have two dropdown menus. I want to include the selected values from both dropdowns in a GET request. I've noticed that HTMX automatically includes the current dropdown's request ...
0
votes
1
answer
17
views
Quiz, background condition doesnt work, using bootstrap
I have quiz app. If user click on answer, I am trying to add green background, if user selected correct answer. Green background is working, but if user selected wrong answer ,I want to add red ...
-2
votes
1
answer
50
views
Issue with Modal in Bootstrap 5 - Blazor
I'm working on a Blazor application using Bootstrap for modal handling. I'm trying to use the data-bs-backdrop and data-bs-keyboard attributes in my ModalAlert.razor component to control the behavior ...
0
votes
0
answers
31
views
why isn't the JavaScript working on the HTML (bootstrap arrow button)? [duplicate]
I used left and right arrow from bootstrap to my food website. But when I applied javascript leftscroll to the arrow its not working, please help.
HTML code:
<div class="offers">
...
1
vote
1
answer
36
views
Nav-items drift from the line on Bootstrap navbar
I'm trying to create a Blazor web application with top bootstrap navigation bar, and I'm struggling to align all the items to one straight line.
This is NavMenu.razor code:
<nav class="navbar ...
0
votes
0
answers
52
views
Unicode Characters From CSS "Sometimes" Render As Gibberish (â–¾)
The problem is that sometimes, randomly (approximately in 1 out of 100 page refresh), the unicode characters in my page appear as gibberish (you will probably have to zoom in to see it clearly). More ...
-1
votes
1
answer
44
views
Custom CSS interfering with bootstrap grid system
I'm facing an issue with the >div part in my CSS selector .row > div. It seems to be causing an error in my grid system implementation. How can I resolve this error, and what is the reason ...
0
votes
0
answers
12
views
Importing Bootstrap SvelteKit without "document is not defined" error
I've been looking for a proper way to import Bootstrap into a SvelteKit project, where Bootstrap is installed using npm. Importing the CSS is quite straightforward since I prefer compiling the CSS ...
0
votes
1
answer
31
views
FullCalendar 6 and Bootstrap 5 : change tooltip background color
My FullCalendar agenda has colored events. Now I want the tooltip to have the same background color. Yet the tooltip has always a black background. I can I change this dynamically with regards to ...
1
vote
1
answer
28
views
Workaround to Bootstrap form-floating for longer label?
I am wanting to use Bootstrap's form-floating with longer labels, i.e, text box will automatically expand on longer labels, but it cuts off on white-space wrap when too long.
I do not want to pop it ...
0
votes
0
answers
15
views
I am trying to override bootstrap css with a custom page but my custom overrides aren't showing up. My custom css doesn't work at all
Picture of intellij idea
I have been awake for a long time and I'm not sure what I'm doing wrong at this point but my custom css file does not work at all, even if I comment out the bootstrap css.
I ...
-1
votes
0
answers
34
views
How to center horizontally the button to the dropdown menu?
There is a dropdown menu associated with a button :
<button class='btn dropdown-toggle' id='dropdownDtActions' type='button' data-bs-toggle='dropdown' aria-expanded='false'> Actions <img src='...
-1
votes
1
answer
64
views
How can I toggle sort order with a button on bootstrap page without reloading page?
I am building a template for an existing app, and want to include a button to change the sort order of elements displayed on a web page. The page uses Bootstrap 5.3 for styling, so I already have ...
0
votes
2
answers
38
views
REACT: How to enable a disabled button by choosing specific options in a separate select element?
I am new to React and trying to implement a function in a form but I just can't get it to work. The form uses react-hook-form, axios and Bootstrap 5.2.3. I tried but couldn't make useState work, what ...
0
votes
0
answers
19
views
How can I get an HTML Canvas element that you can draw on to responsively fill it's parent element?
trouble trying to get the canvas to resize responsively. So far the closest I've gotten is a canvas that will automatically fill the width of it's container, but for some reason not it's height.
I'm ...
1
vote
0
answers
33
views
Bootstrap collapse content is not hiding back
The bootstrap collapsed content doesn't hide back when I click the toggler again.
Head ->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"...
0
votes
2
answers
41
views
why can't it be a horizontal sidebar on the smartphone display?
I want to make the sidebar menu display on my smartphone horizontal or sideways with icons at the top and text at the bottom, but I've tried using flex and others but it still fails and can't go ...
0
votes
0
answers
26
views
I changed bootstrap from 3.3 to 5.3 and now the jQuery code won't work. It says: Uncaught TypeError: $(...).popover is not a function [closed]
I had this project which it was built with Bootstrap v3.3 and I wanted to migrate it to v5.3 and since I Bootstrap has stopped using jQuery after v5 the functionalities stopped when I changed the css ...
0
votes
1
answer
47
views
anchor tag inside a button that controls the collapse of another div not working
On my Nuxt 2 SSR + Bootstrap 5 app I have the following code:
<button
v-for="file of orderProduct.files"
class="collapsed son-collapse"
type="...
-1
votes
2
answers
42
views
make a background image adjust to devices of all screen sizes
I have an image it's serving as the background for some other elements on my website, the problem is the image is wider than it is tall. For users of computers, tablets in landscape, and other screens ...
-1
votes
0
answers
8
views
Edit PRINT function in Drupal Social_Media
I am working in Drupal 10 with Bootstrap and using the Social Media Share (social_media) module. When I click the "PRINT" button, it includes all "Add new Comment" as well as ...
-1
votes
0
answers
47
views
Bootstrap 5.3.2 css and js files not found (Error 404)
I downloaded the Bootstrap 5.3.2 compiled and dropped them in my project in a cs and js folder right under my root.
Project picutre
Follows my code:
from flask import Flask, render_template
app = ...
-2
votes
1
answer
37
views
Use html css and bootstrap in Visual Studio 2022 with ASP.NET
How can I use html CSS and JavaScript design in Visual Studio 2022 where the ASP.NET controls allow the code to be performed?
I'm expecting that someone please solve my problem it's getting hard for ...
0
votes
2
answers
44
views
Create three inline blocks and freely place elements inside them without affecting other blocks
I am trying to create three blocks with set height and width, aligned on top/bottom and also place couple elements inside them. My problem is that anytime I place additional DIVs into one of the ...
0
votes
1
answer
13
views
where is code of search and show entries of datatables in bootstrap theme
I want to change the css property and also need to change the html code for mobile devices of "Show entries" and "Search" of DataTable in bootstrap.
I found this code in the ...
0
votes
0
answers
13
views
Bootstrap ERROR: Argument `$number` of `unit($number)` must be a number
In my project, I use Nuxt v2.8.1 with vue.js, webpack v4.39.2, sass-loader, gulp-postcss. I'm trying to upgrade Bootstrap to it's 5th version:
I installed (via yarn) the latest Bootrap v5.3.1
I ...
0
votes
0
answers
32
views
Bootstrap 5 Carousel Play and Pause button
I can't seem to get this carousel to do what I want. Can some one help me out? There are most likely a few things wrong here, believe me I know.
I would like to have the carousel play on load, and ...
-2
votes
0
answers
31
views
Removing line from Link in Bootstrap 5
I am facing a problem in bootstrap 5. I have created a link to another page of the website, for which the text got underlined in bootstrap. The text has other properties, like it color is white, bold, ...
0
votes
1
answer
19
views
Nextjs 13 app routeur with bootstrap 5.3.1 and vertical navbar
Hi i have a issue with nextjs 13 and bootstrap 5.3.1 and my vertical navbar
I use bootstrap.css and bootstrap bundle.js
All my html tags are good when I test the document with a horizontal navbar this ...
-1
votes
1
answer
21
views
bootstrap 5: two column layout, text should flow around image
i just can't find the solution. i want to implement two columns in a row; in the left column there is an image (md-3 or lg-4) in the right column there is a long text (md-9 or lg-8).
when i'm at the ...
-1
votes
0
answers
22
views
Bootstrap5 card with list and a collapse, problem with border-radius
I want to create a card in Bootstrap5 with a list, which shows data, but I also want to hide data, which are not important. So far so good, I even got this working, but I got a problem with the border-...
0
votes
0
answers
10
views
Why isn't bootstrap working in react when i use classname? [closed]
Hello I'm running a react app and my bootstrap isn't showing up when I run the appilcation. I tried to reinstall it.
my code is...
https://github.com/ProfessorSocks/week-14/tree/main/videos
I thought ...
0
votes
1
answer
17
views
Why are my bootstrap container columns not staying divided into 4 equal parts?
I've been trying to divide a section from my project into 4 equal parts using the bootstrap col attribute but was unsuccessful in doing it. When executed, there is always the last container which ...
0
votes
1
answer
14
views
show bootstrap dismissible alert on button each click Jquery
I am creating a web application using Asp.net c#. I want to show alert on user each click.
The alert showing from top of the page, the second alert pushdown the first alert and it will close ...
-1
votes
0
answers
165
views
Is this HTML, CSS, Bootstrap or Operating system issue? (Navigation Moves) [closed]
I am working in with my friend on his portfolio site. Basic static HTML/CSS/JS Bootstrap 5 site. He just wanted to get this static page up to apply for a side gig but it turned out to take longer as ...
0
votes
0
answers
24
views
Button css is not work on mac but working on chrome windows
here is the MAC screen shot:- https://prnt.sc/Mo8lt0lYhvGq
here is the window screen shot :- https://prnt.sc/PfHoW2DPD83f
My problem is that on mac button css is not apply. but on window it's work ...
-1
votes
0
answers
24
views
Why does Firefox browser mess up Bootstrap button style?
I am working on web page project in ASP.NET Core where I use Bootstrap buttons. In Chrome all the controls look just like on Bootstrap page, however if I open same project in Firefox, it applies blue ...
-2
votes
0
answers
23
views
Bootstrap 5 and Select2 form validation select box not working [closed]
I'm using Symfony 5.4, bootstrap 5 and select2
I have the same problem as this one : here but i didnt achieve to follow the answer given.
Explanation
I'm trying to use Bootstrap's form validation with ...
0
votes
0
answers
22
views
Bootostrap's "Uncaught TypeError: this._config is undefined" when visiting pages through hyperlinks on Rails 7 with Turbo [SOLVED]
I'm using Ruby on Rails 7 with Hotwire Turbo and Bootstrap 5.2, and I'm getting a JS error related to the Bootstrap modal window when clicking the modal's open trigger button on my website.
That is, ...
0
votes
0
answers
23
views
How can I fix this error: Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') at _Modal._initializeBackDrop?
I'm creating a website that is similar to Instagram. While trying to create a modal showing a post by clicking on the image of that post, the console logged out this message:
Uncaught TypeError: ...