Vertical Alignment Bootstrap

Question

Vertical Alignment Bootstrap

Navigation

#1 by (0 votes)

1

Hello, I'm creating a site in bootstrap 4. When I try to center a section of my site vertically, it just does not work. I've tried using several ways to focus the text (flexbox, custom css, ...), but nothing seems to work. The code I used was as follows:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">
      <img src="images/school-portugal.png" width="100%" height="100%"/>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8 schools-text">
      <span class="align-middle">
        <h3>Portugal</h3>
        <p>Portugal is represented by OFICINA - Escola Profissional do INA, a school located in the north of the country, in the city of Santo Tirso, district of Porto.</p>
     </span>
  </div>

I am grateful for any help you can give me.

html5 twitter-bootstrap bootstrap-4

asked by anonymous 24.09.2018 / 23:02

1 answer

Array and error handling in numbers game Password Recovery WORDPRESS REST API

score 0 · Accepted Answer

The Bootstrap 4 grid is in flex , so the Utilites that you have to use are klex , here is the official documentation: link

Simply put the native Bootstrap classes d-flex flex-column justify-content-center align-items-center that the content will be aligned in the center! Put a height of 200px in the image just so you can see that it was aligned vertically straight.

See the example with your code. I did not compromise on anything, I just added the native classes that I said above in% w /% I needed. Display on " Page entire " to see the result better.

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">
                <img src="images/school-portugal.png" width="100%" height="200px" />
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8 schools-text d-flex flex-column justify-content-center align-items-center">

                    <h3>Portugal</h3>
                    <p>Portugal is represented by OFICINA - Escola Profissional do INA, a school located in the north
                        of the country, in the city of Santo Tirso, district of Porto.</p>

            </div>
        </div>
    </div>