Search code examples
twitter-bootstrapbootstrap-4jsfiddle

boostrap lists inline issues w/ fiddle and attempted code

New to coding have a boostrap issue in regards to list-inline and not displaying function.

I tried this in sublime text and jsfiddle, but neither provide me with the desired end result.

Note: 2 cdnjs already added to the fiddle

Visit: http://jsfiddle.net/thomasmccabe44/fqce10na/ 

<ul class="list-unstyled">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>  

<ul style="display: inline;">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>  

<hr>

Attempt 2

  • Item One
  • Item Two
  • Item Three

    • Attempt 3

  • Item One
  • Item Two
  • Item Three

    • I expected: Item One Item Two Item Three

    Actual results: Item One Item Two Item Three

    or

    Item One Item Two Item Three

    All returned with bullet points.

    Solution

  • In Bootrstrap 4, your ul should have the list-inline class, and your lis should have the list-inline-item class:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul class="list-inline">
    <li class="list-inline-item">Item One</li>
    <li class="list-inline-item">Item Two</li>
    <li class="list-inline-item">Item Three</li>
  </ul>  
</div>