How to align these badges side by side?

I’m trying to align these badges side by side but am having trouble doing so. inline-block doesn’t seem to work and it’s always stacked on top of eachother instead of side by side

How do I align it like the picture below?

this is what I’m trying to have it look like:

.tgr_card span {
    display: block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    </head>
    <body>

        <div class="card tgr_card" style="width: 30rem;">
            <div class="card-body">
                <h5 class="card-title d-flex justify-content-between align-items-center">
                    Name
                    <div class="text-end">
                        <button type="button" class="btn-close" aria-label="Close"></button>
                    </div>
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">#x</h6>

                <br>

                <ul class="list-group list-group-flush tgr_card_ul">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Name
                        <span class="badge bg-primary rounded-2">test</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Min Max
                        <div class="row">
                            <div class="col">
                                <span class="badge bg-primary rounded-2">1</span>
                            </div>
                            <div class="col">
                                <span class="badge bg-primary rounded-2">None</span>
                            </div>
                        </div>
                        <!-- <div>
                            <span class="badge bg-primary rounded-2">1</span>
                            <span class="badge bg-primary rounded-2">None</span>
                        </div> -->
                        <!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Name
                        <span class="badge bg-primary rounded-2">test</span>
                    </li>
                </ul>
            </div>
            <div class="card-footer text-muted text-center">
                <a href="#" class="btn btn-primary" style="width: 100%;">footer</a>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

using bootstrap v5.3.0 alpha-1

edit: it’s side by side in the snippet but what I mean is that it’s side by side and the same size as the full width badge above/below (see attached picture) – so both badges are like 50% width and uniform with the above/below badges

>Solution :

.tgr_card span {
    display: block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.half{
    width: 150px;
}
.half span{
width: 49%;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    </head>
    <body>

        <div class="card tgr_card" style="width: 30rem;">
            <div class="card-body">
                <h5 class="card-title d-flex justify-content-between align-items-center">
                    Name
                    <div class="text-end">
                        <button type="button" class="btn-close" aria-label="Close"></button>
                    </div>
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">#x</h6>

                <br>

                <ul class="list-group list-group-flush tgr_card_ul">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Name
                        <span class="badge bg-primary rounded-2">test</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Min Max  
                     <div class="half d-flex justify-content-between align-items-center ">
                      <span class="badge bg-primary rounded-2">1</span>
                      <span class="badge bg-primary rounded-2">None</span>
                        </div>
                        <!-- <div>
                            <span class="badge bg-primary rounded-2">1</span>
                            <span class="badge bg-primary rounded-2">None</span>
                        </div> -->
                        <!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Name
                        <span class="badge bg-primary rounded-2">test</span>
                    </li>
                </ul>
            </div>
            <div class="card-footer text-muted text-center">
                <a href="#" class="btn btn-primary" style="width: 100%;">footer</a>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

Leave a Reply