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…
I am putting together a bootstrap progress bar with a number of step, each step is assigned against a variable (in %). I am trying to position these variables on the bar. The below picture is the current result I…
My buttons inside bootstrap columns not appearing when the screen size is small. I wanted the buttons to appear one below the other when screen size is small. What changes should I make to get my buttons one below each…