I want to create a full screen modal with Bootstrap 4 that uses scrollspy for scrolling the content within the body. I have the fullscreen aspect working (see below). What I fail to do, however, is to properly make the…
In the script below I am simulating a stepper and I'm using row and col. It looks more or less good. However, if the page is use on wide screens (eg. lg and xl) the space between the steps is…
I've been trying to make my weather app glow "yellow" between the hours of 6 to 16 and "purple" outside of those hours. I have given the element classes of am and pm, and added the styling in CSS for…
I am trying to have a Bootstrap dropdown menu when a button is clicked. I have a component structure like this: <> <div className='1'> <navbar/> <div> <homepage/> </div> </div> </> The button is inside the <navbar> component, which lives at…
This is a continuation from Trying to shift my React button based on numerical values (##px) doesn't work?. I'm trying to move a button my webpage based on whatever value I set right: ##px to, but no matter what value…
I want to load the sliding images in a web app and for that I'm using Bootstrap carousel. Fetched the images from the backend. The images are stored in the images state. Below is the JSON format of the data…
I have a website which uses a SAAS CMS, so I cannot change the HTML structure, but I do have the ability to add some custom css. I want the header and footer to have upward and downward curves. Can…
I have this HTML that displays icons on the left, and summary on the right. I wrapped the icons and the summary using a bootstrap class col-sm-3 col-md-3. I did this because I wanted to display only four icons per…
I want to line up my image and texts vertically centered. One after another in a new line. Specifically the left side, where there is image, text1, and text2 Ideally it would be | Image | | text1 | |…
I'm trying to align two objects in HTML using Bootstrap, but it's not working. The code I'm using is this: <div class="row align-items-center"> <div class="col-auto"> <h6>Alignment Testing</h6> </div> <div class="col-auto ml-auto"> <!-- ml-auto --> <div class="input-group"> <span class="input-group-text" id="basic-addon1"><i class="bi…