How to center a text box field in bootstrap

Question

I'm trying to put a text field in the center of me screen, yet everything I try, it just stays left align. How do I center this?

<div class="form-row">
    <div class="col-md-4 col-md-offset-4">
        <div class="form-group">
            <label asp-for="FirstName"></label>:
            <input asp-for="FirstName" class="form-control" />
        </div>
    </div>
</div>

try this class with your form-group: `justify-content-center`... Not sure what you've tried and haven't tried. — Shmack, Nov 26 '20 at 05:53

score 1 · Answer 1 · answered Nov 26 '20 at 05:55

1

You are using bootstrap so just simply put text-center class on input like this.

<div class="form-row">
<div class="col-md-4 col-md-offset-4">
    <div class="form-group">
        <label asp-for="FirstName"></label>:
        <input asp-for="FirstName" class="form-control text-center" />
    </div>
</div>

i tried your cod ants all center after putting the class.

answered Nov 26 '20 at 05:55

yasir ali

106
10

Interesting, this unfortunately didn't work for me – Forrest Nov 26 '20 at 06:13
which version of bootstrap are you using?? – yasir ali Nov 26 '20 at 06:34
using version 4 – Forrest Nov 26 '20 at 06:57
:

then try this. – yasir ali Nov 26 '20 at 07:25

score 1 · Accepted Answer · answered Nov 26 '20 at 07:13

Solution 1) You can use class= "offset-md-4" in bootstrap-4. It's not col-md-offset-4

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="form-row">
  <div class="col-md-4 offset-md-4">
    <div class="form-group">
      <label asp-for="FirstName"></label>:
      <input asp-for="FirstName" class="form-control" />
    </div>
  </div>
</div>

Solution 2) You can use class="mx-auto" which is nothing but margin-left:auto

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="form-row">
  <div class="col-md-4 mx-auto">
    <div class="form-group">
      <label asp-for="FirstName"></label>:
      <input asp-for="FirstName" class="form-control" />
    </div>
  </div>
</div>

Anshu Bharti · Answer 3 · 2020-11-26T07:50:36.410

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Image Souk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>

<body>

    <div class="row">
<div class="offset-4 col-sm-4">
    <div class="form-group">
        <label asp-for="FirstName"></label>:
        <input asp-for="FirstName" class="form-control text-center" />
    </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

score 0 · Answer 4 · answered Nov 26 '20 at 05:54

0

<div class="col-md-4 col-md-offset-4">Put your form here</div>

col-md-4 will take 4 columns out of 12. col-md--offset-4 will add one 4 column to both sides of this form.

answered Nov 26 '20 at 05:54

Fazal Jarral

160
1
14

score 0 · Answer 5 · answered Nov 26 '20 at 06:32

You needed to show your custom css. Perhaps there are rules that may override the rules suggested here.

Try like this:

div.form-row div.col-md-4.col-md-offset-4 div.form-group {
  display: flex!important;
  justify-content: center!important; 
}

<div class="form-row">
    <div class="col-md-4 col-md-offset-4">
        <div class="form-group">
            <label asp-for="FirstName"></label>:
            <input asp-for="FirstName" class="form-control" />
        </div>
    </div>
</div>

How to center a text box field in bootstrap

5 Answers5