What could be causing the list-group and list-group-item classes to not take effect in this situation

Currently diving into Bootstrap 5, I decided to play around with lists. Here is a snippet of the code I'm working with:

<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>

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

Seeking advice - have any of you encountered this issue before? I have saved and refreshed, so that's not the problem. I also noticed that there is a missing closing tag for ul (not sure why it wasn't included by Stack Overflow). At first glance, it resembles regular HTML.

htmlcssbootstrap-5

Answer №1

It is essential to integrate Bootstrap (CSS & JS) into your project in order to utilize its features effectively.

Refer to the code snippet below for guidance.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6d8c6da">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Title</title>
</head>

<body>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

  <!-- Bootstrap JS bundle -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5abb5a9">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

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

Error occurred during download or resource does not meet image format requirements

Encountering an issue when attempting to utilize the icon specified in the Manifest: http://localhost:3000/logo192.png (Download error or invalid image resource) from the console? import React from 'react'; import Logo from '../Images/logo1 ...

javascripthtmlcssreactjsbrowser

Is there a way to code a checkbox within a dropdown menu?

I am seeking assistance in making this dynamic I am still learning Laravel and require some guidance on how to program a checkbox within a select dropdown. Here is the HTML form I have: <div class="container w60"> <div class="row pad_y_2 ...

phphtmllaravel-5

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

htmlcssangularwebpacksass

Steps for integrating bootstrap 5 into a Blazor Client project

Looking for assistance in setting up Bootstrap 5 for a BlazorWebassembly project that currently contains Bootstrap 4. Can anyone provide guidance on how to incorporate Bootstrap 5 into the project? ...

blazor-webassemblybootstrap-5

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild

What is the best way to determine the width of tables - in the HTML code or using a CSS class?

I recently came across some advice suggesting that a website should still be able to function properly even if the CSS files are not loaded. What approach do you think would work best in this situation? Would it be more effective to use <table width=50 ...

htmlcssclassattributes

Incorporating custom HTML5 player to watch Youtube videos on my website

I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...

javascriptphphtmlvideoyoutube

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

javascripthtmlangularjsdependency-injection

Having trouble resolving a setInterval problem with JavaScript?

Yesterday, I learned about the setInterval function which allows me to execute a task or function after a specific amount of time. While I have successfully implemented the interval in my code, it keeps adding new lines with the date each time. What I re ...

javascripthtmlfunctiondatesetinterval

Using Ajax to trigger JSON-formatted HTML output

Issue with Populating Modal Window I am encountering difficulties while trying to populate a modal window dynamically with extended information retrieved from a mySQL database. Despite attempting various methods such as nested arrays, while loops, and for ...

phpjqueryhtmlmysqljson

In Internet Explorer, the toggle div expands to fill the available space, but this behavior is not consistent in

Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content. You can view a demonstration of how the functionality operates correctly in Google Chrome here: If you encounter any issues with the functiona ...

jqueryhtmlcss

Is it possible to extract information from a string that includes HTML code within a browser using CSS selectors without actually generating the DOM elements?

I've been struggling with this basic task for hours. I can't find any libraries that work and none of the questions here address my specific issue. Here's what I need to do: The entire page's markup is in a string format. I must use ...

javascriptcssxml-parsingweb-scrapinghtml-parsing

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

I loaded my tabular data from the server using ajax with json. I aimed to generate HTML table rows dynamically using jQuery, with each row containing elements like input type='text' and select dropdowns. While I could create textboxes in columns ...

javascriptjqueryhtmlajax

PHP POST request with an additional value being sent

Greetings as this is my debut post! Currently, I am facing a challenge in my project. As seen in the screenshot provided, I have several names fetched from the database and displayed in the main menu. Upon clicking the "modal" button, a Bootstrap modal wi ...

phphtml

Retrieving data from a dynamic form using jQuery

Can someone assist me with the following issue: I have a dynamic module (generated by a PHP application) that includes input fields like this: <input type="text" class="attr" name="Input_0"/> <input type="text" class="attr" name="Input_1"/> ...

javascriptjqueryhtml

Utilizing Laravel 5.2 to showcase a video

I am currently developing in Laravel 5.2 and facing an issue with displaying a video on my view page. While I can successfully store the video in my database table, I am encountering difficulties when trying to fetch and display it. In my database table, I ...

phphtmltwitter-bootstrap-3laravel-5

Why is my DIV not registering clicks when I try to interact with it?

Trying to implement a Javascript click event <script type="text/javascript"> $(document).ready(function () { $(".role").click(function () { alert("idiot"); }); }); </script> Here is the CSS code for styling the DIV with clas ...

jqueryfunctionhtml

Displaying an image in a Bootstrap 5 tooltip / Issue 304

Working on a project using Bootstrap 5. I've implemented a tooltip that displays text and an image successfully by using data-bs-html="true". Here is how my input, including the tooltip, is structured: <input class="form-control ...

javascriptimagebootstrap-5

Calculator for calculating values using JavaScript data attributes

One issue is that certain elements are canceling each other out.. The value of the element is specified in the "data-price" attribute. My code is currently not valid and does not handle it properly, ideally I would like to update the total whenever a selec ...

javascriptjqueryhtmlcheckbox