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
2 answers

How to create sliding effect in carousel using Bootstrap5?

I want to implement a carousel and for that I referred to the documentation for it in Bootstrap v5.1. Though the code is showing the carousel and is working but the slides are changing statically and I want to add the sliding effect in the carousel…
Rowan
  • 45
  • 4
1
vote
1 answer

Cannot close modal when replacing bootstrap 4 to 5

Bootstrap modal work perfectly on bootstrap version 4, but when i change to use bootstrap version 5, then the modal cannot close when i click "Close" button. //When I use this v4, modal works perfectly :
1
vote
1 answer

Bootstrap 5 --bs-gutter-x adds 1.5rem which makes rules and other elements hang off

I marked the code, but big picture this style --bs-gutter-x: 1.5rem; is added from _grid_scss:6. Adding a style to override bs-gutter-x: 0rem; does not fix it. I've seen other people with this issue, but have not seen a solution that fixes it…
rockets4all
  • 684
  • 3
  • 8
  • 32
1
vote
0 answers

Is there any functionality like class="hover:shadow" exists in css or with Bootstrap or MaterialUI?

What I would like to do is to add an existing bootstrap class on element but I want it to be active on actions such as hover. I was thinking if there would be a parsing or functionality in html/css to be able to provide markup like…
DragonKnight
  • 1,740
  • 2
  • 22
  • 35
1
vote
2 answers

Bootstrap 5 font-family variable overriding not working

I am using Proxima+Nova font for angular application style.css @import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); Trying to override the root font with bootstrap variables as below $variable-prefix: bs-; …
San Jaisy
  • 15,327
  • 34
  • 171
  • 290
1
vote
1 answer

Bootstrap 5 - make sidebar size line up with navbar brand

This page uses two navbar items, one for the top bar, and a separate one for the sidebar. How can I make it so the width of the sidebar is consistent with the end of the logo in the top right? Using variations of col-xxl-1 etc. results in sizes…
Seltonu
  • 95
  • 1
  • 9
1
vote
1 answer

How to call a function after another ends?

I'm making some functions after opening the modal. RefreshBirths() function needs motherId and fatherId which are from getDictionaryMother() and getDictionaryFather() functions (these render my mothers and father on page then I can get values in…
HappyProgrammer
  • 139
  • 1
  • 10
1
vote
2 answers

How to move the Header and search bar to the center of the screen?

I'm trying to create a website using bootstrap where the title and the search bar is at the center of the screen. I tried adding the my-auto, but that doesn't do anything. It shouldn't be difficult, but I can't make it work. Any ideas?
Person
  • 43
  • 5
1
vote
3 answers

How to set margin between two rows in bootstrap?

How to set space between two rows in bootstrap, if we using row class for every row, it is very easy to set margin or padding. But while set all the column under one row class, not able to set the margin. Kindly check the following code.
Merbin Joe
  • 611
  • 6
  • 27
1
vote
0 answers

bootstrap dropdown mobile view issue stretch the navbar

i am using and created a bootstrap navabar and in that dropdown in desktop view it work perfectly fine but in mobile view it stretch the navbar like this i want to avoid because it look ugly here is the screenshot what I am talking about: here is…
Shreyash mishra
  • 738
  • 1
  • 7
  • 30
1
vote
0 answers

my external css file is not working with bootstrap

I don't know why it is happening but I am only able to use only 1 style sheet at a time whether it can bootstrap style sheet or my external style sheet please help Homepage.html