Tips for Customizing a Bootstrap input-group to Resemble a form-group

I'm struggling to match the appearance of the last row with the others, but I want to include the icon in the text box. Adjusting the width has been a challenge!

(I'm sorry for the inconvenience, the code snippet may not display correctly on this page. For better visibility, please switch to full screen mode.)

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label>Date To:</label>
      <input type="text" class="form-control" />
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Keep the structure of the group of the div above the "Date to:" label intact, then wrap the input and image div's in a new div and apply the input-group class to achieve the desired outcome, please refer to the example below!

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-sm-3">
      <div class="form-group row">
        <label>Name:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date From:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date To:</label>
        <div class="input-group">
          <input type="text" class="form-control" />
          <div class="input-group-append">
            <div class="input-group-text" id="btnGroupAddon2">
              <i class="fa fa-search" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

To align it to the left, some additional work outside of the usual class setup is required:

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label class="pt-2">Date To:</label>
      <input type="text" class="form-control ml-2"
      style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </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

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smal ...

htmlcssdrop-down-menuresponsive-design

Prevent HTML Characters from Rendering in Preformatted Text Tag

After setting up a syntax highlighter, I found out that for it to function properly, the tags need to be indicated as &lt; and &gt;. My task now is to switch all <'s with &lt; and >'s with &gt;, but only within the PRE tag. ...

phphtmlreplacepre

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...

htmlcss

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Error encountered: The Bootstrap modal() function is showing as undefined when using npm modules

Every time I attempt to call $("#myDiv").modal(), an error occurs. The error message reads: Uncaught TypeError: undefined is not a function This error has popped up in different scenarios, with various parameters being passed to modal(). Many solutions o ...

javascriptjquerynode.jstwitter-bootstrap

Incorporating an image prior to the "contains" term with the help of JavaScript

Seeking assistance with the code snippet below without altering the text targeted in my "a:contains" statement. The challenge lies in determining the appropriate placement of ::before in the script provided. Link: https://jsfiddle.net/onw7aqem/ ...

javascripthtmljquerycssajax

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

Tablet displaying incomplete background image

I am facing an issue with my background image only showing inside the content blocks, as you can see in the screenshot. I have a small fadeIn animation for the content, but nothing else special. Here is the CSS code I am using: .template_home { backgro ...

htmlcssimageipadtablet

Guide to leveraging Bootstrap mixins within VueJS components

I'm currently using vue-cli and bootstrap-vue in my project. I'm facing an issue with bootstrap mixins not working as expected, even though I have imported Bootstrap in my main.js like this: import 'bootstrap/scss/bootstrap-grid.scss' ...

vue.jsbootstrap-4vue-component

Could not locate the provider: $stateProvider

It's puzzling to me why this code is not recognizing the $stateProvider. Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $stateProvider This is a simple example of a module: ( ...

javascripthtmlangularjs

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

Issue with collapsed navbar button functionality in Bootstrap version 5.1.3

Issue with Bootstrap 5 Navbar Collapse Functionality The navbar collapse button is not working on my PC. The button appears but when clicked, the navbar does not show up. Surprisingly, when I test the code on Codeply (without linking to Bootstrap 5 and ot ...

javascripthtmljquerybootstrap-5

The issue of a centered image not displaying properly and the inability to adjust the font

I'm trying to get the image to display bigger and in the center, but no matter what I try it's not working. HTML: <div class="content-grid"> <img src="test.jpg" /> </div> CSS: .content-grid img{ display: block; margin: ...

htmlcss

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...

cssangulartypescriptsassangular-material

Using JavaScript import may encounter issues when trying to access the same file or a different file

When importing something and using it, there are certain scenarios where it may not work as expected. For example: <html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module"> ...

javascripthtml

Inserting a custom text box underneath the Anything Slider

I am currently incorporating the Anything Slider into a website project. The main purpose of the slider is to showcase videos, but I would like to include a description text box beneath it that dynamically changes based on the selected tab. This snippet de ...

javascriptjqueryhtmlcssanythingslider

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

Changing the background color to white causes the progress bar line to become indiscernible

Here's how my form appears: https://i.sstatic.net/jXCxm.jpg Once I set the container to be: <div class="container" style="background:white;"> https://i.sstatic.net/DZjAK.png I want to make it white and ensure that the prog ...

htmlcsstwitter-bootstrap

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

htmlcss

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

phphtml