As I work on creating a div with two columns, I am facing an issue with maintaining justified alignment. It looks great with two divs using col-lg6- in Bootstrap, but when I switch to col-md-6 or col-sm-6, there are excessive spaces between words to keep the alignment consistent with varying word lengths.
Here is a link to some image samples.
1) I've attempted a pure CSS solution:
#third-div{
background-color: #904e45;
text-align: justify;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
2) I also tried using word-break: break-all;, but this method breaks words without following proper grammatical rules.
3) Currently, I am exploring the option of using two Bootstrap cols within a Bootstrap row, like this:
<div id="third-div" class="page-div">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1>Lots of text</h1>
<h2 class="fio">But divided into two columns</h2>
<p>Some more text goes here.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p>Some more text goes here.</p>
</div>
</div>
</div>
.page-div{
padding: 15%;
padding-left: 15%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#third-div{
background-color: #904e45;
text-align: justify;
}