I have been trying to gain a better understanding of vanilla CSS and Bootstrap 4 for the past couple of weeks. I have been reviewing other campers’ projects involving CSS specific issues to see if I could learn what needed to be implemented to give them a working solution. I have seen several instances where campers are wanting to centeri a single list (ul element) on a page or in a div. I can accomplish this without a problem.
What I am struggling with is how to make multiple the ul elements have the same width of the widest ul (longest li will dictate this) and at the same time center all of the ul elements. I have only been able to achieve the desired look (see bottom of this post), if a specify a fixed width for ul elements. I do not want to do that, because the list content could be generated dynamically and there could be some lists with shorter or longer items which could throw of the intended look. I am requesting any suggestions involving only Bootstrap 4 syntax or a combination of Bootstrap 4 and vanilla CSS.
The following is my base HTML and CSS so far.
HTML
<div class="jumbotron text-center">
<h1>Lists</h1>
<h2>List # 1</h2>
<ul class="text-left">
<li>amet docendi</li>
<li>amet docendi inciderint vix</li>
<li>Nam ei ancillae apeirian lkj sdlklkjg dlkdsj dissentiunt</li>
</ul>
<h2>List #2</h2>
<ul class="text-left">
<li>amet docendi</li>
<li>amet docendi vix</li>
<li>Nam ei ancillae</li>
</ul>
</div>
CSS
ul {
display: inline-block;
}
The above code gets me close (see below):
But what I really want is:
