Is it possible to align input-group-addon's by adjusting their widths without overriding the CSS?

My bootstrap inputs have input-group-addon tags as labels, but I want all the labels to be the same width for a consistent visual effect. I've tried manually setting the width of these span elements to the largest one on the page (let's say 75px).

Creating my own CSS class isn't working, as bootstrap seems to override it in ways I don't understand.

Even creating a .input-group-addon.myClass CSS class doesn't produce the desired result. The browser shows that this style isn't overridden by another, but it doesn't seem to affect the span element.

Simply adding a style="width:75px" to the span also doesn't achieve the goal.

I'm struggling to find a way to override this style and make all my spans line up evenly despite varying text lengths.

For a code example, visit: http://www.bootply.com/SvJAiwVavY

csstwitter-bootstrap

Answer №1

After reviewing the code snippet you provided, it appears that Bootstrap's .input-group-addon class already has a display property of table-cell, so adjusting the width should be sufficient. If you set a width smaller than the text inside, the change may not be noticeable. I recommend modifying your code as shown below:

.input-group-addon.test {
   width: 200px !important;
}

You might also consider changing the text-align to something other than center depending on your preference.

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

Attribution of image in footer

The image above the footer is not displaying properly. Screenshot: Image appears below the footer https://i.stack.imgur.com/RvSqI.png Source Code .footer-area { background-position: center; position: relative; z-index: 5; } .footer-area::before { ...

htmlcss

What is the best way to design a three-color column layout without any text?

I am attempting to design a three-color column layout using Bootstrap without any text. I have successfully created the columns with the desired colors, but I am facing an issue regarding how to remove the text without affecting the size of the columns. W ...

htmlcssbootstrap-4

Display toolbar title on small screens in separate lines

Recently, I encountered an issue while using v-toolbar in my vue app. Despite my efforts, I couldn't find a way to split the title into multiple lines on small screens. Currently, it displays as "Secti...." on smaller devices. Can anyone assist me wit ...

javascriptcssvue.js

Obtain the position of the click

My goal is to generate a 2dgrid with dimensions xMax = 10, yMax = 6 that looks like the following: x 0 1 2 3 4 5 6 7 8 9 _ _ _ _ _ _ _ _ _ _ y |_|_|_|_|_|_|_|_|_|_| 0 |_|_|_|_|_|_|_|_|_|_| 1 |_|_|_|_|_|_|_|_|_|_| 2 |_|_|_|_|_|_|_|_|_|_| 3 |_|_|_|_|_|_|_ ...

javascriptjqueryhtmlcss

The React style background property for CSS styling

Is there a way to apply the css property background inline in react? I attempted to pass the following object without success: let style = { background: `linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ...

cssreactjs

utilizing CSS on a feedback platform (survey gizmo)

I'm relatively new to web programming, dabbling with bits of HTML and CSS. My understanding is quite limited in this area. As I face my current dilemma, I wonder whether it's due to my lack of coding knowledge or if it's a limitation of the ...

htmlcsssurvey

Align the button at the center of the carousel

While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am stru ...

htmlcssresponsive-designresponsive

When working with Angular, text that exceeds a certain length is not wrapping to the next line as it should, but instead overlapping with other

Can someone please assist with a coding issue I'm experiencing in HTML? <div class="equipment-utilization-chart" > <ng-container *ngIf="data.healthRecco1 !== ''" > <div class="recommendations"> <p> 1. {{data.he ...

htmlcssangular

Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

Currently, I am in the process of developing a project using Django. My goal is to implement custom CSS properties, such as font-size, across all Django admin pages - including User change and User add pages - simultaneously. This would streamline the proc ...

cssdjango

In WordPress, you can add a logo with accompanying text positioned at the bottom of the page

Can someone help me create a header with a logo and text positioned at the bottom next to it? I want the text to be aligned with the bottom of the image. Any suggestions on how to achieve this? Here is the logo image: https://i.sstatic.net/W2S0U.jpg And ...

htmlcsswordpress

Move the border in a masonry grid to the adjacent column

I'm experiencing an issue with my masonry grid where, in some cases, the border of the first item moves to the next column. It doesn't happen consistently and I'm struggling to identify the cause. In general, it looks disorderly and affects ...

css

Tips for implementing automatic line wrapping in a PDF document using React-PDF

I am experiencing an issue with a PDF rendering where very long words are not wrapping onto a new line, instead overflowing the container and disappearing off the page. Below is the setup causing this problem. The styles are listed followed by the actual ...

javascriptcssreactjsreact-pdf

Tips on adjusting the font size of headers in a Vuetify v-data-table?

I've been struggling to change the font size of the headers in my v-data-table. No matter what I try, the font doesn't seem to update. I even experimented with the Chrome developer tool and managed to make it work there. However, when I attempt t ...

cssvue.jsvuejs2vuetify.jsv-data-table

Using jQuery UI to style div elements with dynamic titles

Is it possible to style a standard div container using the same styling as jQuery dialogs? I am looking to create a div panel with text content but with the title bar styling similar to that of jQuery UI dialog boxes. Appreciate your assistance in advance ...

htmlcssjquery-ui

Maintaining fixed position for cursor events in CSS

Here is a simple popup I created using tailwindcss to display project descriptions. Take a look at the code snippet below: // Code snippet here... I am facing an issue where both the container (outer div) and the first inner div have the same click event. ...

cssreactjstailwind-css

How to Center Title Horizontally with Material-Ui and Custom Styling

I'm trying to horizontally align the title Hello John Joseph Jones at the top inside the black box, but it's taking up too much vertical space. I'm not sure if my code is correct, so any suggestions for improvement are welcome. https://i.ss ...

cssreactjssassmaterial-uijss

Is it possible to maintain the width of an element even when its height is set to 0px?

Let me provide a detailed explanation of my issue below, but the question remains the same: Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari? Here ...

htmlcsssafariheight

"When hovering over an image, it enlarges and appears on top of other images on the

When setting up my homepage in Chrome, I decided to use an HTML page with icons for quick access to my most used websites. Wanting to make it more dynamic and visually appealing, I made some changes by rounding the corners of the icons and graying them out ...

htmlcssimagehover

Strategies for creating a clickable dropdown menu

I am currently developing a website that requires 15 HTML files. I have created a navbar with 3 direct links nav-items and 2 dropdowns. How can I make the dropdown menu appear on hover instead of click, and navigate to the dropdown href link when clicked? ...

htmlcssbootstrap-4

Tips for including a horizontal scroll in the Bootstrap 4 navbar with a large number of navigation items

How can I implement a scroll feature for navbar items in a Bootstrap menu when there are numerous items? Here is my code: <nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top"> <a class="navbar-brand" href="/">Brand name< ...

cssbootstrap-4