What is the best way to incorporate a badge into my Bootstrap site?

I am delving into the world of front-end development, starting with a Bootstrap project. However, I have hit a roadblock. I am trying to incorporate badges similar to those in my design, but every attempt throws off the alignment and messes up the layout of the site. Can someone take a look and help me out?

<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
    <div class="list-group">
        <label class="list-group-item d-flex gap-3">
            <span class="pt-1 form-checked-content">
                <strong>Title</strong>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#calendar-event"></use></svg>
                    23 July
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#alarm"></use></svg>
                    17:00
                </small>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#geo-alt"></use></svg>
                    1,5 km
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#car"></use></svg>
                    19 min
                </small>
            </span>
            <button class="btn btn-secondary position-absolute top-50 translate-middle text-body-secondary"
                    style="right: 0; background: none; border-color: #00000059;" type="button">
                <svg class="bi m-1" height="1em" width="1em">
                    <use xlink:href="#edit"></use>
                </svg>
            </button>
        </label>
    </div>
</div>

What I've already tried:

I attempted adding buttons and styling them, but it resulted in unexpected outcomes. The buttons were placed within the label causing all the text to shift as if in a horizontal grid.

htmlcssbootstrap-5

Answer №1

To enhance the layout, I included the flex-wrap class in the label to enable wrapping for new flex items. Additionally, I inserted a new div with a flex-basis set to 100% to occupy the entire row, followed by placing badges inside it. To ensure proper alignment of the top content, I applied some margin to the span.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85b3bdb5c2e3afeeb6bcb8bebdaeaeafaabdb6bab9d7afbfbafcbfc3eaafeeeda2a6aba9bb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KULWWTIPIT05B1WKVJHHDDKLDNJRWHIRQPXBDGDNDKCZTMEQHRFUTJJRIEPPKMGN" crossorigin="anonymous">

<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
    <div class="list-group">
        <label class="list-group-item d-flex flex-wrap gap-3">
            <span class="pt-1 form-checked-content mt-3">
                <strong>Heading</strong>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#calendar-event"></use></svg>
                    12 August
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#alarm"></use></svg>
                    20:00
                </small>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#geo-alt"></use></svg>
                    2.3 miles
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#car"></use></svg>
                    25 min
                </small>
            </span>
            <button class="btn btn-secondary position-absolute top-50 translate-middle text-body-secondary"
                    style="right: 0; background: none; border-color: #00000059;" type="button">
                <svg class="bi m-1" height="1em" width="1em">
                    <use xlink:href="#edit"></use>
                </svg>
            </button>

            <div style="flex-basis: 100%;">
                <div class="d-inline-block rounded-circle bg-danger text-center" style="width: 25px; height: 25px;">S</div>
                <div class="d-inline-block rounded-circle bg-success text-center" style="width: 25px; height: 25px;">A</div>
                <div class="d-inline-block rounded-circle bg-primary text-center" style="width: 25px; height: 25px;">E</div>
            </div>            
            
        </label>

    </div>
</div>

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

Steps for showing retrieved data individually:

Currently, I am utilizing angular-js, JavaScript, and HTML in my project. I have successfully retrieved a list of customer names and their corresponding details from the database. However, I am looking to implement a feature where each record is displayed ...

javascripthtmlangularjs

Looking to fetch the title, description, and uploaded image all in one row and showcase them using PHP

My contact-form-submission.php file is responsible for inserting form data into a Database and uploading logos to the uploads folder. Here's a snippet of the code: <?php $target_dir = "uploads/"; $target_file = $target_dir . basename($ ...

phphtmlmysqlforms

Simple php/html form without any fancy features

As a beginner in php/html, I am eager to learn how to create and process an html form. Recently, I set up a new folder named Website. Within this folder, I created an index.html file and a submit.php file. (reference: http://www.w3schools.com/php/php_for ...

phphtmlforms

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

Establish a connection between a PHP webpage and a MySQL database

I've been struggling to establish a connection between my php pages and MySQL. Being new to php, I've attempted various solutions found online but none seem to work for me. Even after creating a database and downloading a php form, the data is no ...

phphtmlcssmysqlsql

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

Navigating a mobile-friendly menu anytime!

I'm in the process of creating a responsive "hamburger" menu for mobile devices. The HTML code I have implemented is as follows... .menu_closed { color: red; } .menu_open { color: blue; } <script src="https://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsshamburger-menu

How can you add padding to an HTML page using CSS?

I've been attempting to use padding-bottom:90px; in order to shift Tweets by ‎@StackOverflow (the entire tweets section) downwards on the page. I want to move it further down using the above padding, but it doesn't seem to be working for me. H ...

htmlcssasp.net

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running ...

cssnpmtailwind-css

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

cssreactjsmaterial-uiflexbox

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

htmlcssasp.net-mvcbootstrap-4

Increasing an ID number automatically using Javascript

I'm currently working on a functionality where a unique number is automatically generated whenever a new record is created. For instance, if I were to click "Create record" on a webpage, the number would auto-fill in the record ID field. Subsequently, ...

javascripthtmltypescriptangular-material

Utilize selenium to retrieve data from the internet

Being a research analyst, my task involves collating data and conducting analysis. To gather the required data, I need information from this page. Specifically, I am looking for data on Abrasives to Vanspati Oils (located on the left side of the page). In ...

pythonhtmlexcelselenium

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

CSS shape that must adjust dynamically

I'm currently stuck on a project and would appreciate some help. The Current Layout: Image on the left side Image on the right side Desired Layout: New image on the left New image on the right Here's the challenge: The parallax images stre ...

htmlcss

The background-size CSS property may experience malfunctioning on iOS devices when using Safari browser

My website has a body background size set, which works well on Android and Windows devices. The background size is intended to be 85% width and 5% height of the body. However, when loading the site on an iPhone, the height appears much larger than 5%. It s ...

htmlcssios

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

cssangularangular-materialstyling

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

javascripthtmlcssoverlappingintersection-observer

Menu is not functioning properly as it is not staying fixed in place

I am trying to create a fixed menu that sticks to the browser window as it scrolls. However, I am encountering an issue where the transition from sticky to fixed is not smooth when I remove position: relative; from navbar__box. window.onscroll = functio ...

javascriptjqueryhtmlcsscss-position