centering a div or input element vertically using bootstrap

Question

https://i.stack.imgur.com/2OHp2.png

My code rn:

<body class="bg-light">
        <div class="row justify-content-center mt-3">
            <div class="col-6">
                <input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
            </div>
            <div class="col-1">
                <button class="btn btn-primary" id="btn">Search</button>
            </div>
        </div> 
</body>

You can use my-auto class to make content vertically center respective to it's container — Codenatial Developer, Jul 06 '22 at 06:08

score 0 · Answer 1 · answered Jul 06 '22 at 06:31

0

Add align-items-center and min-vh-100 with your row

answered Jul 06 '22 at 06:31

ANDO Andriamalala

308
1
7

score 0 · Answer 2 · answered Jul 06 '22 at 06:36

This fixed it for me:

<body class="bg-light">
        <div class="row container-fluid justify-content-center position-absolute top-50 start-50 translate-middle">
            <div class="col-6">
                <input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
            </div>
            <div class="col-1">
                <button class="btn btn-primary" id="btn">Search</button>
            </div>
        </div> 
</body>

score 0 · Answer 3 · answered Jul 06 '22 at 06:44

You need to add align-items-center and min-vh-100 to your row. Like this:

<body class="bg-light">
 <div class="row justify-content-center align-items-center min-vh-100 mt-3">
  <div class="col-6">
   <input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
  </div>
  <div class="col-1">
   <button class="btn btn-primary" id="btn">Search</button>
  </div>
 </div> 
</body>

score 0 · Answer 4 · answered Jul 06 '22 at 06:53

There are a few ways you can achieve this. But let's take a look at how it is done in CSS and compare it to the utility classes in Bootstrap.

Considering we have the following HTML

<div class="parent">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Solution with CSS Flex

.parent {
  display: flex;

  /* Center Horizontally */
  justify-content: center;
  
  /* Center Vertically */
  align-items: center;
}

Solution with Bootstrap Flex Utilities

<div class="d-flex justify-content-center align-items-center">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Solution with CSS Grid

.parent {
  display: grid;
  
  /* Center both vertically and horizontally */
  place-items: center;
}

Solution with Bootstrap Grid Utilities. Unfortunately, there is no class for place-items-center. Therefore, you can use inline styles

<div class="d-grid" style="place-items:center">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Bear in mind that for you to be able to center anything in the middle of the screen, you'll have to define a height to the parent. If you are using any block level element such as div the width is already 100%. But the height will always follow the content. In the screenshot you shared, it seems like you want to center it in the middle of the screen. For that you'll have to add vh-100 (View Height 100) to the parent to have it expand to the full height of the screen.

centering a div or input element vertically using bootstrap

4 Answers4