Faced a problem When studying bootstrap 4, it was necessary to make a vertical alignment of the grid. Here is a sample code:

<div class="row align-items-start"> <div class="col">Верх</div> <div class="col">Верх</div> <div class="col">Верх</div> </div> <div class="row align-items-center"> <div class="col">Середина</div> <div class="col">Середина</div> <div class="col">Середина</div> </div> <div class="row align-items-end"> <div class="col">Низ</div> <div class="col">Низ</div> <div class="col">Низ</div> </div>

But for some reason, nothing works for me, and the speakers remain in place. And so it was with several tasks. But styles work, the difference is evident. Can you suggest a solution to the problem?

  • try wrapping the whole thing up in container or container-fluid - Tsyklop
  • Tried, did not help - Cyten
  • Help someone - Cyten
  • Oh gods)) Where do they even out? Heights have no row! An example below. - user210322
  • Thank you, really I found the answer myself) - Cyten

1 answer 1

 .container{border:2px solid #000} .row{border:2px solid blue;height:100px;} 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row align-items-start"> <div class="col">Верх</div> <div class="col">Верх</div> <div class="col">Верх</div> </div> <div class="row align-items-center"> <div class="col">Середина</div> <div class="col">Середина</div> <div class="col">Середина</div> </div> <div class="row align-items-end"> <div class="col">Низ</div> <div class="col">Низ</div> <div class="col">Низ</div> </div> </div>