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.

Bootstrap 5 is the fifth major version of the popular frontend component library and open source toolkit for developing with HTML, CSS, and JavaScript. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps.


Key changes in v5:

  • Dropped the jQuery dependency
  • Dropped support for Internet Explorer (10 and 11)
  • Updated grid and layout
  • Updated forms
  • CSS custom properties added to many components

Latest version available: v5.0.0


Helpful resources

5709 questions
1
vote
1 answer

Make images same height when there is no fixed height or width

Is there are any solution to make different size images be the same height on a card? Problem is that content is coming from cms, and I do not know what the image size will be and how much text will be in the card.
1
vote
0 answers

TypeError: Cannot read properties of null (reading 'template') on Bootstrap tooltip.dispose()

I am trying to build a simple React web app that utilizes Bootstrap. Specifically, I was trying to use its tooltips component. I initialize every tooltip on a page using a custom hook with some tweaks to the code found in the Bootstrap Docs like…
Danry
  • 147
  • 15
1
vote
1 answer

How do I offset underline using bootstrap?

I'm trying to place to place a text underline without using CSS. I've used

text

and class="text-decoration-underline">, but neither seem to have an option to offset so that the text sits a few px lower than default. Only other method…
Barak David
  • 45
  • 1
  • 6
1
vote
1 answer

Is it possible to ensure buttons are the same within a button group?

I'd like to ensure two radio buttons within a button group occupy an equal amount of width:
1
vote
0 answers

Keep selected tab on page refresh

I am trying to keep selected tab active on page refresh.. using bootstrap 5. I checked all the same questions for different versions, None of them worked. What should I do? Give me a clue
1
vote
1 answer

Navigation toggler is not working in browser but working in codeply

I have tried to include navigation bar with toggler. The code is working fine in codeply but not in browser. The toggler button (hamburger button) is appearing when in mobile but not showing the lists. Below is my code. …
Yashas
  • 41
  • 4
1
vote
1 answer

How to fix data-bs-target bootstrap version 5 not working?

I'm trying to click on a button tab and allow it to open up my content but it will not work. I seem to have the right code but it's still not working. I want it to be able to open my content once I click the button tab. This is really confusing I…
1
vote
1 answer

Using local storage or session storage keep collapse item-1 class show/not show

I have issue with keeping my callapse item after refresh open or closed. I using bootstrap 5. To see accordion item see, need add show in the class
1
vote
0 answers

Links don't work inside Bootstrap Offcanvas

I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work. When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be…
Paulo Hgo
  • 834
  • 1
  • 11
  • 26
1
vote
1 answer

SassError: can't properly access theme-color()

Full Error: Failed to compile. ./src/@core/scss/react/libs/noui-slider/noui-slider.scss…
Daggerpov
  • 127
  • 1
  • 13
1
vote
3 answers

Getting text in a Bootstrap 5 card header right aligned

I have a card in Bootstrap 5, and I would like some of the contents of the header to be right aligned, and the other content to be left aligned. So far everything is left-aligned, no matter what I do. Here's some sample code:
Jonathan Bechtel
  • 3,497
  • 4
  • 43
  • 73
1
vote
1 answer

Flex content in Bootstrap 5 tabs not hiding after changing tab?

Bootstrap 5 tab has a Leaflet map which we want to fill all remaining space when selected. We got this working but now when changing tabs the area of the 1st won't go away. We think it might be due to the ".tab-content > .tab-pane { display: none;…
1
vote
2 answers

Livewire offcanvas Bootstrap 5

I work with Livewire and Bootstrap 5. I have in a Livewire component an Offcanvas that is displayed when a button is clicked. In this canvas I have a text area which via LiveWire makes a request to the server. This request makes the offcanvas…
Larave
  • 13
  • 2
1
vote
2 answers

how to reset the effect of bootstrap 5 text-muted

I am using bootstrap 5 "text-muted" to grey out or dim the text. On hover, I would like to undo this effect on the text. I am able to make other effects for e.g. text decorations (underline) etc., on hover but not able to revert this effect. Is…
xpath
  • 27
  • 6
1
vote
2 answers

How to connect rotated div elements?

Im trying to connect rotated divs by 45deg, and cant figure how to do it. The page is currently in this state: Screenshot of the page: Im trying to achieve something like: .box { border-style: groove; width: 100px; height: 100px; …
SansSerif
  • 13
  • 3