align ul tag inside divs side by side

Question

I'm trying to make a <div> with some <ul> lists inside it, but for some reason I cant make it work. I'm trying to make something like this:

My Code I've made is this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table style="width:20px;">
  <tr>
    <td id="1">
      <div class=''>          
        <div class=''>
          <ul id='tog_nr-332' class='list-group list-group-flush' style='display:block;'>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
          </ul>
        </div> 
        <div class=''>        
          <ul id='tog_nr-332' class='list-group list-group-flush' style='display:block;'>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
          </ul>
        </div>
      </div>
    </td>
  </tr>
</table>

I've removed my classes because they dont change anything, but i left the class="" empty for you guys — Mads Sander Høgstrup, Sep 09 '21 at 10:29

Abin Thaha · Accepted Answer · 2021-09-09T10:34:32.843

Check this snippet.

Here I am using flexbox to align the lists inside the div side by side.

By default, the flex-direction will be row, hence we don't need to specify it explicitly.

.list-wrapper {
  display: flex;
}

<link
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  rel="stylesheet"
/>
<div class="list-wrapper">
  <div class="">
    <ul
      id="tog_nr-332"
      class="list-group list-group-flush"
      style="display: block"
    >
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
    </ul>
  </div>
  <div class="">
    <ul
      id="tog_nr-332"
      class="list-group list-group-flush"
      style="display: block"
    >
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
    </ul>
  </div>
</div>

If you are trying to add this inside the `td`, then use 100% width or something for the `td` — Abin Thaha, Sep 09 '21 at 10:31
Please read [answer] and add a sufficient explaination. Code only answers are consdiered low-quality as they are hard to understand and as such to reproduce. — tacoshy, Sep 09 '21 at 10:33

align ul tag inside divs side by side

1 Answers1