Bootstrap badge is encountering loading issues

My index.html isn't displaying the badge correctly on any browser. The numbers aren't showing up in a colored circle, it looks like the CSS didn't load properly.

I've tried using both local and CDN paths for bootstrap and jquery, but the issue persists.

<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<div class="alert alert-danger" >
  <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a>
  File has been deleted!
</div>

<a href="#">Messages <span class="badge">5</span> < /a>

I'm looking to have it display the text "Messages" followed by a colored circle containing the number "5".

jqueryhtmlcssbootstrap-4

Answer №1

Check out this solution:

<!DOCTYPE html>
<html>


<body>
    <html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>



    </head>

    <body>

        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a>File has been deleted!
        </div>

        <a href="#">View Messages <span class="badge badge-pill badge-dark">5</span> </a>


    </body>

    </html>

</body>

</html>

Answer №2

You have successfully implemented Bootstrap 4.

Remember to update the span class to (badge badge-secondary).

<a href="#">Notifications <span class="badge badge-secondary">3</span> </a>

Answer №3

For detailed information on Bootstrap, please refer to the official documentation: Bootstrap 4

Here are some examples of badge colors:

<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>

To create round badges, you can use the class badge-pill:

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Answer №4

The color style is not included, for example

<span class="badge badge-primary">5</span>


<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
    
<div class="alert alert-danger" >
  <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a> File has been deleted!
</div>
<a href="#">Messages <span class="badge badge-primary rounded-circle">5</span></a>

Additionally, to achieve the circular effect, utilize .rounded-circle bootstrap class, which applies border-radius: 50%; css property.

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

Select all feature in checkbox is malfunctioning

I need to implement a feature with 3 checkboxes: When the "A" checkbox is clicked, only "A" should be highlighted. Upon clicking the "C" checkbox, only "C" gets highlighted. If the "B" checkbox is clicked, both "A" and "B" nee ...

jqueryhtmlcsstwitter-bootstrap

Acquiring the specific checkbox value using JQuery

I am encountering an issue with my JQuery function that is supposed to print out the unique value assigned to each checkbox when clicked. Instead of displaying the correct values, it only prints out '1'. Each checkbox is assigned an item.id based ...

javascriptjqueryruby-on-railscheckbox

Access your account using AJAX jQuery authentication

Having an issue with a simple login using ajax. Everything seems to be in order, but I can't figure out what's wrong. I need to notify the client that the user information is correct and then redirect them to the main page. Source Code <!DOC ...

jqueryajaxauthentication

Obtain serialized information from php using ajax

I am currently working with a php script that returns serialized data. I am trying to retrieve this data using the $.ajax() method from jQuery 1.7. You can find an example here. $.ajax({ url: 'http://input.name/get.php?do=lookup' + '&am ...

javascriptjqueryajaxdeserialization

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

javascripthtmlangular

AJAX is currently not operational

I've spent the last couple of hours trying to troubleshoot this issue with no luck. Can anyone provide any assistance? For some reason, the table fails to load when the button is clicked. Below is the relevant code snippet from my header: <head&g ...

phpjquerymysqlajaxmongodb

Encountering issues with website optimization on Google Page Speed Insights and facing compatibility problems on a specific website I designed

I attempted to analyze the performance of my website using Google Page Speed Insights and encountered an error message. I have tried looking for a solution without success. Interestingly, when I tested other websites that I manage, everything worked just ...

htmlcssbootstrap-4google-pagespeed

Tips for extracting a specific field value from a JSON response

My current challenge involves calling an external API system from my website. When I receive the response in AJAX, it includes the following data. object(stdClass)#3 (3) { ["status"]=> string(7) "success" ["code"]=> int(200) ["data"]=> ...

phpjqueryjsonajax

Including a JavaScript file in an HTML document initiates a server request, which can lead to potential errors

I am currently developing a web application using Express and Node.js on the backend, with EJS as the templating engine on the frontend. Here is a snippet of my app.js file: app.get('/book/:id', (req, res)=>{ var book_id = req.params.id; cons ...

javascripthtmlnode.jsexpressejs

Issue locating the bottom of the scroll bar

My attempt to detect when the scroll reaches the bottom of a div involves using this code: $('.scrollpane').scroll(function(){ if ($(this).scrollTop() + $(this).height() === $("#results").height()) { alert('scroll at bottom&a ...

javascriptjqueryscroll

Minimization tools for compressing CSS and JavaScript documents

After deploying my application, I noticed that the loading time has significantly increased. Is there a way to compress CSS and JS files? I include only the necessary code in each page and occasionally use minified versions of JS. Thank you. ...

javascriptcsscompressionminifyjscompress

Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8. This is the code snippet I have used: @font-face { font-family: 'DroidSans'; src: url('fonts/DroidSans.eot'); src: url('fonts/DroidSa ...

cssinternet-explorer-8cross-browserinternet-explorer-7

Create a layout with a single column that features a dynamic image, paired with another column housed within a modal using Bootstrap

I'm facing a design issue with a row that has two columns - one with an image and the other with a list of users in a modal window. As more users are loaded when scrolling down the modal, I want the image to remain fixed in its position. Here's t ...

htmlcssbootstrap-4

Resizing cell height in an HTML table is not supported by Angular 5

In my angular application, I've implemented a component that represents a basic HTML table. However, I'm facing an issue with reducing the height of cells within the table. It seems like my CSS styling is not affecting the display as desired. He ...

htmlcssangular

How should a frame be correctly inserted into a modal in Bootstrap?

I'm currently working on incorporating a frame into a CSS modal, but the current display is not quite ideal. Additionally, I manually adjusted the frame's position (top and left), which is causing misalignment issues for different screen sizes, r ...

cssbootstrap-4bootstrap-modal

Switching image when hovering with mouse using javascript

I am working on an HTML webpage and trying to make an image change when hovering over a div, but it doesn't seem to be working. Any suggestions? <!doctype html> <html> <head> <meta charset ="UTF-8"/> &l ...

javascripthtmlonmouseover

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

Implementing a full-width search bar within the Bootstrap navbar

I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search ...

jqueryhtmlcsstwitter-bootstrapnavbar

Breaking apart web addresses and their attached parameters

I am attempting to extract the part of a URL that comes after the last forward slash (/) and before the querystring. While I have been successful in obtaining the last segment of the URL, I have encountered difficulty in removing the querystring from it. ...

javascriptjquery

Variability in the positioning of list item markers depending on the child's display property

Looking at this code: <ul> <li> <div id="container"> <button>toggle display</button> <div>text</div> <div>text</div> </div> </li> ...

csshtml-lists