Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content.

<ul class="list-group">
            <h2 class="list-group-item-heading">
             INTRO
            </h2>
            <br>
            <li class="list-group-item">
                content
                <span class="badge">1</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">3</span>
            </li>
            <li class="list-group-item">
                  content
                <span class="badge">4</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
        </ul>
htmlcssbootstrap-4

Answer №1

To enhance the styling, apply d-flex justify-content-between to the <li> element. Here is how the code looks with the added classes.

<ul class="list-group">
    <h2 class="list-group-item-heading">
        INTRO
    </h2>
    <br>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">1</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">3</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to retrieve the value of a particular field from a table?

My goal is to create a table that displays data about various users awaiting admin approval. Each row represents a specific user, and when the approve button on a particular row is clicked, I want to open a new window displaying detailed user information f ...

javascripthtmlobject

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

htmlcssfrontend

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Finding Elements in a Frameset in HTML with the Help of Selenium WebDriver

Below is the HTML code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... (truncated for brevity) ... </html> I am specifically inter ...

htmlxpathselenium-webdriverframesframeset

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

htmlcss

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

phphtmlcss

Showcasing a graphical representation with the help of Highcharts

I am currently exploring JavaScript and trying to familiarize myself with interactive charts using the HighCharts library. Unfortunately, I have been facing some challenges in getting the graph to print correctly. Despite attempting various examples, none ...

javascripthtmlchartshighcharts

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

What is the best way to customize the icon-bar in react-bootstrap's Navbar?

I am trying to customize the icon-bar in a react-bootstrap's Navbar component by setting its background color to white. However, my webpack scss loader is preventing me from styling CSS classes with dashes, as it only allows camel case. This restricti ...

csstwitter-bootstrapreactjsreact-bootstrap

The header of the bootstrap table will now feature a new button for toggling the visibility of the filter control

I'm currently utilizing a bootstrap table with filter control, and I am looking to incorporate a button (icon) on each of the table headers in order to toggle the visibility of the filter control. Is there a method to achieve this? An example of a b ...

javascriptjqueryfilterbootstrap-4bootstrap-table

Identify the quantity of dynamically added <li> elements within the <ul> using jQuery

I'm facing an issue where I need to dynamically add a list of LI items to a UL using jQuery. However, when I try to alert the number of LI elements in this list, it only shows 0. I suspect that it's because the code is trying to count the origina ...

javascriptjqueryhtml

Ways to eliminate models that are not currently connected to the DOM

Within my form, I have implemented logic using ng-if to determine which elements are displayed based on user selections. For instance, if a user selects USA as the country, the state drop down will be shown as it was conditioned upon an ng-if for the count ...

javascripthtmldomangularjs

I desire the div to display based on the conditions set in the PHP file

Hi, I am looking to display the div with ID "msga" when a certain condition is met and show the div with ID "msgb" when another condition is met. Here is my PHP code: if(isset($_POST['aa'])) { echo "a"; } if (isset($_POST['bb']))) { ...

phpjqueryhtmlajax

HTML unique flex wrapping

https://i.sstatic.net/ekVr4.png #menu { display: flex; justify-content: space-evenly; align-items: center; margin: 0 5px 0 5px; height: 30px; flex-wrap: wrap; } .menu_item { margin: 0 10px 0 10px; } .menu_item2 { margin: 0 10px 0 10px; } <div id="m ...

htmlcssflexbox

Retrieve data from an API and store it in a JSON array

My website is having an issue where it's fetching data from an API and displaying it in a table, but all the cells are returning undefined values. The data in the API is structured as an array with multiple datasets inside curly braces that I am unsu ...

javascripthtmljsonapi

What is the best way to trigger two separate JavaScript/jQuery functions on a single HTML control, specifically a text field, in response to

Here is the HTML code I have for a text field where functions are implemented: <input type="text" class="form-control" size="20" onblur="GetLocation();" id="zip_code" name="zip_code" value=""> <input type="text" class="form-control" size="20" r ...

javascriptjqueryhtmlfunction

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: https://i.sstatic.net/aqIHk.png Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() =& ...

cssreactjsnext.jshtml5-videochakra-ui

Adjusting the dimensions of two pictures side by side using Bootstrap 3

I've been experimenting with Bootstrap to align two images side by side using different columns. I made sure they were aligned properly and even added some background colors for better visibility. However, when I tested the responsive design by chang ...

htmlcssimageresponsive

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

Can anyone help me figure out the correct way to set up an Angular template driven form element for both validation and two-way binding? I've tried using ngModel in different ways, but cannot seem to achieve two-way binding without encountering issues ...

htmlangular

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs