Html – How to use flex to resize items relatively?
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…
Html – Wanting to make weather app glow different colors depending on time
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…
Css – React/Bootstrap: How to get drop down menu to be rendered on top of everything?
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…
Html – Custom .CSS file/classes not importing to React Bootstrap app?
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…
Javascript – Images are not getting load in the page
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…
How to curve the outside of a rectangle in CSS?
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…
Html – How to display icon and content next to each other without using bootstrap?
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…
Html – Why aren't the items lining up vertically centered?
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 | |…
Html – Can't align items – Bootstrap 4.5
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…
Html – Boostrap progress bar with steps – steps icons are contained within bar and need to pop out
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…