The point is this: you need to align the blocks vertically, but examples from the office. Site for some reason does not work. A similar question was already there, but I did not understand how he fixed it.
<div class = "container"> <div class="row align-items-center"> <div class="col" style='border:1px solid black'>1</div> <div class="col" style='border:1px solid black'>2</div> <div class="col" style='border:1px solid black'>3</div> </div> </div> 
Why did you decide that it does not work? If the parent element of the columns ( .row ) is not given a specific height, or the columns have the same height, then you will not see the effect.
.row { height: 150px; border: 1px solid #060; } .col { border: 1px solid #999; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container"> <div class="row align-items-center"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> </div> .row { border: 1px solid #060; } .col { border: 1px solid #999; } .col:nth-child(2) { height: 100px; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container"> <div class="row align-items-center"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> </div> 
Source: https://ru.stackoverflow.com/questions/840232/
All Articles