How to center an input on a grid in Bootstrap 4?

Question

How to center an input on a grid in Bootstrap 4?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, everyone.

I'm starting with front-end web programming and I have a question regarding Bootstrap 4, and its grid system. Basically how to centralize input and p within Grid.

I have the following code:

    <div class="container-fluid mt-2">
        <div class="row">
            <div class="col-md-2 offset-md-1">
                <a href="http://placehold.it"><img src="http://placehold.it/200x150"></a></div><divclass="col-md-6 pt-5">
               <div class="input-group">
                    <input type="text" class="form-control">
               </div>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>

What I basically want is to center this input and p within the grid, so that it is next to the 200x150 image. (As the image increases, the size of the row also increases, leaving the other elements at the top). I was able to do this by placing inside the class <div class="col-md-6"> pt-5 , however it gives a padding-top of 5, getting a bit of a "gambiarra" and not centralizing inside the Grid correctly.

I would like to know if there is any way to centralize the input without having to use the pt-5 within the class to make the spacing from the top.

Thank you!

grid bootstrap

asked by anonymous 06.04.2017 / 07:21

2 answers

How to add 2 columns? Oracle insert too many values

score 1 · Answer 1

Use the text-align: center in the parent divs, for example:

<div class="container-fluid mt-2">
    <div class="row">
        <div class="col-md-2 offset-md-1">
            <a href="http://placehold.it"><img src="http://placehold.it/200x150"></a></div><divclass="col-md-6 pt-5" style="text-align:center">
           <div class="input-group">
                <input type="text" class="form-control">
           </div>
        </div>
        <div class="col-md-3" style="text-align:center">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

score 0 · Answer 2

You can use Flex display on the parent (image) Ex:

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  font: 20px arial;
  color: #000;
}

.wrapper {
  height: 100%;
  min-height: 100%;

  /* habilita o flex nos filhos diretos */
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;

  /* centraliza na vertical */
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;

  /* centraliza na horizontal */
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.wrapper div {
  padding: 20px;
  border: 1px solid gray;
}

<body>
  <div class="wrapper">
    <div>
      Exemplo de alinhamento
    </div>
  </div>
</body>