Centering a form & input

Question

i've been trying to center my form & input horizontally but it doesn't work

I've tried using margin & padding but nothing works.

body {
    background-color: #2F2F2F;
}


/* Form (outside) */
.form-inline {
    padding: 1% 0%;
}

/* Input (inside) */
.form-control {
    background-color: #353434;
    border: #3E3E3E 2px solid;
    /* Top right bottom left */

    /* Align the writing in the center*/
    text-align: center;
}


/* Search text */
.form-control::placeholder {
    color: #AEAEAE;
    text-align: center;
}

<header>
    <!-- Search inputForm -->
    <div class="container">
        <form class="form-inline my-2 my-lg-0" action="#POST">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        </form>
    </div>
</header>

Your CSS says to center the text within the `form-control`, and that's exactly what it does... — Niet the Dark Absol, Jul 07 '19 at 17:03

score 1 · Answer 1 · answered Jul 07 '19 at 17:09

1

.container {
  display: flex;
}

form {
  margin: 0 auto;
}

answered Jul 07 '19 at 17:09

Gustavo Maximo

4,426
3
17
26

how do I increase the size and have it stay in the horizontal middle? – Lol123abc Jul 07 '19 at 17:13

Sai Manoj · Answer 2 · 2019-07-07T17:20:18.207

To vertical center your form you can do this way

form{
width:fit-content;
margin:0 auto
}

for the vertical and horizontal center you can do by transform:translate(-50%,-50%). Below is working snippet

form{
width:fit-content;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

body {
    background-color: #2F2F2F;
}


/* Form (outside) */
.form-inline {
    padding: 1% 0%;
}

/* Input (inside) */
.form-control {
    background-color: #353434;
    border: #3E3E3E 2px solid;
    /* Top right bottom left */

    /* Align the writing in the center*/
    text-align: center;
}


/* Search text */
.form-control::placeholder {
    color: #AEAEAE;
    text-align: center;
}
form{
width:fit-content;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

<header>
    <!-- Search inputForm -->
    <div class="container">
        <form class="form-inline my-2 my-lg-0" action="#POST">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        </form>
    </div>
</header>

score 0 · Answer 3 · answered Jul 07 '19 at 17:17

0

You should learn about flexbox, in bootstrap to center as u want the class to use is :

justify-content-center

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
    <!-- Search inputForm -->
    <div class="container">
        <form class="form-inline my-2 my-lg-0 justify-content-center" action="#POST">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        </form>
    </div>
</header>

answered Jul 07 '19 at 17:17

Christian Carrillo

2,751
2
9
15

bootstrap has predefined many classes that you intend to implement, for example: in background-color: #2F2F2F in bootstrap u should use bg-dark; in text-align: center; in bootstrap u should use text-center, etc. U should read [bootstrap documentation](https://getbootstrap.com/docs/4.3/getting-started/introduction/) to not repeat same class or properties. – Christian Carrillo Jul 07 '19 at 17:27
thanks a lot man, let's say I want to increase the width, should I use padding or should I use width: bla bla bla? – Lol123abc Jul 07 '19 at 17:53
width of course – Christian Carrillo Jul 07 '19 at 17:54
Okay so rn i'm trying to increase the width of the entire form but it doesnt change anything. Also when should I use padding? – Lol123abc Jul 07 '19 at 18:04
i dont sure what you want to do, maybe u are asking for bootstrap column system and his responsive system – Christian Carrillo Jul 07 '19 at 18:09
i'm not asking for a culmn systen nor a responsive system im simply asking how to increase the width of my search form since right now when I change the width it just pushes it to the side and doesnt change anything. – Lol123abc Jul 07 '19 at 18:51

Centering a form & input

3 Answers3