Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha)

This is how it currently looks:

I want the badge to be positioned on the right side of the text.

Here's the code snippet: 

<div className="list-group">
<a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span className="badge badge-default badge-pill">3</span></a>

<div id="Expamle" className="collapse">
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
</div>

Please lend me your expertise!

csstypescriptreact-reduxbootstrap-4

Answer №1

Your code is functioning properly.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">
  Example 
  <span class="badge badge-secondary badge-pill">3</span>
</a>


<div class="list-group">
  <a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">Example
        <span class="badge badge-secondary badge-pill">3</span></a>

  <div id="Expamle" class="collapse">
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
  </div>

I assume you have applied a fixed width on the list-group-item. As a result, the content wraps due to its display being set as block.

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

There is no badge-default class in Bootstrap. The available classes are:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

The use of flex-column is unnecessary since the list-group-item's display is block, not flex. The flex-column property only applies to flex elements.

Answer №2

Here is the code snippet:

<div class="list-group">
    <a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">Example
        <span class="badge">5</span></a>
    
    <div id="Expamle" class="collapse">
        <div class="d-flex w-100 justify-content-between">
            <label class="list-group-item list-group-item-action flex-column">Example list-item-1</label>
        </div>
        <div class="d-flex w-100 justify-content-between">
            <label class="list-group-item list-group-item-action flex-column">Example list-item-2</label>
        </div>
        <div class="d-flex w-100 justify-content-between">
            <label class="list-group-item list-group-item-action flex-column">Example list-item-3</label>
        </div>
    </div>

https://jsfiddle.net/xqbe1kwk/

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

Searching Local JSON Data in Ionic 4 with a Filter Input Bar

My current challenge involves filtering local JSON data in my Ionic project. Despite referencing other resources, I am unable to filter or display filtered items on the ngx-datatable. I suspect the issue may lie either in the filterItems function implement ...

jsonangulartypescriptionic-frameworkionic4

I'm looking for guidance on how to merge my JavaScript and CSS files together. Can anyone provide me

As a beginner in web development, I have been looking into combining JS and CSS files. However, explanations using terms like minifies and compilers on platforms like Github and Google are still confusing to me. Here are the CSS files I have: bootstrap ...

javascriptcssminify

What causes the Footer to appear as a floating element in Tailwind CSS?

I've implemented the tailwind CSS footer into my NextJS project to display fetched data. However, I encountered an issue where the footer only floats when there is less data present. To address this problem, I created a separate footer file within my ...

htmlcssreactjsnext.jstailwind-css

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet: <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...

htmlcsstwitter-bootstrap

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

I am currently working on a project involving an Ionic 2 and Angular 2 application. I need to implement a feature that checks whether the device is rooted (in the case of Android) or jailbroken (in the case of iOS). I have experimented with various packag ...

angulartypescriptcordovaionic2

Angular 8: How to Retrieve Query Parameters from Request URL

Can I retrieve the GET URL Query String Parameters from a specific URL using my Angular Service? For example, let's say I have a URL = "http:localhost/?id=123&name=abc"; or URL = ""; // in my service.ts public myFunction(): Observale<any> ...

javascriptnode.jsangulartypescript

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Recently, I've delved into the world of jQuery and attempted to create a simple menu system. The menu is designed to expand its submenu when hovering over the list item at screen widths larger than 480px, and to expand when clicking on the list item a ...

javascriptjqueryhtmlcssnav

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

Greetings, Angular2 application with TypeScript that showcases the beauty of the world

I've been working on my first angular2 program and noticed some deviations from the expected output. typings.json: { "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f ...

node.jsangulartypescript

The type 'IProduct' cannot be assigned to type '[]'

Looking for help with dispatching events between parent and child components. Interfaces: export interface IProduct { id: string; name: string; price: string; image: string; inStock: number; fastDelivery: bo ...

javascriptreactjstypescriptreact-hooksuse-reducer

Encountered error: Unable to locate module - Path 'fs' not found in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib' within newly generated Chakra application

Started by creating the app using yarn create react-app chakra-ts --template @chakra-ui/typescript. Next, added dotenv with yarn add dotenv Inserted the following code block into App.tsx as per the instructions from dotenv documentation: import * as dote ...

reactjstypescriptdotenvchakra-ui

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

htmlcssangularflexbox

Swap out the traditional submit button on your form with a stylish Font Awesome

Can anyone assist with replacing the submit button with a Font Awesome icon? I've tried it myself, but the icon is not displaying on the button. Here is what I have attempted so far: <form action="{{route('destroycourse', $course->id) ...

htmlcss

When the button onClick event is not functioning as expected in NextJS with TypeScript

After creating a login page with a button to sign in and hit an API, I encountered an issue where clicking the button does not trigger any action. I have checked the console log and no errors or responses are showing up. Could there be a mistake in my code ...

javascripttypescriptnext.js

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

javascriptcssreactjsmaterial-uidrop-down-menu

Issue with Custom Dropdown input not triggering blur event

I've been working on a custom dropup component and have encountered some strange issues with it. The main problem is the blur event not firing when clicking outside of the input field. My goal is to hide the options elements on blur, reset the compon ...

cssvue.jsvue-componentblurcustom-component

Creating a Jest TypeScript mock for Axios

Within a class, I have the following method: import axios from 'axios' public async getData() { const resp = await axios.get(Endpoints.DATA.URL) return resp.data } My aim is to create a Jest test that performs the following actions: jes ...

reactjstypescriptaxiosjestjs

Error: The selector "button" cannot be used in its current form as it is not pure. Pure selectors must include at least one local class or ID

<button onClick={() => resetBoard()}> Reset Board </button> While trying to import an external CSS file as a module, I encountered a problem. The CSS file looks like this... button { background-color: ...

cssnext.jssyntax-errorstylingcss-modules

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

I'm facing an issue with the onSnapshot method. It seems to not await for the second onsnapshot call, resulting in an incorrect returned value. The users fetched in the second onsnapshot call are displayed later in the console log after the value has ...

typescriptfirebasereact-nativegoogle-cloud-firestoreasync-await