Vertical Alignment Bootstrap

Asked

Viewed 4,844 times

2

Hello, I’m creating a bootstrap 4 site. By trying to center a section of my site vertically, it just doesn’t work. I tried to use several ways to center 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’m grateful for any help you can give me.

html5 twitter-bootstrap bootstrap-4
  • 1

    If what you want is to centralize the h3 and the p just add the class text-center bootstrap to the elements or the div that contains these elements. Tbm is missing close two Divs in your Html.

  • change <span class="align-middle"> for <span class="text-center">

  • the center text the content horizontally and I want to center veticalmente

  • 1

    Take a look at this link

1 answer

3


The Bootstrap 4 grid is in flex, then the Utilities that you have to use are those of the klex, here is the official documentation: https://getbootstrap.com/docs/4.1/utilities/flex/

Just put the native Bootstrap classes d-flex flex-column justify-content-center align-items-center that the content will be aligned in the center! Place a height of 200px in the image just for you can view that it was aligned vertically right.

See the example with your code. I didn’t touch anything, I just added the native classes I mentioned above in div needed. Display in "Whole page" to see better the result.

    <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>

  • turned out as wanted, thank you very much!

  • @Joãomartins cool that worked there! Do not forget to consult the documentation, there is a lot there that you can do only with native classes! Good luck on the project!

Browser other questions tagged html5 twitter-bootstrap bootstrap-4

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