Achieving centered text alignment in a span using Bootstrap 5

I am facing an issue with a span in an input group that has a minimum width of 6rem. This is causing the text to not be centered, as spans typically adjust to the width of the text itself.

.input-group-text {
  min-width: 6rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524d524f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col input-group mb-3 d-flex justify-content-center">
  <span class="input-group-text">Ending</span>
  <button>...</button>
</div>

We can observe that the text "Ending" is not centered in the output. Applying 'text-center' to the span or 'text-align: center;' to the input-group CSS does not resolve the issue.

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

htmlcssbootstrap-5

Answer №1

Have you considered centering an element using flex properties?

<span class="d-flex justify-content-center align-items-center input-group-text">
    Ending
</span>

Does this meet your needs?

Answer №2

After applying the justify-content-center class to the span, it appears to be functioning correctly. More details can be found at https://getbootstrap.com/docs/5.1/utilities/flex.

.input-group-text {
  min-width: 6rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d3d29263d784527425727742e22452f4d1a0808">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col input-group mb-3 d-flex justify-content-center">
  <span class="input-group-text justify-content-center">Starting</span>
  <button>...</button>
</div>

<div class="col input-group mb-3 d-flex justify-content-center">
  <span class="input-group-text justify-content-center">Closing</span>
  <button>...</button>
</div>

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

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Challenges with displaying HTML website on mobile platform

Hey there! I admit that my website may not be the greatest, but bear in mind that this is just a school project page. My current issue is with the mobile view styling - the hamburger menu should replace the nav bar on smaller screens, but it's not wor ...

htmlcss

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

htmlangularjsvalidationangularjs-directiveionic-framework

Angular causing alignment issues for items not centered

I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...

cssangular

Steps to customize the Spark theme in Flex 4

In the default Spark theme in Flex 4, what type of styling is included? Additionally, how can one override the Spark theme? For instance, when attempting to change the background color but seeing no effect, even though the CSS code appears correct. Here&ap ...

cssflex4

How can I use CSS to conceal the controls for an HTML5 video?

Seeking advice on how to hide and show controls on an HTML5 video section. I currently have a setup where clicking on the video div opens a modal that plays the video in a larger size. The code for opening the modal and playing the video is working fine. ...

jquerycsshtmlhtml5-video

Immersive full-screen YouTube video embedded as hero background

Seeking a solution in HTML & CSS to display this embedded video as a 75vh height hero background. Currently, the iFrame maintains its width: 100% and height: 75vh, but the images themselves do not cover the entire header width. Essentially, I want it ...

htmlcssyoutuberesponsive

What is causing vertical-align:middle to not function in the same way as text-align:center?

Is there a reason why vertical-align:middle doesn't seem to work as easily as text-align:center? It's frustrating that it's so challenging to get it right. I'm curious why the folks at W3C haven't created something like text-alig ...

htmlcss

Animations are failing to run within a Bootstrap card when using Vue rendering

I have utilized Bootstrap cards to display pricing information in my project. I implemented a collapse feature for half of the card when the screen size is equal to mobile width. While using vanilla Bootstrap, the animation worked seamlessly with the col ...

javascriptcssvue.jsbootstrap-4

Retrieve Images from URL - Similar to Facebook Thumbnails

I am in the process of creating a website similar to "Reddit." Users will have the option to share URLs, and I would like to use PHP to extract the correct image from these links. What I'm looking for is a more advanced script that can retrieve imag ...

phphtmlimageparsingfetch

Attempting to build a table within a table structure

My goal is to create a nested table structure similar to this image: https://i.sstatic.net/v6lZo.png The number of months, topics, and arguments for each topic can vary as they are retrieved from a database. I have attempted to implement this functionali ...

htmlangulartypescriptbootstrap-4

Horizontal navigation bar encroaching on slideshow graphics

I'm encountering difficulties aligning the horizontal menu below the image slider. When I have just an image without the slider, the menu aligns properly (vertically), but as soon as I introduce the code for the slider, the menu moves to the top and d ...

javascriptjqueryhtmlcss

Gliding along a div and concealing it out of view, making it seem like it has disappeared

I attempted to slide down the ".preloader" div after a 2-second delay using JQUERY, but I couldn't get it to work as expected. I didn't want to use a toggle button for this effect. I also experimented with creating an animation using @keyframes, ...

javascripthtmljquerycss

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

javascriptjquerypythonhtmlajax

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

javascriptjqueryhtmlcss

I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

I attempted to animate the rotation of a circle and display the content of a specific image by pausing it for a period of time. However, I am unsure how to halt the animation and display the content of the specified image. Here's what I tried: HTML C ...

htmlcsssassbootstrap-5

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

What is the best way to display an alert box through AJAX technology?

My code snippet is as follows: <script> function updateQty(quantity) { $.ajax({ alert(quantity); }) } </script> Here is the corresponding HTML markup: <form name="quantityForm"> <select name="quantity" id="quantity" onChan ...

javascriptjqueryhtmlajax

What is the best way to enable duplicate entries in ng-repeat?

When utilizing stringify, the json data gets formatted and appears in an alert message. However, when attempting to display it in an actual link, it is not showing up. Upon checking the console, an error was displayed stating that "duplicates are not allow ...

htmljsonangularjsmodel-view-controllerangularjs-ng-repeat

Customizing an external module class using CSS module pattern in React

Is there a way to locally override an external module's CSS class for a specific component? Here is my current code: import `style` from './style.module.css' // local CSS module import `ExternalComponent` from 'ExternalComponent&apos ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules