How to center a row in the middle of the screen in Bootstrap 4?

Navigation
1

I have a row with a column of tanna 12. I center the text horizontally inside this column but now I want it to be centered vertically in the middle of the screen. How could I do it? I tried flexbox to see if I could center the row but it did not work for me. any ideas? the row is shown above in the navigation bar.

My code is as follows: 

<div>
  <img src="\assets\img\imag.jpg" class="imagen img-fluid" alt="Imágen responsive">

</div>

<div class="d-flex align-items-center">
  <div class="row"> 
    <div class="col-12 col-md-12 col-sm-12 text-center" id="texto"></div>
  </div>
</div>

What I want is that what I show with javascript using the text id is shown in the center of the screen, with the code I have shown at the top (in the navigation bar). I tried giving a position: absolute to the div that contains the row but it does not work as I want since when I resize the window size it does not adapt.

    
asked by JulianProg 17.09.2018 в 05:55
source

1 answer

1

To be able to align the elements vertically inside a div you have to use the property align-items-center and to center them horizontally the property justify-content-center . All this will work as long as the div has the property d-flex .

Below I give you an example of how to use the two properties. 

.bd-highlight{
  background-color: grey;
  }
  
  .bd-highlight .p-2{
  background-color: white;
  border: 1px solid black;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<html>
<head>
</head>
  <body>
    <div class="d-flex align-items-center bd-highlight mb-3 text-center justify-content-center" style="height: 100px">
      <div class="p-2 bd-highlight">Flex item</div>
      <div class="p-2 bd-highlight">Flex item</div>
      <div class="p-2 bd-highlight">Flex item</div>
    </div>
    <div class="row">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUhviFApShZ8FnCeqIuRzyzylRppdbgAPehpBP3pWHD6ooSniq" class="imagen img-fluid col-md-12" alt="Imágen responsive">

     </div>

     <div class="d-flex align-items-center bd-highlight mt-3" style="height: 100px">
        <div class="col-12 col-md-12 col-sm-12 text-center p-2" id="texto">
           <span>AQUÍ VA EL TEXTO</span>
        </div>
    </div>
     <div class="mt-3">
      <div class="row d-flex align-items-center bd-highlight" style="height: 100px">
        <div class="col-12 col-md-12 col-sm-12 text-center p-2" id="texto">
           <span>AQUÍ VA EL TEXTO 2</span>
        </div>
      </div>
    </div>
  </body>
  </html>
    
answered by 17.09.2018 в 08:17
Problem with the assembly of animated SVG R Rstudio problems installing the mapdeck package and googlePolylines