CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Naveen Kumar
Naveen Kumar

Reputation: 1626

How to center input-group inside a div?

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

Upvotes: 12

Views: 19736

Answers (5)

macmuri
macmuri

Reputation: 112

This was the solution I found for this type of problem.

....
<div class="input-group mb-3" style="margin-left:calc(50% - 80px);">
    <span class="input-group-text">Rec ID:</span>
    <input type="text" class="form-control"  value="" />
</div>
....

I calculate the left margin. 80px is half the width of the object

Upvotes: 0

Asra Fud Duha
Asra Fud Duha

Reputation: 630

Use display: grid for input-group-text element.

<div class="input-group">
    <div class="form-floating" style="width: 85%;">
        <input type="text" class="form-control" id="abc" placeholder="Description">
        <label for="abc">Description</label>
    </div>
    <div class="input-group-text" style="display: grid; width: 15%;">Hello</div>
</div>

Upvotes: 0

Bhautik Jivani
Bhautik Jivani

Reputation: 69

Copy below code and paste in your file and run check this input box is align center and responsive also.

This example is based in bootstrap v3.4

<!DOCTYPE html>
<html>

<head>
  <title>Center Input box demo</title>
  <link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <form class="row" action="" method="post" id="search_project_form">
      <div class="col-md-4 col-sm-2 col-sm-offset-4 col-xs-offset-2">
        <input type="text" name="search_group" id="search_group" class="form-control" placeholder="Group Number" required>
      </div>
      <button type="submit" class="btn btn-primary">Download Data</button>
    </form>
  </div>

</body>
</html>

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 10

Chaitali
Chaitali

Reputation: 651

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>

Upvotes: 9

Related Questions