How to center vertically content in bootstrap 4

Question

I want center vertically content in bootstrap 4

<div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-6 align-middle">
                        <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
                        <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw
                            verhuizing.</p>
                    </div>
                    <div class="col-5 align-middle">
                        <div class="input-group">
                            <div class="form-outline">
                                <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
                            </div>
                            <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

i want to center vertically this content

score 1 · Accepted Answer · answered Mar 22 '21 at 16:58

You can try this with .align-items-center.

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<div class="container">
    <div class="content">
        <div class="row align-items-center">
            <div class="col-6">
                <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
                <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.
                </p>
            </div>
            <div class="col-5 align-middle">
                <div class="input-group">
                    <div class="form-outline">
                        <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
                    </div>
                    <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Mar 22 '21 at 16:47

0

you can use flex class to make align-center like d-flex align-items-center or you can check full documentation on the official bootstrap website:- https://getbootstrap.com/docs/4.0/utilities/flex/

answered Mar 22 '21 at 16:47

sunny tailor

1

score -1 · Answer 3 · answered Mar 22 '21 at 17:08

I am not too sure about alone with Bootstrap, because it depends upon your container height. In you case, it would be equal to your content.
So, For Aligning it's content vertically, you need to set it's container height to 100% to its view. for ex, height:100vh.
Then, after you could use flexbox classes provided by bootstrap on that container
1. d-flex -> to set display flex.
1. align-items-center -> to set align center vertically.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex align-items-center" style="height:100vh;">
  <div class="content">
    <div class="row">
      <div class="col-6 align-middle">
        <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
        <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.
        </p>
      </div>
      <div class="col-5 align-middle">
        <div class="input-group">
          <div class="form-outline">
            <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
          </div>
          <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

How to center vertically content in bootstrap 4

3 Answers3