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…
z-index:-1 hiding the content after fa icon. I want to hide the line under the check icon What I have currently: .application-intro a { color: inherit !important; } .application-intro .step-icons { color: #4c5280; font-size: 4rem; /* width: 80px; */ margin-bottom:…
I have a card with an image and next to it is a banner. I use col-lg-8 and col-lg-4. The problem is that there is too much empty space between the card (which also has padding-right: 20px) and the banner,…
I am using <input type="checkbox class="form-checkbox form-control-radio"> in bootstrap 3. I am trying to upgrade to bootstrap 4 , not able to find these classes form-checkbox form-control-radio . Are these classes removed or do we have any equivalent of it…
I have been trying everything to change the background-color & color of the dropdown with no success (dropdown-menu & dropdown-item). Now the background color of the dropdown is very light grey and the hover on each item has a medium…
Here I have added a table with max height if it exceeds the height then custom scroller shows.The issues is it's not showing on mobile devices until its scrolled. enter image description here .scan-by-blocks .scan-by-block .legend { max-height: 120px; overflow-y:…
I am embedding some dashboard widgets in iframe. I want to make them responsive. So when I reduce screen size, I want each widget to occupy full width and when the browser window is big (md+) I want them appear…
I want to make a range date picker with bootstrap with single calendar. Now I have it but with two calendars $('#datepicker').datepicker({ }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <div class="input-daterange input-group" id="datepicker"> <input type="text" class="input-sm form-control" name="start" /> <span class="input-group-addon">to</span> <input type="text"…
I am aiming to use Bootstrap's list group to create a navigation bar like this: I'm wondering how I can move them to the left. Here's what I've tried. .list-group-item { display: flex; align-items: center; } .list-group-item a { float:…