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:

https://i.sstatic.net/ra22j.png

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

Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing. <div c ...

cssreactjstwitter-bootstrapbootstrap-4

When attempting to import a component from an external library in React/Next, you may run into an error that states: "Element type is invalid: Expected a string or

I am currently working on developing a React components library that can be seamlessly integrated into a NextJs project. The library includes a versatile "CmsBlock" component which takes a type and data as inputs to generate either a Paragraph or ZigZag co ...

reactjstypescriptnext.jsreact-dom

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

How to convert an attribute of an object within a list to a string separated by commas in TypeScript and Angular

I am working with an array of person objects in Angular 5 and displaying them in HTML using ngFor. The Person objects also contain an array of Role objects. persons:Array<Person>=[]; Each Role object is structured like this: export class Role{ ...

angulartypescriptangular5

Displaying the action.type in Components with React and Redux: A comprehensive guide

I am looking for a way to display the status of the action.type in my component when it is triggered. This will help me show whether an action has been successfully passed or not (when catch is triggered). Do you have any suggestions on how I can achieve ...

reactjsreduxreact-redux

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

javascriptjqueryhtmlcss

Simple user interface height to occupy the entire browser window

Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...

jquerycssjquery-easyui

typescript function intersection types

Encountering challenges with TypeScript, I came across the following simple example: type g = 1 & 2 // never type h = ((x: 1) => 0) & ((x: 2) => 0) // why h not never type i = ((x: 1 & 2) => 0)// why x not never The puzzling part is w ...

typescript

The console is displaying a promise that is pending, rather than the desired data

Here is the content of my file: 'use strict' import * as moment from "moment"; import { Report} from "./Report"; import { Timeframe} from "./Timeframe"; import { ReportComparison } from "./ReportComparison"; function test(firstFrom: string, fi ...

javascriptjsontypescriptasynchronous

What exactly do discrete animations entail?

In the MDN animation documentation, it mentions a type of animation known as "discrete". Can you explain what this term signifies? ...

cssanimationcss-animations

RxJS: Understanding the issue of 'this' being undefined when used within the subscribe method

As I work on setting up a simple error notifications component and debug in Visual Studio, an issue arises within the subscribe function where 'this' is undefined. public notifications: NotificationMessage[]; constructor(notificationService: N ...

visual-studioangulartypescriptrxjs

Looking for a button that can be toggled on and off depending on the input fields

Even after adding useEffect to my code, the button component remains disabled unless the input fields are filled. It never enables even after that. export default function Page() { const [newPassword, setNewPassword] = useState(''); const [conf ...

reactjstypescriptfrontend

Angular HTTP client implementation with retry logic using alternative access token

Dealing with access tokens and refresh tokens for multiple APIs can be tricky. The challenge arises when an access token expires and needs to be updated without disrupting the functionality of the application. The current solution involves manually updati ...

javascriptangulartypescriptangular-httpclientrxjs-observables

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

javascriptjqueryhtmlcss

Declaration files for Typescript ESLint configurations

I've been researching this issue online, but I haven't been able to find any solutions. It could be because I'm not entirely sure what's causing the problem. What I'm trying to do is set a global value on the Node.js global object ...

node.jstypescriptexpresseslint

Develop a universal function for inserting information into an array within a data set

I need assistance with my Typescript code. I am currently working on a method that pushes data into an array in a mongoose collection. However, the issue I'm facing is that the value is not being passed dynamically to the Key field in the $set operato ...

typescriptmongodbmongoose

Encountering a problem while bringing in screens: 'The file screens/xxx cannot be located within the project or any of these folders.'

I am currently working on an iOS application using React Native technology. During the process of importing a specific screen, I encountered an error message. Can anyone provide guidance on how to resolve this issue? Error: Unable to resolve module scree ...

reactjstypescriptreact-native

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

I am working with three different rows that contain the Typography component. My goal is to display the first row, followed by the second, then the third, and back to the first one in a continuous loop. All three rows should be shown in the same location, ...

javascripthtmlcssreactjs

Iterating over an object and inserting values into a JavaScript object using the ascending count as the identifier

Illustration: { Are you a coffee drinker?: yes, Do you like to exercise regularly?: no, How often do you eat out at restaurants?: 3 times a week, What is your favorite type of cuisine?: Italian } Results: {yes: 1, no: 1, 3 time ...

javascriptarraysangularjstypescriptobject

Display the contents of a <div> tag from one HTML file onto another HTML file

Recently I embarked on learning HTML and came across a peculiar doubt. My goal is to create a section div on the first page that changes dynamically based on the menu item clicked, rather than redirecting to another HTML page. I've experimented with s ...

javascriptjqueryhtmlcss