I am currently working with Bootstrap and I am attempting to create three columns filled with text overlaying a rectangle. The squares within the columns should have equal height and there needs to be spacing between them.
Through the use of display:table; and display:table-cell; properties, I have managed to ensure that the col- divs have uniform height. However, I am facing difficulty in making the inner div completely fill its parent. Any insights on how this can be achieved would be greatly appreciated.
Here is the code snippet:
<div class="container">
<div class="fons"></div>
<div class="linia">
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
Additionally, here is the associated CSS styling:
.fons {
background-color: blue;
height: 100px;
}
.linia {
display: table;
margin-top:-50px;
}
.col-md-4 {
display: table-cell;
float:none;
}
.dins {
background-color: cyan;
padding: 15px;
}
The main query revolves around ensuring that the .dins div fills up the entirety of its parent table cell.
You may view a demonstration that I have created using the following link: https://www.bootply.com/dId7aMpOcX