There is a mesh bootstrap 4 with 4 columns. How to make the content inside (colored with yellow color) with any amount of content be the same height? For the speakers themselves there is a great solution:

 .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; }

But, there are 2 problems: 1 - inside contains a link that does not flex ; 2 - we need a stroke around the content, BUT without a stroke of the picture itself. Here I have a plug and I do not know how to solve it.

Code:

 .row { margin-top: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .row>[class*='col-'] { display: flex; flex-direction: column; border: 1px solid green; padding: 10px; } .task-box { background-color: yellow; } .task-box-inner { border: 2px solid blue; } 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row no-gutters"> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> </div>

  • You can add a three-dot to the end of the text :) - Excess Suslik
  • @ Excess gophers let's be more serious - Vasya

1 answer 1

But seriously, like this:

 .row { margin-top: 20px; display: flex; } .row > [class*='col-'] { display: flex; flex-direction: column; border: 1px solid green; padding: 10px; align-items: stretch; } .task-box { background-color: yellow; display: flex; flex-direction: column; align-items: stretch; height: 100%; } .task-box-inner { border:2px solid blue; height: 100%; } 
 <div class="row no-gutters"> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div> <div class="col-3 mb-5"> <a class="task-box" href="javascript:void(0);"> <img class="img-fluid" src="http://via.placeholder.com/350x150"> <div class="task-box-inner"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</h4> <div class="hour">posted 15 hours ago</div> </div> </a> </div></div>

Jsfiddle

  • Thanks, but pay attention to the problems that I mentioned in the description (after all, I have 1 in 1 styles with yours) Π΅ΡΡ‚ΡŒ 2 ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΊΠΈ: 1 - Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТится ссылка, которая Π½Π΅ flex; 2 - Π½ΡƒΠΆΠ½Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, НО Π±Π΅Π· ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ самой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π’ΠΎΡ‚ здСсь Ρƒ мСня Π·Π°Ρ‚Ρ‹ΠΊ ΠΈ я Π½Π΅ знаю ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ. Π΅ΡΡ‚ΡŒ 2 ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΊΠΈ: 1 - Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТится ссылка, которая Π½Π΅ flex; 2 - Π½ΡƒΠΆΠ½Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, НО Π±Π΅Π· ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ самой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π’ΠΎΡ‚ здСсь Ρƒ мСня Π·Π°Ρ‚Ρ‹ΠΊ ΠΈ я Π½Π΅ знаю ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ. - Vasya
  • And why do you need a bunch of block elements in a, you know that this is impossible? - Zicrael
  • explain. how can you? (I just prescribe the blockiness for the link in additional styles too) well, I’ll replace the span , what will change fundamentally? If it helps to solve the problem, then ok, but how? - Vasya
  • No, it does not help, if you want to do that if you click on one of col, there would be a link, I will show you how, if necessary, just say. - Zicrael
  • one
    Do you need something like this? jsfiddle.net/pxy2h2hg/2 - Zicrael