Positioning a bootstrap badge flawlessly inside a block of text

The issue arises when adding a badge in the image below, as there seems to be more space above the badge than below it. Even though the Bootstrap 4 code is clean and untouched, it doesn't work seamlessly. Despite my attempts to adjust margins and line-heights for an hour, I eventually had to concede defeat.

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <p class="text-center w-100 mb-0">
      <b>
        <a class="link-unstyled" target="_blank" href="#">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success">
        New
      </span>
    </p>
  </div>
</nav>

https://i.sstatic.net/bYNH8.png I have included a fiddle link below to demonstrate the problem clearly.

https://jsfiddle.net/funkdified/t4xdhuo7/2/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure perfect alignment and centering of content within a .row element, simply include the classes .justify-content-center and .align-items-center.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <div class="row w-100 mb-0 justify-content-center align-items-center">
      <b>
        <a class="link-unstyled" target="_blank" href="https://www.hearingtracker.com/hearing-aids/deals">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success ml-1">
        New
      </span>
    </div>
  </div>
</nav>

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

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

javascriptjqueryhtmlcss

How can I display only four decimal places by default within textboxes in HTML?

Looking for assistance with configuring textboxes in a cshtml file. The textboxes are bound to decimal fields in a view model and currently display nine zeros after the decimal point. I would like to limit the display to only four digits by default witho ...

javascriptc#htmlcssasp.net

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

BOOTSTRAP Issue: The sticky footer in the template is not staying sticky

I am at the point where I am tempted to open my window and throw my computer out. I followed a tutorial on Bootstrap for the footer template. Everything looks good, but when my text extends beyond one page, the footer remains stuck in place and does not m ...

htmlcsstwitter-bootstrapbootstrap-5

Create a stylish accordion in asp.net with custom arrow buttons using CSS

Can anyone help me find the proper CSS for an asp.net ajax accordion menu with a vertical orientation that includes arrow buttons on each pane? I need the arrows to change when the menu is expanded versus collapsed. ...

asp.netcssajaxajaxcontroltoolkitaccordion

Tips for concealing a dynamic table element in Angular 9

I have dynamically generated columns and rows in a table. Here is my HTML for the table component: <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th *ngFor="let header of _ob ...

javascripthtmlangularfrontend

Using CodeIgniter, input information into a textbox and verify if there is a corresponding record in the database when submitting

Working on a CodeIgniter project, I am faced with the task of adding information to a form within my view page called meal_add.php. Below is the form structure: <div id="content" class="box"> <form action="<?php echo base_url(); ?>index ...

phphtmlmysqlcodeigniter

What is the best way to add a separator in a b-dropdown menu once the options have been loaded using Vue?

Here is the code snippet for my dropdown element: <b-dropdown id="SchemaDropdown" name="SchemaDropdown" variant="form-control" class="" style="width: 100%" ...

javascripttwitter-bootstrapvue.jsvuex

What is the process for modifying the path and polyline in an SVG file?

I have a pair of SVG icons that I am working with. Recent Update: Icon One Icon Two One question that I have is whether it is possible to create both icons using the same HTML markup? For instance, can I use something like: <g> <circle ... ...

htmlcsssvgjointjs

Achieving the perfect horizontal alignment of images

Currently working on a new project and here's the page I'm focusing on: The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this ...

htmlcss

Enhance the user experience with Twitter Bootstrap 3 tooltips featured on every title

Is there a way to display tooltips on all title="" attributes without having to define each #id in the javascript? I have a large table with over 100 entries and it's not practical for me to manually define each row in the script at the footer. Any s ...

jquerytwitter-bootstraptwitter-bootstrap-3

Tips for evenly spacing Navbar items in Bootstrap 4

Designing a navigation system using Bootstrap for my website. I'm struggling to figure out the best way to space out the navigation link elements on my navbar so that it looks good on both desktop and mobile screens. This is my current navbar code: ...

csswordpresstwitter-bootstrapbootstrap-4

What is the best way to include a JavaScript variable within CSS styling?

I am currently implementing a dropdown menu system where the image of a parent div changes on mouse hover over a link, and reverts back when the mouse moves away. I have this functionality set up using a variable in my HTML code. Is there a way for me to m ...

javascripthtmlcss

Webpack version 4.6.0 is currently loading a CSS file and it's suggesting the need for a suitable loader to manage this specific file

I have been encountering an issue with webpack 4.6.0 during compilation: Uncaught Error: Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type. | div { | background-color: yellow; | color: red; He ...

cssreactjswebpack

Instead of utilizing just one <select> element, Django mistakenly generates two while attempting to implement Bootstrap for form uploads

Struggling to develop a website using django and facing an issue where two select lists are appearing instead of one. Here is the HTML code: <form action="/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="form-g ...

pythonhtmldjangotwitter-bootstraptemplates

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

jqueryhtmlip-camera

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

htmlnode.js

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel