How to place the list items horizontally in bootstrap cards(lists have to be placed dynamically i.e coming from the backend)

Question

I have created the bootstrap card and placed the lists coming from the backend but it is not showing properly(means the letters are coming one by one)

dashboard.comonent.html

 <li class="list-group-item" >
    <div class="row no-gutters">
      <div class="col-sm-4">
        <div class="card-body">

          <p style="font-size: 23px;">  <i class="mdi mdi-battery-unknown menu-icon " ></i>
          </p><span id="jammer"
            style="color:white;"></span>

          <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
          <h5 class="card-text text-muted" style="font-size:15px;"> Long 
          </h5>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="card-body">
          <p style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p><span id="jammer"
          style="color:white;"></span>

        <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
</div>
      </div>

      <div class="col-sm-2">
        <div class="card-body">
          <p  style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p>
        </div>
      </div>

</div>
  </li>


</ul>

Is there any other way to place the lists horizontally and dynamic .

Can anyone help me regarding this.

Answer 1

Use the following css properties on the element or div containing the text.

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Above code allows folding the words but not letters. if you dont want anything to wrap or fold to next line refer the different values for the above properties here.

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */