How to center input-group inside a div?

Question

I want to center the .input-group inside a <div>. When I use the class center-block, the <span> takes the full width and pushes down the input field below it. I want to center them together.

 <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
     <div class="input-group input-group-lg inv-amount-block">
         <span class="input-group-addon" id="inv-rs">Rs</span>
         <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
     </div>
 </div>

I want to center them together like how they are by default.

Here is the fiddle

Answer 1

In Bootstrap 4, center-block has been replaced by mx-auto, and input-group has changed to display:flex. Here's how to center in Bootstrap 4...

     <div class="col-12">
          <div class="input-group input-group-lg w-25 mx-auto">
                <div class="input-group-prepend">
                    <span class="input-group-text">Rs</span>
                </div>
                <input type="text" class="form-control" placeholder="Your Amount">
          </div>
    </div>

Remember that input-group will fill the width of the parent, so in this case I added w-25 (width:25%) to demonstrate the centering.

Demo on Codeply

Answer 2

Just change the display property in the CSS for the .center-block

Edited: Difference between display: block and display: table is that - . display: block - will extend to 100% of the available space, while display: table - will only be as wide as its contents.

So in the latter case your span and input field would only be as wide as its content and won't take up the entire 40% width that is specified.

.center-block {
    display: table;  /* Instead of display:block */
    margin-left: auto;
    margin-right: auto;
}

              <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

                <div class="input-group input-group-lg inv-amount-block center-block ">
                  <span class="input-group-addon " id="inv-rs">Rs</span>
                  <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
                </div>
               
              </div><br>
              
                            <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

                <div class="input-group input-group-lg inv-amount-block ">
                  <span class="input-group-addon " id="inv-rs">Rs</span>
                  <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
                </div>
               
              </div>