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.

Filter by
Sorted by
Tagged with
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 ...
Sara's user avatar
  • 31
-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")....
steven zong's user avatar
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 ...
joli2711's user avatar
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 ...
Benjamin Bouffier's user avatar
-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 ...
Anguished Coney's user avatar
-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 ...
Uğurcan Ekici's user avatar
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,...
WannaBeTechGuy's user avatar
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" ...
monny's user avatar
  • 97
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 ...
crist_9's user avatar
  • 45
-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> &...
Linu's user avatar
  • 1,712
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 ...
moorsu's user avatar
  • 241
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 ...
erza's user avatar
  • 117
-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 ...
mzonato's user avatar
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"> ...
Niketa Sengar's user avatar
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 ...
feonao's user avatar
  • 13
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 ...
Emre Bener's user avatar
-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 ...
Hafsa Javed's user avatar
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 ...
paulchoix's user avatar
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 ...
HelloWorld's user avatar
  • 2,285
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 ...
jnnguyen's user avatar
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 ...
sunny k's user avatar
-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='...
pheromix's user avatar
  • 18.3k
-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 ...
dunxd's user avatar
  • 928
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 ...
Caio Urtiga's user avatar
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 ...
Ric Adbur's user avatar
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"...
sak345's user avatar
  • 62
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 ...
afuza pratama's user avatar
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 ...
Naod's user avatar
  • 9
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="...
fombo's user avatar
  • 103
-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 ...
caleballen44's user avatar
-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 ...
Len Lamberg's user avatar
-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 = ...
Andrea's user avatar
  • 1
-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 ...
Khushi Sidhpura's user avatar
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 ...
bracko's user avatar
  • 252
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 ...
Khanna Ankur's user avatar
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 ...
monny's user avatar
  • 97
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 ...
babithao's user avatar
-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, ...
Syed Shehab Ali's user avatar
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 ...
cedric godard's user avatar
-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 ...
Kasia's user avatar
  • 1
-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-...
braxxxton's user avatar
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 ...
ProfessorSocks's user avatar
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 ...
02MESH's user avatar
  • 11
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 ...
Prakash Am's user avatar
-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 ...
sarahek's user avatar
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 ...
Ketul prajapati's user avatar
-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 ...
niks's user avatar
  • 587
-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 ...
Meyo GIT's user avatar
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, ...
user502052's user avatar
  • 14.8k
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: ...
user22550068's user avatar

1
2 3 4 5
116