Creating a set width for the input-group-append division in Bootstrap 4

I am currently utilizing the power of Bootstrap 4's input group feature to position an icon next to an input field. My goal is to set a fixed width of 40px for the div containing the input-group-append (which houses the icon).

According to the official Bootstrap documentation, "Sizing on the individual input group elements isn't supported." However, I believe there must be a CSS workaround:

<div class="form-group">
  <label>Some label</label>
  <div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-append">
      <i class="icon"></i>
    </div>
  </div>
</div>

Does anyone have suggestions on how I can achieve this?

csstwitter-bootstrapflexboxbootstrap-4

Answer №1

Consider utilizing !important to avoid being overridden

.input-group-append{
width:40px!important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group">
  <label>Some label</label>
  <div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-append">
      <i class="icon">icon</i>
    </div>
  </div>
</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

Watir /Cucumber Element not found: dd-field div.dd-arrow-box (CSS Selector)

Chief complaint: The element cannot be located using CSS Selector Custom Css path: html.ng-scope body.ng-scope div.snap-content div.content-container div.ng-scope div.content-box div div.cb-landing-module div.deposit-acct-box div.dropdown div.dd-field ...

cssselectorwatir

Utilize JavaScript to dynamically deactivate hyperlinks during runtime

Utilizing Bootstrap <ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu"> <li role="presentation" id="LiNewsFeed"><a href="javascript:GetNewsFeed();">News Feed</a></li> <li role ...

javascriptjqueryhtmltwitter-bootstrap

Implementing a Slide animation in React

I am currently working on a carousel feature that includes two buttons, Next and Previous. When the user clicks on Next, I want the carousel to slide from left to right, and when they click on Previous, it should slide from right to left. One important not ...

cssreactjscss-animations

jQuery text alignment breaking bug

I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...

jquerycss

How can I incorporate a custom color into a preset navbar on an HTML webpage?

<div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" style="color: blue;" class="navbar-toggle collapsed" type="button"> <i class="fa fa-reo ...

javascripthtmlcss

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles

Safari Version 8.0.2 experiencing issues with fixed positioning

I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal. My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button tr ...

cssangularjstwitter-bootstrapsafari

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

javascripthtmlcss

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

htmlcss

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

htmlcssfocus

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

I am working with a webview that contains a React app, not React Native. The webview features a login page with two input fields and a fixed footer. However, when one of the input fields is focused, the footer moves up and covers part of the input field, ...

androidhtmlcssreactjswebview

Always maintaining a responsive and square aspect ratio div

I am developing a CSS and JavaScript-based game that requires the game field to be square and adjust its width and height based on the height of the viewport. In case the viewport width is smaller than the height, I need the field size to adapt while maint ...

htmlcssresponsive-design

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Purchased a theme called HelpGuru and encountering issues with the CSS of the menu. Reached out to support but they were unable to assist, directing me to a company that specializes in customizing WordPress themes instead. The link to the demo can be found ...

csswordpressmenupseudo-class

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

javascripthtmlcssfrontendvisual-glitch

Eliminating data from selection options on a HTML menu list

Currently, I am facing an issue while attempting to incorporate a menu bar into my HTML page. After adding the icons, they are displaying with both underlines and dots at the back. I have tried using text-decoration=none; to remove the underline, but unf ...

htmlcssmenunavigation

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

Is Next.js experiencing issues with animating presence specifically for exit animations?

I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected. Could someone please help me figure out what I'm doing wrong here? Be ...

javascriptcssreactjsnext.jsframer-motion

Align an Svg layer within another Svg to the center

I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...

htmlcsssvgiconscenter