I have made a ModalComponent.vue file which I want to reuse everywhere. The modal has slots for the title, body and footer. It has a standard close modal button, which works fine. I want to have another button next to…
In below html, I'm facing an issue. when I use bottom scrollbar to scroll from left to right then table go after navbar width as table is wide. Is there any way to make this table responsive so it can…
Like you can see on those 2 pictures i want to delete the blue color when open and the blue border color <div class="accordion-item"> <h2 class="accordion-header" id="flush-heading<?php echo $id; ?>"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php echo $id; ?>" aria-expanded="false"…
In Bootstrap 5.3, we are able to specify a theme to use for the site. Out of the box there are two supported theme Dark and Light. If I set my <html data-bs-theme="dark">, I want to set the site navbar…
The following code uses 3 bootstrap cards that display perfectly side by side on large screens. However, on medium size screens, the cards start to overlap and on the small ones, they completely overlap. I tried to play with class="col-lg-4…
How can I prevent the background image to overflow so that the horizontal scroll bar wont appear? The layout of this page is two columns which the width of each part will be 50-50, the left part will be the…
I have styled inputs (I'll put the CSS here, which has ultimately got too complicated and I have lost track of where I need to remove and fix). I am trying to get labels to fit above my input, my…
I'm using a react-bootstrap package on my project, I have a 3 <Col> component like this <Container> <Row> <Col xs={12} lg={7}> {/* A */} .... </Col> <Col xs={12} lg={5}> {/* B */} ... </Col> <Col xs={12} lg={7}> {/* C */}…
I want my navbar to be sticky on the top all the time even when i scroll but when i scroll, the content of my cards dont cut, so it´s content goes on top of my navbar and i dont…
Why is the checkbox not in line with the label? What I get <div class="row g-1 border-bottom p-3"> <div class="col border-end justify-content-center d-flex align-items-center"> <div class="h6 text-sm-center h-25"> osiągniecia </div> </div> <div class="col ps-3"> <div class="form-check"> <input type="checkbox" name="wyroznienie" id="wyroznienie">…