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

Asked

Viewed 1,072 times

0

Hello, everybody.

I’m starting with front-end web programming and I have a question about Bootstrap 4, and its grid system. Basically how to center the input and the p inside the Grid.

I have the code below:

    <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>
            <div class="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 want is basically to center this input and the p inside the grid, so that it is next to the 200x150 image (which when increasing the image, the size of the row also increases, leaving the other elements at the top). I managed to do this by placing inside the class <div class="col-md-6"> the pt-5, but it gives a padding-top of 5, getting kind of a "gambiarra" and not centering inside the Grid properly.

I wonder if there is any way to centralize input without using the pt-5 inside the class to make the spacing of the top part.

Thank you!

bootstrap grid

2 answers

1

Use text-align:center on parent Ivs, 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>
        <div class="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>

  • Hi, thanks for the answer. Basically does not meet what I need, because what I want is to center in the middle of the Grid so that changes the padding and I would like to know if there is any class for this, not just change the orientation of the paragraph/image to the center.

  • You want to center vertically in relation to the image size?

  • That, I intend to center the form and paragraph vertically in relation to the size of the image that occupies the first two columns.

0

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>

Browser other questions tagged bootstrap grid

You are not signed in. Login or sign up in order to post.